6th January 2008

Web site design and print design seem similar in many ways, which has lead to designers with a print background being asked to develop screen designs for the web.

There are subtle differences in designing an interactive experience and for example a brochure, as a well designed web site has to hold together as an overall experience, whereas a brochure is usually designed as a linear experience composed of individual spreads.

Putting more in-depth considerations such as information architecture aside, here are some of the main practical differences between web site design and print based design that need consideration.

Screen resolution

When designing for print you will be used to working within a fixed size, when designing a web site your pages could be viewed at a number of screen resolutions.

Differing screen resolutions will make your design, text size and visible area inconsistent from one machine to another, popular screen resolutions are generally between 800x600 pixels and 1600x1200 pixels.

Users with Apple Macs tend to have a higher screen resolution as well as different gamma settings, so if you are designing on an Apple Mac be sure to test your design on standard specification PC and monitor, I'd still recommend a minimum of 800x800 pixels for a design to be practically accessible.

One size fits all

Consideration also needs to be given to how the site 'scales' when the browser window is resized, sites are commonly ranged left, centred or 'fluid' in which the design itself scales proportionally to the browser window.

Colour on the web

As a designer used to working an Apple Mac, it is important to understand that you are in a minority, and that the vast majority of visitors to the finished site will use a PC which will display colours darker and 'flatter' than a Mac.

So check your colours and where necessary brighten them up for the PC's darker display.

Fonts for the web.

When designing for the web your choice of font is severely limited, ultimately your choice is serif, sans-serif, cursive, fantasy or monospace.

Fonts must default to a font family installed on the visitors computer, you can of course specify a specific font but it will only display if it is already installed.

The safest and most common approach is to specify a commonly installed font such as Verdana, Arial, Times or Georgia.

For headlines and titles it is quite common to use an image of the title rendered in the desired font as this gets around a visitors font deficiencies. If you do decide to take this route it is important to ensure that alt attributes are used to communicate the titles text for screen reading browsers.