The New Writers' Guide

The New Writers'Guide - Home
Design

Basic Tools

Design Essentials

Layout, and the All Important First Page

White Space

Continuity and Change

Graphics and Visuals

Typeface and Fonts

Glossary



        

Electronic Graphics.

Remember that it's always best to place information as some kind of a graphic or chart, table etc. (Whenever possible). Some points to bear in mind when doing so:
  • Captions - Make the caption descriptive, possibly of the primary conclusion. Also, use a contrasting typeface, not an italicised version of the body copy or there won't be enough contrast and it will actually compete with the body copy.
  • Font - Bell centennial is a font specially designed to be read at small sizes.
  • Tables - in the leaders, i.e. the first column or row that titles the data that follows - have typographic contrast, like Italics, bold or a different font, to give contrast and stop it being confused with the data itself. Whenever possible, simplify the gridlines and hide them when they aren't essential. Left flush data in cells. Have different background colour to columns/rows to help give order to complex information.
  • Also, tables are an exception to the white space rule, that's because the white space makes cross-comparison more difficult.
  • Keep columns/rows as narrow as possible, if one is much larger than the others are you accidentally imply that it's more important.
  • Pie Charts - Limit them to six slices only, if you have more categories, then join some into a miscellaneous slice.
  • Use flowcharts to represent sequence or make it easy to understand options.
  • Use organisational charts (which look like family trees) to show hierarchy and responsibility.

Manipulating visuals.

You're very likely to want to put pictures into your web page. These are some ways you can manipulate then to ensure 'a better fit'.
Cropping - essentially like taking a pair of scissors and slicing unwanted details/areas off the side of the picture.
Silhouetting - Removing the background information to make the background stand out.
Manipulating - the light and colour balance.
Transparency - weakens the photo overall, so any text placed over it becomes more readable.
Screens - changing a photo to a series of dots so its size can be reduced without the image going muddy.
Posturisation - removes the middle tones, leaving only the highlights and shadow so the image assumes the appearance of a sketch.
Duotones - makes a black and white picture into a picture of two colours to 'warm up' the image.

To use these techniques you'll need to use a graphics program, however, a limited selection of effects are available on line for free, with no download at www.gifworks.com
Other points to remember when using visuals are:

  • Avoid heavy black borders, though do use a lighter border if the edges of the picture are similar in colour to the background and so the edge of the picture isn't clearly defined.
  • Face everything into the page. Have people looking towards the middle of the screen. If it's a picture of a car for example, have it driving towards the middle of the screen, not driving away towards the monitor's edge.
  • Make the size proportional to the importance.
  • Try to place pictures squarely within the text column, as it avoids a text wrap which is harder to read, this is only a general rule, you can break it and stuff will still look OK.