Layout (a.e.i.o.u Studio)

Art stlye is basically follow back at their original website art style. They uses black stroke, i indicate into my design. I havn't add color.

As for the Home page. I added a big promotion banner where user will see when they open log into the website. Also have some tab. Which is New, Tips and Event. Where user can click and will direct the user to the page linked.
New, where the page showing New Product
Tips, video on how to wrap a present?? how to decorate a present with ribbon and so on...
Event., up coming event



In the Product page. there will be a moving panorama moving side way with the hottest item on the market. This will tell user which item have the most people bought. Also there will be a side category bar where user can choose the category and view the picture according to the category chosen.

Strategic Brief & Mood Board

Project Definition:
To redesign the a.e.i.o.u Studio website. To help enhance the website by improving own their design, interaction flow and usability.

Current Site Analysis Goals:
Currently the website is just give a little information on what the Studio is about. And also show casing some of their product. User also able to get "Up Coming Event" from this website too.

Client's Analysis:
Is a gift products company that sell wide range of items. From: Boxes, greeting cards, wrapping paper to so much more.

Target Audience:
Young adults 14-21.

Competitor's Analysis:
-Design on their website mostly towards clean layout
-News product will be on the main page
-Categorize neatly in the product page

Idea & Concept Implementation:
Their art style is pretty good, it just that they didn't use that art style throughout the website. Will be using their art style to redesign the website.

Remove the splash page, and change it to a Promotion Page. Where there are promotions, sales, top product. Will be on the 1st page of the website.

In the product page. Create a side category and picture will be show in the middle of the page.

"Point of Purchase" will be change to "Where To Buy"

________________________________________________________________________


Mood Board

Beautiful Commercial Website

BEARBRICK
http://www.bearbrick.com/index.html

The artstyle of this website is certainty very unusual because of the influence of the product. There are options to change the language, but the position of that is a little bit weak. Interaction flow is clear, button is clear. Product page, show a big picture of the product for user to see.










________________________________________________________________________


Crocs
http://www.crocs.com.my/index.php

Analysis:
The design of the website is clean cut, looks like very professional. They also applied the idea of "above the fold" and "under the fold". Just need to add some roll over effect on the some of the button, it will be much better. Usability is good









________________________________________________________________________


Baskin Robbins
http://www.baskinrobbins.com.my/

Analysis:
Pretty fun website, interesting design on navigation button. With alittle movement on some of the graphic, make the website more attractive. Roll over effect also play an important role in this website. Flow of the website is smooth.

Website Photoshop Tutorials

1.)http://www.hv-designs.co.uk/2007/10/10/web-design-layout-2-tutorial/





2.)http://www.talk-mania.com/web-layouts/42842-photographer-layout-portfolio-layout.html





3.) http://www.hv-designs.co.uk/2008/03/18/funky-web-design-layout/




4.) http://www.talk-mania.com/web-layouts/37340-urban-layout-perfect-web-design-company.html

HTML Tutorials

1.) This teach how to create a Menu Bar
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm



2.) This teach how to create a more instresting design of scrooling
http://www.dynamicdrive.com/dynamicindex2/sagscroller.htm



________________________________________________________________________


HTML Tutorials Website

1.)http://www.tizag.com/htmlT/

2.)http://www.htmlcodetutorial.com/

3.)http://www.w3schools.com/

Competitors Website

http://www.superiorgiftwrap.com/

Superior GIFTWRAP

Analysis:
The white space is too much in some of the page, will affect the user thinking the website is too empty. When the user click into a product. The page is totally different than the home page. But this website clearly show the design of the wrapping paper.





________________________________________________________________________


http://www.papermart.com/
Paper Mart

Analysis:
The color is quite unfamiliar to me. I personally think the website is weak. With no typo treatment, and the arangement of the Layout is very messy. The side, when the page is long enought, when scrooling down it will follow the scrooll bar as you scroll down. Is a pretty usefull tricks, but I think they use it in the wrong way





________________________________________________________________________


http://www.noblepackaging.com/

NOBLE Pakaging

Analysis:
Because this website is a international website. When a use go into the website, it ask the user to pick 1 out of 3 country to change the currency of the prize. User friendly website, user know where to click, where to go.





________________________________________________________________________

http://emmakdesigns.com/

Emma K

Analysis:
This website is clean and with the touch of pink, it give a homey fell into the website. The menu button bar, the words inside can't really read. Because of the noisy background and the color combination. The navigation is quite clear.

Client Website & Site Map

http://www.aeiou.com.my/index.html

a.e.i.o.u Studio
Analysis
The website is not bad already. With some animation and some simple graphic really brougth the website alive. The website currently is lacking of information. Placement of the logo is quite weak.

In the "Products" page, user might not know there are link inside to show the visual of the product.

In the "Point of Purchase" page. there are box for user to click, and it will open up another window to show a picture.









Site Map

Grantt Chart