Sunday, January 8, 2012

Web Design 2 Project - Rapid Penang

 Gantt Chart :




Site Map :















Client's website analysis:
http://www.rapidpg.com.my/

















Good:
-nice graphic of the rapid bus
-many data provided
-consistent on the mood
-side navigation and the logo is consistent at the left side
-background will change according to the daytime or nighttime

Bad:
-home page a bit complicated
-same layout for every page seems a bit boring
-side navigation can be better 
-side navigation roll over a bit too fast, hard to click on it
-overlap bottom navigation on some browser
-image of the information can be more contrast
-the info data is like too fixed in the same box
 (everything looks the same excluding the info data)

Moodboard:

4 Competitors Website
http://www.panoramalangkawi.com/
Good:
-Nice visual on the navigation links above.
-Bottom of the page looks nice.
-Identity color is green.
Bad:
-Top navigation link and side navigation link are the same.
-Images not interesting enough to grab attention, a bit boring.
-Typography for the navigation link above can be better.

http://www.ktmkomuter.com.my/ 
Good:
-Neat information provided.
-There are many visual supported in this web.
Bad:
-Pink and green appeared in home page a bit not match.
-Overall website can be more attractive.
-After scrolling down, the navigation above(homepage) seems a bit like just for decoration and people wont go and click it as there are same navigation link at below there to easily click.

http://www.sbstransit.com.sg/
Good:
-Identity color, purple is used.
-Top navigation links are consistent.
Bad:
-Home page too many words, a bit packed.
-Small navigation link. Can be bigger ad it can be easier to click
-Too little visual to attract people to continue reading.

https://www.aeroline.com.my/
Good:
-Identity color, yellow is consistent.
-Bottom image on the homepage is nice, have a good concept that link.
-Clear information given.
Bad:
-Navigation links a bit too small.



4 Beautiful Commercial Website

http://www.dunkindonuts.com/content/dunkindonuts/en.html 
Good:
-Identity color,orange is consistent.
-Big image on homepage grabs attention.
-Interesting layout.
-Nutrition facts part is creative, I like.
-Main navigation links on top is consistent.
Bad:
-Too many white space on some page.
-Top navigation link roll over effect overlap with the info data look bad.

http://www.fridays.com.my/index.php
Good:
-Identitry color, red is consistent.
-A bit packed on the homepage but it looks great in this layout. 
-Neat and tidy website.
-Have great layout on the menu part. It's clear enough.
-Top and side navigation link is consistent.
-Attractive and big advertisement that can grab attention easily.
Bad:
-Typography for navigation links can be better.
-Roll over sound effect just appeared at homepage and not all pages. Not consistent.

http://www.solvilettitus.com/ 
Good:
-Nice color mood. Smooth and warm.
-Nice layout on the product page. Using white but I can feel the elegance.
-Color used is super match with all the product. Looks nice.
-Fonts is suitable for it too.
-Clear information given.
-Like the photo gallery.

 http://www.chanel.com/
Good:
-Overall is in black. Elegance and grand.
-Big image in the homepage to grab attention.
-Like the layout by introducing the product 1by1 that spend lots of space but great layout it have.
-Nice interactive on clicking it. Nice movement for every "next".
-Loading part on top of the page is creative.




__







http://metrochicago.com/
Good:
-the layout is great, neat and clear
-the color and composition is fashionable, won't look updated
-typefaces is match, it looks nice on the navigation links and even the body text
-nice typography on the overall website
-logo and navigation link align at right look fresh
-love the color mood
Bad:
-different layout on other pages will be better


________________________________________

4 HTML Coding Tutorial
-http://www.2createawebsite.com/build/html.html#dropdown
-http://www.ssi-developer.net/css/menu-rollover-effect.shtml
-http://www.addglitter.com/hover-link-glitter.asp
-http://www.quackit.com/html/codes/html_marquee_code.cfm

