design layout

To start designing your web site, the best method is to use a graphics software, such as Adobe PhotoShop (http://www.adobe.com) or Macromedia Fireworks (http://www.macromedia.com).

First, sketch out a couple of ideas on paper
Gives an idea of where you'd like elements, such as the navigation, before you start getting into the design proper
Open a new file at 780 x 430 pixels
- This way, all people with 800 x 600 pixel screen resolutions and above will see the complete page
  - n.b.: Making sure you design for 800x600 is still probably the best bet
  - It is still the largest group and many people with larger screen resolutions don't have their browser window maximized
Choose a palette of colors to base the design on -- 4 is sufficient
- This may sound extreme, but you can use varying tones of the same shade to highlight
  - For example, this web site uses different shades of purple and teal, as well as dark blue for text
Decide where you are going to locate the navigation, and fill this with navigation items to mark out sufficient space
Carry on with the design
Produce several versions to see which you prefer

tips

Design in black and white first
- Lets you see how strong the design is without color
- Color should never be the only indicator of change / navigation categories
- Check how your finished design would look to a color-blind person
Try to "line elements up"
- The content will be easier to read
- This stops elements looking like they are simply "floating" independently on the screen
  - e.g. The top of the navigation with the top of the main heading
  - e.g. Make sure things line up to the left of the screen (20 pixels is a good distance)
Use the grid functions in graphics software to "mark out" where to slice up the whole design into separate graphics

Example of lining elements up in a design