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/