Web Development
Web Developer Guidelines
Visual Design Recommendations

Visual Design Recommendations

Enhance clarity and ease of understanding of website content with good visual design

  • Use informative images such as icons to support links and navigation
  • Support information with relevant images such as diagrams, graphs and maps
  • Use colour, layout, space, borders and images to divide information visually into meaningful chunks which are easy to read and understand
  • Use a lot of white space between web page elements to guide users from one item to another and reduce any strain on their eyes caused by reading information from the screen.

Create flexible width design where possible

  • Use flexible design layouts to accommodate the variety of browsers, screen resolutions and monitor sizes.
  • Most importantly, the design should accommodate text reflow to ensure the content of your website is accessible to users of screen magnifiers.

Ensure your website is printable

  • A total width of presentation graphics such as logos, diagrams and maps should not exceed a horizontal measurement of 650px, which will fit into an A4 sized sheet of paper when printed.
  • Utilise print stylesheets so that unnecessary components of the web page such as left and top menus are not printed.
  • Ensure all graphics which are intended to be printed are printable on a standard white paper. For example, light colour logos on dark backgrounds which are controlled by the CSS will hardly be visible when printed. Similarly, gifs with transparent backgrounds will have unpleasant, jagged edges when printed.

Text elements

  • Text elements such as headings, buttons and slogans should be HTML text, not graphics.
    Exceptions:
    • logos
    • important special text effects
    • Important brand communications
    • Illustrations
  • Use Verdana or Arial fonts as they are good for reading online.

Colour

  • Ensure there is plenty of contrast between foreground and background colours. A free colour contrast analyser is available at Juicy Studio  (juicystudio.com/services/colourcontrast.php)
  • Perform a colour-blindness simulation to ensure no information is lost for colour-blind users. This test should be performed on individual graphic images and on the overall site design. Visit ColorDoctor  (www.fujitsu.com/global/accessibility/assistance/cd/) to download a free colour blindness simulation tool.
  • Avoid using complex patterns as backgrounds.

Layout

  • Avoid using tables for layout
  • The site structure must be CSS based
  • The entire global navigation must be seen using browser resolution 800x600

Banner dimensions

  • The height of the banner should not exceed 150 pixels or a quarter of the height of the screen at a resolution of 800x600 pixels.

Banner requirements

  • The banner should contain the Victorian Government logo and link through to "www.vic.gov.au".

Back to top