Goodday's Wire Frame

Goodday's Strategic Brief

Project Definition

The definition of this project is to redesign a commercial site, goodday into an interactive and functional website while maintaining the identity. The purpose of redesigning this website is to improve the website look more attractive to look at and to make the audience to stay longer instead of pressing the close button.

Current Site’s Analysis Goals

Goodday’s website should be more neat and tidy in a way so that users know where to click and start with since it serves a lot of products under the product range. Now, it is too much of link of products available in every page under product range which causes confusion which to click, what to click, link to a new link, where is the button located .Everything isn't organized properly. 

Client’s Analysis

Since it is about to let audience to know how about the products, I would suggest changing it into a simple background using a milk design for the logo to stand out more than it is now. Their unique selling point is perhaps is a company that specialized in manufacturing and to deliver good milk that covers from Goodday, Mr.Farmer, and Daily Fresh which has various products under be it a goodday or Mr.Farmer or even Daily Fresh.

Short & Long-term Site Goals

Since the long term of this site is to gain trust from the customers. Wanted them to know how they started and milk information. It is good that the website is full product’s information by the way they place their products in a page. The short term of this website is to let customers to know how delicious is goodday.

Target Audience

Their main target audiences are mainly Family with childrens and teenagers and young adults. Delivering great milk tastes with different tastes like Strawberry, Chocolate, Vanilla, and juices and even more to their customers to gain their loyalty towards their products.

Competitor’s Analysis

Very attractive and have strong identity especially Vitagen’s websites. Color mood suit their theme very much since it’s about Vitagen. Has drop down menu and flash elements like animation to cure the boringness of the website. Good navigation which is understandable, simple button and yet clear on how to use for the first time. Soft color used instead of too vibrant colors. Grid system is very neat. Since nestle’s shares is currently the top now, I can understands that their websites is-need-to-be corporate type of design. Although it doesn’t have lots of flash and design elements in it, it still look good because nestle produces a lot of products like milo and so on. So they way they arrange their information is quite good.

Idea & Concept Implementation

In my opinion, I would suggest changing the layout of the wire frame and change it to a little bit of cool colour with not-so-strong blue color. Having social buttons to be beside but, on the side layer of the design might be better to promote the goodday’s products. Identity of Goodday will be remained which is the blue so that it is still recognizable as Goodday’s  at first glance of the colors used. The importance of white space is also important to a design so that readers could breathe through it and make the design to stands out than the rest. White and Blue is a good combination for this website. As for type color, transparency with background texture or a little bit of grayish will be good as black will be to strong for the eyes to read at. This website should be easy to understand and narrowed down so that users can easily navigate from a topic to another topic like Goodday products under Goodday instead of every products with different brand is under a page.

Goodday's Moodboard Proposal

[ click for enlargement ]

Goodday's Site Map Proposal vers.2

[ click for enlargement ]

Goodday's Site Map Proposal

[ click for enlargement ]

Design Tutorials

Site: abduzeedo

Site: psd tutsplus

Site: abduzeedo

Site: psd tutsplus

Some other useful tutorial sites:

VandelayDesign
Tutorialized

HTML Libraries

Javascript Libraries

Site: Web Source
Site: Java Script Free Code
Site: Java Script Kit
Site: Smashing Magazine/Javascript 
Site: Hong Kiat 


Tutorials of Javascripts
pop up window: Web Source
back to previous page: Web Source
slideshow gallery: Java Script Kit
live validation: LiveValidation

Goodday's Competitors

Site: Vitagen

Analysis: Very interesting curve line instead of a straight line for the header. Very strong identity colour and organized in a way that it is so neat and very lively. Illustrated diagrams can attract younger children to understand it in a better way.

Site: Marigold

Analysis: Have 2 options before entering the website. I think this is a good way to track where do they come from by placing this option. Marigold uses "FREE" to attract audience to look at it instead of navigate away from the current page.

Site: Dutch Lady

Analysis: Out of all competitors, i think Dutch Lady designs their websites with a big-kind-of-designing. It is interesting in a way that it can actually attract children in a more friendly way since it is designed big enough for  children to read it.

Site: Nestle

Analysis: Corporate designing of Nestle. Grid and Type system is well organized. History content is added with a picture rather than all texts. Since Nestle have a lot of products, it is well categorized.

Goodday's Gantt Chart

[ click for enlargement ]

Goodday's Original Site Map

[ click for enlargement ]

Analysis of Beautiful Websites

Site: WorryFreeLabs

Analysis: The way they centralised their informations make it different from the other website which can be found left alligned. Big font size is used and interesting javascript used in this website especially the "next" button. Interesting way of feedback form instead of the normal ones.

Site: KeyFruit

Analysis: Apllication rollover and gif application actually change the whole website from dull to interesting. Consistency in this website is very nice to look at.

Site: Stack

Analysis: Stack, is really sketch and grayish and yet it is still very nice to look at. Very comfortable color to look at and the illustration is very nice that it brings out the website to look at.

Site: Silver Pistol

Analysis: Very interactive and fun way of displaying their description. Background colors can be change as the user click on which color they prefer the background to be. Very neat and have nice typeface that brings out their digital stuffs. The use if flash also functioning as in making audience to explore it further.

Site: Pointless Corp
Analysis: The application of illustration and colors mixed well in this websites with the illustration.