Stuff & Nonsense product and website design

Designing Zombie Hunt part three: Designing a layout grid

Designing Zombie Hunt part three: Designing a layout grid.

This week I’m taking a deep dive into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about designing dark and light themes.. Today is all about the choices I make when designing a layout grid.

A generation of product and website designers have grown up with grids from Bootstrap, 960 Grid System before it, and Blueprint before that. In frameworks like these—and in plenty of work built on them—grids are used mostly to align content to the edges of columns.

When you use grids imaginatively, they do much more than align content. Grids bring cohesion to a composition. They help people understand the stories you’re telling by suggesting hierarchies. Grids inform people what to read first, then next, and how much attention to pay.

Now, I’m sure frameworks are fine. But I’ve always been underwhelmed whenever I’ve looked at the grids they suggest using. Twelve even columns, maybe sixteen at a pinch. That’s your lot.

Left: Think of each column as a beat. When you drum the cadence of 12 evenly-sized columns with your fingers, the rhythm is monotonous. Right: Countless identical designs have been designed using 12 or 16-column grids.

That websites with 12 or 16-column grids look so similar has become a cliche. It’s true that Bootstrap-style frameworks have led to countless identical designs, not because they contain 12 or 16 columns, but because their even ratios and symmetry have so strongly influenced our approach to layout on the web.

Left: I’m frequently underwhelmed by designs based on 12 evenly-sized columns.Right: A compound grid can change how we think about layout and help us to create more imaginative designs.

I’ve said over and over again that a well-chosen grid can do much, much more than align content. Our choice of grid can influence how we approach a design and can change how we think about layout.

Left: An alternative design based on a 4+5 compound grid. Right: Modular grids are fabulous for making diverse designs with plenty of energy.

There are many more exciting grid types available, and switching to a compound or modular grid often produces far more interesting results.

Compound grids

Compound grids offer exciting and often unconventional layout possibilities. They also encourage a different type of thinking about layouts. A compound grid is two or more grids of any kind—column, modular, symmetrical, and asymmetrical—on one page. They can occupy separate areas or overlap.

Left: A 4+5 compound grid. Right: Zombie Hunt wireframe layout based on a compound grid.

Tip: I wrote about compound grids in much more detail in my book Art Direction for the Web. Buy the e-book for £12.99.

More Zombie Hunt wireframe layouts based on a compound grid.

This interplay of two grids makes a compound layout more interesting than one grid used in isolation. My most used compound grid combines four and five columns, giving me endless possibilities for designs like Zombie Hunt.

When using a 4+5 compound, I might use columns from either. A 4-column grid simplifies twelve columns and should feel very familiar. The proportions of a 5-column grid might seem foreign as they’re less often seen online. By overlapping 4-column and 5-column grids, I form a compound grid comprising eight columns with four widths. This grid has a rhythmic pattern of 6|1|4|3|3|4|1|6, which is far more interesting than the 12-column rhythm.

A few layout possibilities from a 4+5 compound grid.

Compound grids offer exciting and often unconventional layout possibilities. If you’re familiar with the grid made ubiquitous by Bootstrap, a 3+4 compound grid is a great place to start learning about compound grids. Tip: To help you create and code compound grids, I made the Layout Love compound grid generator.

Compare the rhythmic pattern of a 12-column grid with a 3+4 compound grid design.

Modular grids

For even more options, a modular grid offers a huge variety of potential layout possibilities. Modular grids are excellent for bringing order to large amounts of varied content, and you can also use them to create visually appealing layouts when there’s very little content. They’re also fabulous for making diverse designs with plenty of drama and energy.

Left: A five column, three row modular grid.Right: Compared with a 3+4 compound grid.

Grid modules are individual units—most commonly rectangles or squares—that repeat horizontally and vertically. Modules can be any size: based on your content, the aspect ratios of images, and even advertising sizes.

How do I choose?

How do I choose the grid type which best suits the design I’m making? Some grids provide structure and order content; others feel more organic. My choice of grid will depend on these factors and more, but in general:

  • Single columns have a classical feel and are suitable for long passages of running text.
  • Twin columns and multi-columns are the most flexible and best for make sense of varied content.
  • Modular grids are fabulous for making diverse designs with plenty of drama and energy.

My choice of how many columns or modules to include will depend on several factors, including the amount and type of content, the feelings I want a layout to evoke, and the speed of the experience I want to create.

Layout Love

All these grids and more are available in my Layout Love grid sets which make prototyping and site development work simpler. You can use Layout Love’s HTML and CSS for any personal or commercial design project. All five compound, modular, and ratio sets are just £9.99, saving you many hours of work.

Written by Andy Clarke who tagged this with design

Would you like advice and inspiration on making better designs for the web?

Get monthly design inspiration and insights based on my 25+ years of experience. View some recent emails, sign up today, and get:

    I promise never to share your email address and you can unsubscribe with just one click.

    Free set of Layout Love grid templates when you sign up today.

    Hire me. I’m available for coaching and to work on design projects.