Grids and page construction

When renowned modernist designer, Massimo Vignelli was an apprentice, he was taught that a designer should be able to design everything from a spoon to a city.

Now, I'm rarely designing spoons, but since I bounce between different mediums and dimensions a lot, one way to gain control over most surfaces is by using grids. They provide the underlying structure for content and the beams to support typography and other graphical matter. I tend to use a rather fluid system that's dependant on the needs of each project, but thought I'd give insight into how I divide a page when crafting commissioned work.

For this example, I thought I'd show you what's under the hood for a poster I completed recently for a London based techno label, Church.

Church was celebrating its third anniversary, so I thought it fitting to start dividing the space with the concept of threes. The A4 sized poster has three layers of grids to help control the placement of my elements. There is a proportional geometric grid that sits on the top, a three column grid to control the paragraphs, and an underlying baseline grid to hinge my typography onto.

To set up my geometric grid, I extended the dimensions of the A4 poster to either side of my artboard, and connected the corners so that I get clearly defined diagonals that are proportional to the page I'm working on. On an earlier version of the poster I was working with photos of the invited DJs, and used these lines to "connect" their faces, and also for the placement of the three squares, which I was treating as focal points. The images relate to the underlying circle and diagonals of the page, and force the eye to bounce between them in a counter-clockwise fashion.

For the vertical division of space on my page, I broke up the poster into three columns (threes again!). I used these to align the text, set flush left, and used the visual elements to reinforce their placement.

Finally, it came time to break up my page horizontally, and for that, I created a baseline grid. Since the Church logo is a square, I wanted to make sure the underlying grid would divide the page into a plethora of perfect little squares.

The overall height of my poster was 840pt tall, so to create my grid in Illustrator, I went to the "Guides and Grids" panel in the preference menu, and set my gridline to a number that would divide 840 into an even whole. In this case, I went with 80pts, and further subdivided it by 4. I didn't choose these numbers arbitrarily, as the baseline grid corresponds to the leading of type, and in the case of this poster, the smallest size I had to accommodate for sat comfortably at 20pts of line height.

Looking at the example below, when I set my copy for the venue in Apercu Mono with 20pts of leading, each line falls perfectly onto my underlying grid. I set all my other type matter onto the baseline grid, such as the Church logo, and the lineup of DJs. In this way, the horizontal rhythm of the text is directly proportional to the size of the page, and the measured white space between the lines creates a sense of harmony between all the elements.

Here is the final poster without all the guidelines mucking up the view. The scaffolding is invisible, but all the photos and type exist in relation to each other and help to create a concise hierarchy in how the information is read.

   

It isn't necessary to go to these lengths all the time, as it's best to assess the needs of a particular design on a project to project basis. Back when I was doing digital design moreso, oftentimes, a client would come back with feedback to nudge some text 2-3 pixels up, or move a column a little to the left. When you show that your decisions are being informed by an underlying grid and the text is sitting on a logical baseline, it puts a stop to the pixel pushing, and the squinty guesswork that I used to engage in.

You can apply variations of the grid to huge scale banners, or to tiny spaces such as when designing logos. There's freedom in restrictions, as it takes the guesswork of where to align your text, and there are limitless permutations of where you can arrange your work. Everything can be clean and orderly, or when necessary you can create powerful contrasts by breaking the grid to pieces!  

Happy griding!