Stay within the lines

Some years ago a suit (account director) with a taste for design that I worked with was keen on coming from the dark side (account direction) to the light side (design), asked me how to create great design to which I gave him a simple answer…

… line things up!

Simple really isn’t it. Okay it takes a bit more than just that, but the basic premise for creating design that is both pleasing to the eye and communicates clearly is to use a grid.

From the earliest of times, designers be they Roman stonemasons carving inscriptions into monuments or Celtic monks in the seventh century creating beautiful illuminated manuscripts have used a grid to line elements up.

The lining up of elements on the page according to a grid allows for clear dissemination of information and hierarchy to information in any form of publication from websites to printed books and magazines.

Grids are made up of various amounts of vertical spaces (columns) and horizontal spaces (rows), with 1 column being the simplest.

Grids allow large amounts of text to be placed into columns or rows that flow clearly from one to another in easily digestible amounts (a page using 3 columns will hold more copy than a single column layout), it allows consistent areas for headings; subheadings; intro paragraphs; page numbering, pull quotes; footnotes and graphics etc. You know where to look quickly each time for particular information.

Now of course it would be a pretty ‘straight world’ (excuse the pun) if we continually placed each element into its little box in a row! Sometimes we need to create organic looking compositions or create a sense of randomness. Still though effective design always needs to communicate clearly and accomplished designers know how to achieve this. The solution here is to still use a grid but to break free in certain places.

As the saying goes “You need to know the rules before you can break
the rules!”

To give an easy example of the use of grids, take a look at this web page you are reading, it is made up of 3 rows and 3 columns.

Rows: the top row is grey with the logo, the second row is orange with the ‘blog articles’ graphic and the third row sits below with the blog content.

Columns: the lefthand column holds the logo running vertically, the middle is the text you are reading and the righthand is orange.

See… easy and effective.