graphic design

design principles

choosing color
design layout

home > graphic design > design principles > design layout

design layout

To start designing your web site, the best method is to use a graphics software, such as Adobe PhotoShop ( or Macromedia Fireworks (

  • 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


  • 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