Guidelines for Web Graphic Design

I prefer simple, effective, graphic design. My websites promote your business. So I follow standard, familiar, web-layout conventions. Sometimes my clients design the layout, other-times it’s my design. My guidelines are:

Simplicity

I like the following conventions. Alas, however, “great use of familiar conventions” won’t win me graphic design awards and job-offers.  I want your visitors find their answers:

  • Logo: In top left hand corner.
  • Menu: At the top of the page on the right hand side.  For pages with a lot of text, a footer menu is worthwhile as it encourages visitors to visit another page.
  • Links: Only links should be underlined.
  • Search box: Important for large sites with hundreds of pages. Otherwise it’s distracting on sites with a well structured menu, and relatively few pages.

Proportion

Wherever possible, I  use the “Golden Ratio” which is 61.8 to 31.2.  For reasons that aren’t clear, this ratio is  aesthetically pleasing.  The more elements that use this ratio, the better. Usually,  the following proportions often use the Golden Ratio:

  • Main text width to  sidebar width;
  • Font size to line height;
  • Picture width to height.

The Golden Ratio is about 2/3 to 1/3, a ratio which also works.   Alternatively, one can divide  a space into thirds, both vertically and horizontally. This creates a grid. “Good” photos have something interesting  where each horizontal and vertical “third” cross.

Colour

Multiple colours  distract visitors.  Generally my web-sites use two or three colours.  Often I use the logo’s  colours. Otherwise, I use a colour wheel to find colours that “work” together.  I use these colours, consistently,  for:

  • Menu: link, hover and active states;
  • Top bar and footer bar;
  • Borders.

Alignment

The visitor’s eye scans along straight horizontal and vertical lines. So for easy scanning, elements should align horizontally and vertically. For instance, the following  align:

  • Left hand edge of logo with the edge of the text;
  • Titles are all left-justified;
  • Right hand edge of the sidebar with the last menu button;

Top and Footer bar

These days I often add add a bar to the top and footer. These bars help frame the page. The top bar contains social media buttons, if appropriate, and contact details. The footer bar contains the company address and copyright claims.

Main Content vs Sidebar

The main content width is between 50 and 75 characters long for good readability. If the line is any longer, the content won’t be read. Even if using a reasonably large font, the main content occupies about half the screen width. So what content could usefully fill the remaining space? Common solutions include:

  • Menu;
  • Recent Tweets;
  • List of recent blog titles or recent news items;
  • Advertisements

Generally, the sidebar content is much the same on every page, which strikes me as wasting space. More usefully, I usually add photos and a little text to the sidebar. Examples include:

  • Products: Photo captions summarize features, advantages and benefits;
  • Diagrams: which illustrate the text;
  • PowerPoint slides: Recycle  existing PowerPoints. Slides in the sidebar, speaker notes in the main content.
  • Staff: Picture captions summarize their skills, qualifications and background;
  • Puzzles: Picture, question in the caption, and answer in the “tool tip”;
  • Examples: Photos and summaries of previous projects;
  • Screenshots: which illustrate the content. e.g. for IT related products and services.

Alternative Layouts

There are alternative layouts, for instance:

  • No sidebar. Large background picture covering the entire screen.  Content text in the middle;
  • Two columns of content, one on the left, the other on the right. Small picture in the middle;
  • Alternating picture across the entire content, followed by 3 text boxes underneath.