Design Guideline

Wednesday, April 30, 2008

web design style and format
- reference: e.g. http://www.webstyleguide.com/

Text formatting
- reference: http://www.e-agency.com/landing_webdev.shtml
1. do not make a long text descriptive block;
2. do not only use bullet/number itemize approach; and
3. mix the text,
4. insert (processed) picture,
5. itemize the contents,
6. use mulit-column when possible,
7. balance the white space.
8. double and triple check the alignment.

Text font, points, and etc.
1. small points give you elegance but only on the white background
- reference: http://www.e-agency.com/landing_webdev.shtml
2. consistent font throughout the entire site/page
3. font/point/color/underline change only on the special words, for example: heading, quote, and title
4. always underline the hyperlink
5. use single line spacing.
6. 10 points on the light background seems to be the most common choice.
7. same indentation through out
8. build all common practice into css, and obtain prior approval for over writing the default css style

Text contrasting on the background
1. do not use dark on dark,
2. use white lettering on the darker background,
3. use black lettering on the lighter background.

Tables background and borders
- usage: itemized packages or plans
- reference: http://www.zinfi.com/
1. use some off-prime or grey background color
2. use gradient or stronger hue on the title cell
3. use 1 pt white or very light color border, do not stress the outline
4. clear MORE button to the next level page

Organization
1. divide the content to no more than 3-5 parts at each level
2. navigation links should be 10-12 links at each level
3. hyperlink as much as we can
4. access entrance should be everywhere, such as login/registration, chat, product and service menu

Product and service menu page
1. summarize in tabular format
2. more buttons to each category
3. replicate this information in different places and in different shape and format

Gallery page
1. balancing the levels of pages i.e. minimize the number of clicks (levels) v.s the size and number of thumbnails
2. easy and attractive navigation structure
3. quick and easy access to the detail information