4 Design Tutorial
-http://www.noupe.com/tutorial/53-killer-photoshop-illustrator-effects-and-tutorials.html
-http://www.1stwebdesigner.com/tutorials/50-really-high-quality-photoshop-navigation-menu-tutorials/

-http://sixrevisions.com/photoshop/25-web-design-layout-tutorials/
-http://slodive.com/photoshop/photoshop-web-design-tutorials/

Sunday, November 6, 2011

Progress for critic :)









**It's week10 ! argh! all pages have to be done in this week. 
But my interface looks unpresentable yet :(
HOW? Where to improve? my layout grid and typo is worse ! >.<

Tuesday, October 18, 2011

Progress for WD1 (structure)


Home Page:


Content Page:

















**the button is under construction :)

*** my interface is just fit 1024x768px, no scrolling. So, I put the navigation links  at the below part. Hope it's ok for the overall lar.

Tuesday, October 4, 2011

Progress for WD1

Moodboard , Color Pallete and Typefaces chosen


Site Map


Site Structure

Content

Thursday, September 15, 2011

Web Design Project 1 - HOW TO ... ?

1. How To Train Baby Sleep
WHO AM I - Babysitter
WHAT IS IT - baby sleep training methods
WHAT FOR - parents can have more time to rest or sleep without worrying their baby
1ST TASK - crying down (day1 1-6steps)
2ND TASK - the core night (day2 1-5steps)
3RD TASK - controlled crying (dat3 1-2steps)
SHOWCASE - Gallery
**Nowadays, parent have less sleeping time at the time because of their new born baby. Baby will cry for milk in the midnight or just cry out because of having a nightmare. Parents may learn some baby sleep training methods to train their baby. It may not works all the time but it may helps sometime. 


2. How To Be A Good Santa Claus
WHO AM I - Santa Claus / Author
WHAT IS IT - To act like a santa and cheer up everyone in the Christmas season
WHAT FOR - Christmas Party
1ST TASK - Nail the costume 
2ND TASK - Buy a big red sack and fill in with candy canes
3RD TASK - Bounce around happily and give candy canes to everyone 
SHOWCASE - History / story of Santa Claus 
**Christmas is around the corner. Someone may planning a party at home or anywhere else. Santa Claus is the important character in this happy season. Act like a Santa can cheer everyone up especially the kids. 


3. How To Make Your Own Strawberry Frozen Yogurt
WHO AM I - Housewife
WHAT IS IT - Homemade dessert for your friends and family
WHAT FOR - Good for digestion 
1ST TASK - Prepare ingredients
2ND TASK - Making the mixture ( in progress)
3RD TASK - Process the mixture in your ice cream maker 
SHOWCASE - Gallery of different flavor of frozen yogurt
**Frozen yogurt is selling fast everywhere and it's not cheap. Yogurt is good for our digestion as it's a type of positive bacteria. Homemade frozen yogurt is cheaper and fresher for everyone. You may learn and made it for friends, neighbour or own family. Cool your tongue in the hot season. It's healthy too. 


4. How To Stay Awake at Work When You Are Really Tired
WHO AM I - Office Worker
WHAT FOR - for those office workers who always sit in front the computer to have a fast rest
WHAT IS IT - some practical ways to stay awake and on task at work when tired
1ST TASK - Tackling the cause
2ND TASK - Exercise while sitting at your computer
3RD TASK - Listen to jazz and drink your coffee and tea
4RD TASK - Breathe deeply
OUTCOME - Stay fresh and continue to work on
SHOWCASE - short funny video to cheer you up

Photoshop Tutorial

1. http://www.hv-designs.co.uk/2008/08/28/car-layout-3/
2. http://www.hv-designs.co.uk/2008/10/03/personal-portfolio-layout-2/
3. http://line25.com/tutorials/create-a-clean-modern-website-design-in-photoshop
4. http://spyrestudios.com/rockin-website-layout-in-photoshop/
5. http://www.hv-designs.co.uk/2008/11/24/design-studio-layout-2/