Wednesday, April 30, 2008

Web Production Guideline

A template is layout and is divided it into zones, in the pre-design phase before production. There are:
  • Header
  • Footer
  • Left
  • Right
  • Center
Within these zones, the Header and Footer zones are special has specific information to go in. The Left, Right, and Center Zones are typically filled with the following different types of blocks:
  • entry tags,
  • catalog tags,
  • menu,
  • drawings,
  • info blocks,
  • info boxes,
  • ...
The color and shape of these zone color and tag/block color are selected at step 1 of the production. These blocks are to be placed into the Right, Left, and Center zones during step 6 of production (see below). The structure of website ensures the production can work in an orderly fashion. And this guideline also governs what can be changed, and can not during production.

All the parameter used in the layout are pre-designed or configured prior to the production started (step 1). Those parameter of configuration should not be touched during step 6 of production content fill. Since we have never established this rule before, we will pay more attention in following this guideline.

As a reminder, let me list the 9 steps of website order fulfillment (production) process:

1. choose a site template/layout
2. create menu (site map structure)

3. match the site color style

4. create baseline repository,

5. each staff check out their designated pages

6. content fill:

7. check in

8. QA

9. publish (release)

The content fill are executed with multi-staff in parallel
  • match the info box color
  • modify the info block placement, size, layout
  • match/place the entry tags
  • header/footer

Design Guideline

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

To Choose a (set of) Color Scheme for the website

In a lot of cases, we browse different websites, and we came across a rare one and like what we saw. Colorpicker would be able to pick up the color code, right there and then.

colorpicker http://quick-html-color-picker.allgraphicstools-com.qarchive.org/_download2.html The color value will be converted to RGB and HTML format.
The colorpicker is an executable, you can create a shortcut to place it on the start command menu, or leave the executable on the desktop.

When edit our own site, we like to pick a set of matching colors, here is how we do it:
theme picker http://www.yafla.com/dforbes/yaflaColor/ColorRGBHSL.aspx?

The guideline for picking the right color:
  1. to use the above suggested tools
  2. to apply gradient on the tag, not the mouse over one (vey low appearance frequency)
  3. to use different color tone (saturation) on the neighboring tags

9 Sitepoint great books on webdesing

All following books in one Place

http://rapidshare.com/files/66092901/9_site_point_e-books.rar

The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques
The Art & Science Of CSS
Build Your Own Web Site The Right Way Using HTML & CSS
The Principles of Beautiful Web Design
The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition
The Flash Anthology: Cool Effects & Practical ActionScript
Build Your Own AJAX Web Applications
Firefox Secrets
Simply JavaScript










Tuesday, April 29, 2008

Navigation Menu

DHTML Menu System
http://subi2xezequiel.blogspot.com/2008/02/sothink-dhtml-menu-v-8.html

After installation and replaced the DHTMLMenu.dll on the C:\Program Files\SourceTec\Sothink DHTML Menu 8

Bring up the application and click on top menu bar - Sothink tab, choose the menu you like, then the program will bring you to the sothink Free Download page


Download DHTML menu builder --- Sothink DHTML Menu, to create JavaScript cross browser menu, pop-up navigation menus in clicks!

Go click on the following:
Please download version 8.5 directly.

Dreamweaver Spry Menu
This tutorial was post originally on ZeForce.com


Another Tutorial Part 1 Part 2 Part 3