Citizensheep » Redesign grid

11 August, 2008

This post is in: Design, Web design & development

Redesign grid

I get very confused by other people’s explanations of how to set online type to a baseline grid, so I tried from scratch.

This post just shows the grid, I’ll get onto typography later.

I set up this grid, which divides into 2, 3, 4 and 6 columns and horizontal modules (based on the classic design by Karl Gerstner (hence refreshing myself with Ellen Lupton yesterday, in case you were following me on Twitter!):

then transferred my sketches to it:

and transferred those to digital:

and without the grid:

and voila (it’s changed a bit since though): see the html draft front page here.

Each block of text aligns to the grid at some point (If the blocks were long enough you’d be able to see where the lines line up). But more on this later. For now, you can see the draft front page here.

From grid to finished design: