Martin Crockett

Designing for 1024×768

I recently took the step of designing some new websites for a fixed-width 1024×768 screen resolution and was keen to update my Photoshop templates in order to maximise productivity and keep a familiar grid system in place. Being quite methodical, I find my approach especially convenient in order to adopt a fairly consistent UI across multiple websites. This is good practice for CSS design where the alterations to the layout often are quite subtle.

• I generally use an embedded layer with the grid layout on top of all layers and also set the Photoshop grid to 32 pixels so I have a clearly defined base to start my layouts.
• The advantage of the 32px base is that CSS dimension mathematics are kept relatively simple and there’s less chance of the odd pixel escaping. It also fits into the 960px maximum width as popularised by Cameron Moll.
• I group my various page sections in folders as they may be coded: header, footer, body, etc.
• I keep a colour reference folder somewhere near the top of the layer stack so I can use the eye dropper to capture the necessary colour.

Here are some links to relevant articles which I found useful:

Cameron Moll:
Gridding the 960

Mark Boulton:
Five Simple Steps to designing grid systems

Subtraction:
Grid Computing

A List Apart:
Setting Type on the Web to a Baseline Grid

(Sidenote: In a similar vein, 37Signals are keeping their UI consistent across all their web applications.)