How to use grids in UI design
Making good use of grids can make all the difference between good and great UI design. That being said, using grids can be hard. Here’s everything you need to know on how to use layout grids in UI and visual design.
- Updated on August 14, 2022
UI Grids are not new. Did you know that every book, magazine, or brochure you read features some form of a grid? That’s even when the pages you read are just one big block of text. There’s more to grids than you might think.
Table of Contents
What are UI grids?
Grids are a group of vertical and horizontal lines that help provide structure to your design. In most cases, these gridlines are invisible in the final design but visible using your default design tool.
There are a number of terms designers use when they talk about grids. We’ve made a list of the most common ones including gutter, columns, and spacing.
Columns and gutters
Columns are the most basic component of any layout grid. Columns are where you align your content and designs.
Every layout grid consists of at least one column. In most cases, layouts have between one and twelve columns, with twelve columns being a very popular Bootstrap solution. More on Bootstrap later.
For every two columns, there is a gutter. This is the space between columns. The gutter can also be referred to as column spacing or alley.
Offset
In most digital layouts, the page you design is placed in the center of your screen. To facilitate this, you have to know what the center of your screen is as a part of your layout settings. Sketch requires you to do so, for example.
The offset is calculated as follows. You subtract the layout width from the total screen width and divide what remains by two.
The benefits of using grids in UI design
It can be difficult to sell layouts and grids since it is not something that directly adds value to your stakeholders and clients’ project. However, there’s great indirect value to having a layout grid in place. Here’s what you can say to convince your stakeholders.
Improved design process
Imagine if you were building a new Lego set. You have the construction manual and a complete bag of all required pieces. It is fun and easy to build.
Now imagine that every lego piece is smooth all over. No protrusion to connect the pieces. Building a Lego set that way is frustrating, error-prone, and time-consuming. That’s what designing without grids feels like.
By using grids and a layout in your UI design you will improve the design process tremendously. This in turn will lower design costs since it will require less time to create your designs.
Design system basics
Let’s take another look at the Lego set comparison from before. It is the ultimate example of what a design system does.
Think of it like this. If you do not have the construction manual and set of lego pieces to choose from you cannot build your lego set. Using a grid and a layout is an essential part of the UI design system.
It makes your company future proof and design system ready. Design systems bring their own set of advantages and added value, but that’s for another post.
Easier for developers
This is an easy one. If you keep using the same set of building blocks, you will make the life of your development team so much easier.
They only have to define the building blocks, gutters, margins, and offset once. This increases the ease of collaboration which brings down costs. Every stakeholder likes costs that can be lowered.
Further reading
There you have it. Layouts and UI design grids have two big advantages. They bring down costs and increase productivity. This makes grids an essential part of any design project.
We wrote additional posts about our design system you can use to help you become an even better designer.
About the author
Hi! I'm Nick Groeneveld, a senior designer from the Netherlands with experience in UX, visual design, and research. I'm a UX coach that supports other designers and have completed design projects in finance, tech, and the public sector.
☎️ Book a 1:1 mentor meeting or let's connect on LinkedIn and Twitter.
