Webby 2 - Mood Board

Mood Board

My modd board is to put more feelings on what we need to do on the redesign web. This is to get the colors of the web and understanding on the item and what we have on the environment to bring the fun and the color collaboration to the websites. Typefaces are uses for readability and is suits to the websites for the theme.  

Webby 2 - Beauty Commercial Web

4 Beautiful Commercial Website




The Audi A1 (The Next Big Audi)
URL: http://microsites.audi.com/a1onlinespecial/html/popup.html#/locale=en_SG

Good:
- Great composition on the different angle.
- Color is consistent.
-Did present what they need to present.

Bad:
-The dark part need to be brighter.

DiorURL: http://www.dior.com/

Good: 

- Very attractive.
- The gray scale of the layout is smooth and tone is nice.
- Typography is really smooth.
- Those picture they took are me

Bad:
- Some side design.

Nike Vision (Vintage)
URL: http://www.nikevision.com/index.php?nsw
Good:
- Typography is great.
- The animated navigation is very entertaining.
- Those video playing in the background is a great idea.

Bad:
- The side text can be better.




PUMA
URL: http://www.puma.com/

Good:
- Navigation bar is very straight what we need to look for.
- Site map of the web is good. is easy.
- Very tempting feelings on staying the website especially those colors.

Webby 2 - Competitors Research

4 Competitors Websites



Sabah Tourism Board Official Websites
URL : http://www.sabahtourism.com/

Good:
- Readability is there.
- Uses the metaphor icon to know what we are heading.
- Pictures around about Sabah.

Bad:
- The website doesn't have the consistency.
- Website hierarchy can be better.
- There is no color consistency.
- Very confusing.
- Information can be categories, to messy.
- Navigation bar can be done better.

Jabatan Perlindungan Hidupan Liar dan Taman Negara, Semenanjung Malaysia.
URL: http://www.wildlife.gov.my/

Good:
- There is consistency on the website of the layout.
- Readability of words.
- Have the mini description about the menu.
- Header button are solid to know.

Bad:
- Color is very bad, doesn't have the feeling of their mission.
- Information of the content is not enough and quite confuse.
- Gallery is weird.

Wildlife Reserves Singapore
URL: http://www.wrs.com.sg/

Good:
- Consistency of the header.
- Great use of the colors.
- Picture are beautiful.

Bad:
- Page is quite long, those footer.
- Header button can be better.



Zoo Taiping
URL: http://www.zootaiping.gov.my/

Bad:
- Not really much to tell about the zoo.
- Lack of information.
- Page resolution is to small.
- Navigation on a main menu is weird.


Enhancement

PADI
http://www.padi.com/scuba/default.aspx

Commentary
- This website gave the right propose to what are they doing on the color of sea.
- This blog have the flash banner.
- They have sub and main navigation bar for the websites.
- Having advert and some courses articles bring the guide to what users needed.
- Simple collum to make everything some space.

Talkeetna Viaggi
http://www.talkeetnaviaggi.it/index.htm
 
Commentary
- This web have a great banner in the homepage but unfortunately is without any action on the banner.
- This web consist of alot of photos so metaphor a button or a plce. 
- The web consist of interesting  background with a great meta of mountain and color on the website. 
- The navigation on the top can be better by putting only the icon. 

Bird Malaysia 
http://www.bird-malaysia.com/

Commentary: 
- Simple looking with the theme of the forest as we can see the color is form the wood.
- This is a simple HTML  
- Navigation button is nice and simple. 
- The article s related too.  
 

Webby 2 - Planning

The Gantt Chart
A Gantt chart is a type of bar chart, that illustrate a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project. So we uses this Gantt Chart as our timeline schedule for our Redesign Commercial Websites.

I got a redesign website by getting lot. Where i had to redesign the Penang Butterfly Farm.

Site Map
A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, typically organized in hierarchical term.

4 HTML Coding Tutorial

Accordion Menu
http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

Roll Over Effects Button
http://www.pixelmill.com/support/al1015/kb101543.htm
http://www.htmlcodetutorial.com/images/images_famsupp_80.html

Marquee Text Direction
http://www.quackit.com/html/codes/html_marquee_code.cfm
http://www.hscripts.com/tutorials/html/marquee1.php

Live Floating Menu
http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

4 Design Tutorial

How to Create Clean and Colorful Layout
http://www.tutorial9.net/tutorials/photoshop-tutorials/create-a-clean-and-colorful-web-layout-in-photoshop/

Create a Light Textured Web Design
http://designinstruct.com/web-design/create-a-light-textured-web-design-in-photoshop/

Build an Inovative Profolio Site
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/build-an-innovative-portfolio-site-using-alternative-uiux/

Design and Build a Professional Business Layout
http://d2i.co/Post/Design-and-Build-a-Professional-Business-Layout-Using-Photoshop-and-Dreamweaver-Part-1/70.html

Single Minded Proportion

Single Minded Proportion: Laugh Make Life

A interface that makes you interact with the monter. Is a monster that gonna receive our sound and convert to energy resource to lighten our life. In this case, we will understand that we need to be happy to brighten our life.

‎1) Is a start navigation to present the tittle.
2) Is a introduction on how to play the game.
3) Is a monster that when you laugh he will laugh and will generate to the machine beside him.
4) Is a generator of animation to convert the sound to a resource.
5) Showing the city lighten up.
6) Telling how much and how we did it to help the world.