Quick start guide: Hierarchical grids

What’s a hierarchical grid?

People talk about horizontal and vertical grids a lot. But I’d argue hierarchical grids are the most common type of grid used in interface design.

To create a hierarchical grid you split the available space for an interface into sections. Then you might split those sections again into sub-sections.

Here’s the Figma interface with the hierarchical grid lines laid over it. Large dotted lines are the initial sections. Small dotted lines are the sub-sections.

The major sections are the toolbar at the top, the layer list on the left, and the properties panel on the right.

You can see that each of the sections has then been split into two or more sub-sections:

Why use a hierarchical grid?

A modular grid is a similar concept to a hierarchical grid. The available area is split into blocks. Content is then placed inside one or more blocks:

But modular grids are strict: you set up the columns and rows at the start, because that’s what decides how the number and size of modules. This works well for printed material, where you need to work with a specific page size that won’t change.

A hierarchical grid is easier to understand: take the space, and divide it then sub-divide it how you want.

This works well for software interfaces, where the window or device size can easily change. It works well with the process where you decide how the interface responds to different window sizes.

For example, maybe in Figma you want the canvas to shrink as the window does, but you want the layer list and property panel to stay the same size. A hierarchical grid suits this type of thinking better.

In terms of interaction design, a hierarchical grid also encourages you to put related things close together: “This section will be for everything related to layers. Oh, I forgot I needed these extra layer controls. I should split the layers section into two sub-sections, then.”

How do you use a hierarchical grid?

  1. Get a good-enough sense of the space available for the interface.
  2. Split that space into a few sections based on what those sections will contain.
  3. Split sections into sub-sections if you realise that you need to add things that are related, but not so related that they should be in the same area.
  4. Set rules for the interface to follow as the available space changes: which areas should shrink first? Which areas should never shrink? Which areas can disappear completely?