Grid-based design has long been a staple of print design, but web layout tends to be more haphazard, largely driven by gut instinct and restrictions imposed by specifically defined pieces of content such as adverts.

With technology evolving rapidly, screens are larger and web technologies more powerful, which means designers can now successfully bring much of their grid-based knowledge to the internet, resulting in more balanced, versatile, and pleasing online layouts.

In this tutorial, we’ll show you how to create a grid-based layout for a website. As most Digital Arts readers are comfortable using Photoshop, we’ll be working in that program.

Since the process of creating a website depends largely on the content and format dictated by your client, this is less step-by-step than many of our tutorials – instead, it’s a point-by-point introduction to adapting the principles of grid-based designs for online projects.

Still, by the time you’ve finished the task, you should have created a grid-based project. On the CD is a blank grid for you to use, the Photoshop document from step 10, and a completed web version of the design.


Click here to win a BlackBerry Curve 8520 with Digital Arts' BlackBerry Advisor. Plus: hands on with a virtual BlackBerry Storm2.



Step 1
Web units are pixel-based, so forget about points and millimetres. In Photoshop, go to Photoshop > Preferences > Guides, Grid & Slices, and set a gridline to appear every 20 pixels, with two subdivisions. Goto Window > Info, open the Options menu and set the ruler units to Pixels. Also set one of the colour readouts to Web Color.


Step 2
Create a new document, 1,100 pixels wide and at screen resolution. Initially, make the grid visible (View > Show > Grid), drag a marquee 940 pixels wide, and drag the guides to the vertical edges. This area is the site container or ‘wrapper’.