External Design Requirements

Design Standards

Content area

  • Content area width - required width of 750px to ensure all tools are displayed correctly
  • Design needs to work regardless of the height of the content area
  • Content may be larger than specified in your design depending on the content the user adds to the page, or depending on the content added to various tools

Menu / Navigation

All Dynamic Menus

  • Menu items can't be different colours
  • Mouse over transitions should only be either text colour and/or button background colour changes
  • Submenus and sub-submenus all need to look the same
  • Limit of up to 3 tiers of navigation (usability recommendation)
  • Fonts used must be standard HTML fonts

Top Menu

  • The menu must not become wider than the website itself
  • Suggested menu location is the top of the website. Usability standards suggest not placing main navigation in the bottom toward the bottom of the website
  • Dropdown menu’s can be split into columns and can also contain headings
  • Example website http://www.thewebplayground.com.au/

Side Menu

  • Side menu is recommended to be on the left hand side of the design
  • Side menu cannot contain headings and columns


  • Submenus can be a set width or variable. Variable width will reduce or extend to the width of the longest menu item in that menu
  • All submenus will be the same colour and have the same colour transitions

Supplied Design Format

  • Needs to be created in Photoshop CS2, CS3 or higher and be saved with "Maximum compatibility" select upon saving
  • Needs to retain layers
  • Needs to use RGB colour space only
  • Background images or design must not be cropped to assist website construction or if alterations needs to be made
  • Images must be masked appropriately and not cropped incase alterations or touch-ups need to be made
  • "Smart Objects" should be used when importing multi colour EPS, PDF or AI files into Photoshop to retain vector quality
  • Single colour logos/objects should be imported (pasted) as shapes rather than pixels to help retain vector quality
  • Layers should be labeled correctly and be grouped where appropriate
  • Needs to be designed to be viewed at 100% (Browser Zoom)
  • The body content area must be either 790px or 970px wide
  • All text used in design must be created into shapes
  • All text used in the content area must remain as editable text and have the no anti-aliasing applied (this makes the preview more accurate)
  • The fonts used in the editable text areas, including menus, must be standard web fonts to ensure maximum compatibility

Last Modified: 31 May 2022
In This Article