Web Design 2 { MoodBoard }

Moodboard.

Web Design 2 { Gantt Chart & Site Map }

Here is my Gantt Chart & Site Map.

Web Design 2 { Competitor Site }

These are the competitor site i found. Although they are not very well designed, but i found that their information is slightly better then JustLife ones.

www.shoporganic.com ^

{Pro}

- Consistent design.

- Balance Execution.

{Con}

- The design is very safe. *looks like those normal e-commerce site*

- Could have more attractive picture.

www.organicfood.com.au ^

{Pro}

- Nice color combination.

- Nice graphic.

- Good choice of type treatment.

{Con}

- The design is very safe. *looks like those normal e-commerce site*

- Hierarchy not that good.

www.naturalgrocery.co.uk ^

{Pro}

- The hierarchy is good.

- Execution is very clean and simple.

{Con}

- Design can be enhance.

- Color choice can be better.

www.countryfarmorganics.com ^

{Pro}

- Hierarchy is good

.

- The design treatment is good *except for the header*

- Clean and neat.

{Con}

- Background color kind of noisy.

- Typo treatment can be better.

- Can have more attractive picture.

Web Design 2 { Just Life }

The Website that given to me is Just Life. An company that sell organic product, food and etc. When i click through the site, i find that the site was actually looks better than i expected. The design was very clean and simple. The only bad thing was the composition, background and the information hierarchy. The background was kind of annoying because it keep on changing when i click through pages, the background was also not so "organic". Next is the menu bar, i could find some link that couldnt be found on the main page. Thats a very big problem, because i dont know where am i. although they do have breadcrumbs...

homepage. ^

Promotion page.^

product page.^

contact us.^

about us.^

Web Design 2 { Tutorial Links }

Here are some useful link

HTML/CSS tutorial links

1. http://sixrevisions.com/tutorials/web-development-tutorials/psdhtml-conversion-elegant-and-simple-css3-web-layout/

2. http://sixrevisions.com/html/bouncing-a-ball-around-with-html5-and-javascript/

3. http://www.csstutorial.net/

4. http://www.w3schools.com/

---------------------------------------------------------------------------------------------------

Design tutorial links

1. http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-a-detailed-vector-sugar-skull-illustration

2. http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-a-gothic-blackletter-typographic-design

3. http://abduzeedo.com/

4. http://www.pslover.com/

Web Design 2 { Inspired Commercial Website }

www.springhouselaw.com

{ pro }

- Nice Layout

- Background color suits my idea

- simple yet clean

{ con }

- typo treatment can be better

www.sheridanandco.com

{ pro }

- Like the "menu" kind of thing

- like the color too

- simple yet nice!

{ con }

- i think this site is really well done

www.goinghometoroost.com

{ pro }

- The header was very "organic"

- the color is what im looking for

{ con }

- the right part is kind of heavy

- can have more detail icon for FB, twitter

www.chipotle.com/en-US/Default.aspx?type=default

{ pro }

- like the way the present the product

- Composition is very interesting

- they replace the normal icon to their product

{ con }

- color can be more colorful

- not detail enough in term of graphic

work.dorotheu.com

{ pro }

- love the header alot

*inspiration web*

{ con }

- not much information

*but its ok for a portfolio site*