Web Design 2 Progress Development | Week 1

Gannt Chart

This gantt chart is created for me to refer to as the project timeline, all the progress development of this project had been stated clearly for each week. By following this gantt chart, i would be able to done this project on time efficiency. 

Site Map

I created this site map for content arrangement on redesign the Old Town website. All the content had been summarized and split into categories. It will be looks more understanding compare to the exist Old Town website.

Competitor's Websites

Currently, I am doing a redesign website project. The website that I need to redesign is Old Town White Coffee. It is a fully flash-based website. I found a lot of reference from other competitor's website which is also a coffee house company. From my research, i get that most of the beautiful coffee house website is from oversea countries. Below are some of the competitor's website that I found interesting. Click on the thumbnail to visit the websites.

             

Competitor's Websites Analysis

1. cilantro-cafe

As can see, this company's website is trying to bring out the western style cafes. With the beautiful illustration as the design on the webpage, it looks great and very interesting, especially suit to their target audience- teenagers. It is a fully flash-based website, which need to take some time for loading. But the graphics were well-designed, so it is worth waiting for it.

Good

- nice art style 

- nice animation transitions

- new try out for a coffee house website

Bad

- take too much time for loading

- no consistency for webpage layout

- content looks messy

- used too much of typeface

- some text is unreadable

2. giraffe

This website bring out the feeling of childhood, with the simple graphic and some handwritten notes as the background of the webpage looks playful. It have a bit not suitable for this website because their target audience clearly not only is children, it have a wide range in age. 

Good

- nice webpage layout

- well content arrangement, especially on the menu 

- all the information shown clearly and neat

- overall looks colorful and happy

Bad

- too many typeface in the website

- overall design can be more mature to suit the target audience

- make some consistency for the webpage layout is recommended 

3. melitta

One of my favorites coffee shop website. It shows the cafe mood using the building of their company, also using back some common elements of coffee shop on the webpage structure. It is also a flash-based website, for conclusion flash website usually nicer than others due to the advantages on using flash animation. It have disadvantages too, such as the time taken to loading the flash website is longer.

Good

- webpage design based on the elements from the cafe is a smart choice.

- the content is well-organised 

- nice graphic and animation 

- consistency on webpage layout

Bad

- same as other's flash-based website, loading problem

- top navigation bar can be better in design

- icon such as "search", "my account", "chart" can enhance on design

- other than that looks quite well

4. prufrockcoffee

This website plays a lot on typography, and it looks very professional to me. Although there are lots of typeface being used, but still it looks artistic and nice. It will be a bit messy due to large amount using on typography yet it is a good try out for this website.

Good

- new tryout using typography apply on webdesign

- Nice color mood

- shows contrast between content and background

- Good try on typography

Bad

- not so good on content arrangement

- looks messy on the webpage

- some text is hard to be read

- no consistency between homepage and others

Client's Website Analysis
oldtown

This is the website that I am going to redesign it. As seen, it is a fully flash-based website. The contents were well organised but it is a bit too many on the content. This website is interesting with the nice view of old town photos and bring out the vintage feeling to the user. Some basic animation in the website makes the sleepy old town came alive, it color mood successfully attract the user and make them remember it as the significant of Old Town. The navigation bar is located below the  webpage is not a very smart choice, but somehow it still looks nice because the website is un-scrollable, so the navigation bar still can work at the bottom. For conclusion, the overall design of this website is very good compare to others. The good and bad points of the website were simplify at below. 

*Good 

- fully used of the flash-based website

- interesting and simple animation shown

- photos were present nicely

- successfully bring out the overall mood

-  well-organised content

- typography is suitable

- clear information is shown (e.g: promotion, outlets, etc)

*Bad

- loading slow
- too much content
- navigation bar is located at bottom
- unable to scroll
- widescreen is preferable

Beautiful Commercial Website
1. culinariafoodandwine

This website looks simple and clean, yet let people easy to read through the website. It give user space to breath, not too packed, gives comfortable feels to user.

2. chezgerard

The city silhouette inspired me to do something similar like this. I can either present it using old town's buildings or even apply it in a conceptual meaning. I get an idea to present old town in the modern environment like now. I am trying to blend in the old structure into the modern environment.

3. cafe-henrici

This website inspired me the most on the layout design. I decided to redesign the webpage using the menu book layout and also the top view from the table in old town. This is layout design is quite suitable especially for cafe websites. It bring out the overall mood of cafe into the webpage.

4. thelittlecakeparlour

I like the space in this website. It give user the room to breath, not too packed with the simple and nice layout of the webpage. Typography applied on this page is also well-planned, easy readable content, with suitable font size.

 HTML Code Library & Tutorial
1. Drop Menu

http://codecanyon.net/item/drop-menu/81289?ref=1stwebdesigner&clickthrough_id=41092403&redirect_back=true&ref=1stwebdesigner

2. jQuery idTabs with Animation

http://www.sunsean.com/idTabs/#t1

3. Smooth Div Scroll

http://www.smoothdivscroll.com/#quickdemo

4. ‘Back to top’ link using jQuery

http://agyuku.net/2009/05/back-to-top-link-using-jquery/


Web Design Tutorial
1. Create a Nature Inspired Painted Background in Photoshop

The art style and the color mood is very suitable for me to redesign Old Town website. Especially one of my idea is to bring out the silhouette of all the old town's building, therefore this tutorial may help me out while doing this project.

http://designreviver.com/tutorials/create-a-nature-inspired-painted-background-in-photoshop

2. Design Watercolor Effect Menu

I may also want to apply some water color effect, which is the coffee stain I want to present in my interface design. This tutorial would somehow guide me to create those effect, makes my overall design more interesting. 

http://webdesignerwall.com/tutorials/design-watercolor-effect-menu

3. Design a Unique Grungy Website Layout

Another idea of mine is to create using the menu books layout in the interface design. So, this tutorial is something similar that I could use this technic to form the design I wanted. It may not looks similar as what I am trying to present, but the montage skill is absolutely same to create the effect I was talking about.

http://psd.fanextra.com/tutorials/design-a-unique-grungy-website/

4. How to create a vintage Photoshop file

This is one of the art style I am trying to archive in this project- vintage. The mood vintage is very suitable for me to redesign the whole Old Town website interface. My main idea is to combine old and modern together to become the Old Town in nowadays. As can see in the cafe, they tend to decorate the environment into more vintage mood, but the element they used is quite modern, so this is one of their specialty.

http://psd-files.com/blog/how-to-create-a-vintage-photoshop-file/