“Grids are the most misunderstood and misused element in page layout. A grid is only useful if it is derived from the material it is intended to handle.”
– Derek Birdsall Notes on book Design
GRIDS AND HOW TO USE THEM!
Establishing a solid grid structure forms the backbone of web media, page, email, everything. What was once a ‘faux pas’ in the design elite has become a staple across both digital and physical, in the wise words of Picasso, “Learn the rules like a pro, so you can break them…”
Here we will go over some of the basics that go into understanding and building a grid structure that works for you. This is only the tip of the iceberg of this topic however, but we hope that it sparks some ideas.
Core Components
Let’s break them down into their core components first:
- Columns – Vertical containers of images, media, type.
- Modules – Areas separated by consistent space inducing repetition and order.
- Margins – Space around the content which serve as buffer zones. You can possibly write captions or notes in this section.
- Spatial Zones – Groups of modules or columns that form together to create a new space of themselves for images or text. (think two column grid structure where the top half is two rows of text and the bottom half is one image spread)
- Flow lines – Horizontal lines that break space between elements.
- Markers – Things like page number. Indications that help the reader navigate through the document.
Dissect the material
Establish where how your content will be viewed, page, phone, computer. What content will be used, a main body of text? Or text with images or graphs. Make sure to bring the right tool for the job.
Then when you have all the information about the project start to think about and visualize how you will put it together. Draw sketches, scribble something down. Visualize the outcome and assess its integrity.
Example:
- I have 4 images and loads of text and It needs to fit on two pages. In this situation consider a two-column grid. This means that you can position your images and text with considerably more flexibility than a single-column grid, speaking of which.
- You have been given an essay to print. It may seem obvious, but single column grid would be perfect for this. One continual body of text is easier than numerous columns that are simply text.
These are only two very specific examples, there are plenty of other variations but represent adequately the assessment of content when considering design choices.
Make it easy for the reader
Think about the structure of the information you have been given. If you need to get a lot of content into a small space, Multicolumn Grid offers a lot of flexibility. Using Typography to help lead the reader’s eye is also important and is a mastery of itself. However, use typeface size and weight to establish a hierarchy for the content. Pull quotes, highlight important text in italics or bolder font-weight to convey importance.
It is very easy to get bogged down with detail and content, but creating variations of the above creates intrigue and flow that helps break apart large lumps of type.
More on Hierarchy
Establishing order to your content, and in this case, specifically images, is really important too. Sometimes images may have to be larger for the sake of legibility, but other times you can use the size of an image to convey importance.
SPACE
Space is important. It conveys importance. It invites the reader to pause and consider. Grids exist to help make use of the space available to you, but almost as important, how to avoid filling all of it.
Pacing
Grids can be used to, as mentioned above, make the most of the space given to you. It can also be used to establish repetition and movement from one page to the next. Egging the reader onto the next page. Using everything we have discussed helps set this pacing and also conveys story. Small repeating images in a multicolumn grid can convey a quickfire effect, sporadic with long type columns creating a counterweight to that.
Large page spread images to kick-start a Two Column grid which uses margins to lead the reader to the next page. Type columns that complement the vertical form of the image and lean into the next. Using colour to indicate the start of something and then repeating the colour at the end of the page allows the reader to see without reading the beginning, middle, and end of a structure.
In Conclusion
Spare a couple of moments to think about the content you are working with, how it will be viewed (device or medium) and how to get it all in one place. Establish a hierarchy of information, rules and boundaries within the design and how you will break them to supply emphasis and drama.
These are probably some things you have already done, in many of your works. I know I for one have done them unconsciously. However, there is an art form in the maths behind grids. Developing that skill means analysing the particularities of good grid structure and bad grid structure.
We can help make compelling content for you! We are always looking to improve and to help supply knowledge to others to help them improve too. To find out more about what we can do for you check out EM@