WD2 | The Loaf interface design

main page

product page

have changed the concept into more japanese style, based on the texture and colour of the shop's design which located at Pavilion, KL. Since it is a bread selling store.i used dark chocolate and also orange colour (which is the corporate and identity colour) instead of pure black, to bring out the desire towards the breads and products.

WD2 | moodboard and revived sitemap

WD2 | research and analysis

-----------------------------------------------------------------------------//The Loaf bakery and bistro

This is a commercial website which given by the web lecturer, our task is to redesign the whole website to enhance it.

The Loaf bakery and bistro is a baking concept operating in Malaysia but based upon the traditional Japanese baking techniques.

The shop is owned by our previous prime minister, Tun Dr. Mahathir and started out in Langkawi. The bakery in Pavilion Kuala Lumpur is a branch and there is even a bistro where you can get hot food and afternoon tea.

Analysis:
*the colour scheme in the website doesn't seem relate with the brand identity.

*the repeating background of the website doesn't look professional.

*most of the body copy are image based, not real text.

*product showing section's flash navigation is not user friendly, and unnecessary.

*weak in hierarchy.

*main page's promotional banner's design can be better.

*buttons on the left look messy.

*the map on the contact us has some error.

*the overall colour mood is not suitable.

-----------------------------------------------------------------------------//Competitor's Websites

http://www.ilovewondermilk.com/

Analysis:
*strong style in terms of graphic

*very colourful

*blog-style-interface design

*a bit not organize, although there are category on top of the site

http://starbucks.com.my/en-US

Analysis:

*weak in hierarchy and grid system

*lots of information about their used material on their products

*weak design layout

http://www.fullhousecafe.com.my/

Analysis:

*interesting illustrations and graphics

*a bit lack of design on the website's layout

*well organize, but some of it are still under construction

http://www.breadtalk.com/

Analysis:

*interesting navigation on the flash-based banner

*consistence design treatment on every page

*clean and user friendly

*nice and consistence for the product's photos

-----------------------------------------------------------------------------//Beautiful websites

http://www.silenzio.fr

Analysis:

*interesting navigation

*nice alphabet arranging style, easy for searching

*stylish

*lack of detail information

http://www.wishbonedesign.com/

Analysis:

*nice and clean, playful, grab attention

*interesting navigation design

*very interactive

*lots of tiny-moving-animation, makes the website alive

*nice info-graphic

http://www.uniqlo.com/utweet

Analysis:
*strong grid system

*simple colour, yet catchy

*unique style of interactive

*not really user friendly, just a promotional web for their brand

http://squaredeye.com

Analysis:

*good hierarchy

*consistent colour and style

*nicely arrange for the information

weather forecast with music

added music and some sound effect on the [typography | weather forecast] project.

edited the intro part with some blur effect, and also the typing error on the Malaysia's report.

music credit to Coldplay.

scanogram

never thought of scanography can be so fun :)

//photos are edited.

WD2 | gantt chart and site map

gantt chart[edited] for redesign commercial website, The Loaf

site map for redesign commercial website, The Loaf

typography | weather forecast

This is the typography final project: {moving-type on screen}. We are given a task which is to design a weather forecast and apply on the knowledge of typography into it. It is very different from the illustration kind of typography which you see from anywhere, you'll have to consider about the movement of the typography in screening, weather it is suitable for the rational behind.

Art-style // Concept

A first try on geometric style, together with simplification, by choosing the object which can symbolize the country. Using the black element on behind the screen to become a main flow-lead of the whole weather forecast.

had fun doing it :)