Home - UI Design - How to use grids in UI design

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.
Layouts and Grids in UI Design

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 like Sketch or Figma.

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 the tools you can use to help you become an even better designer. Check them out on our blog.

Nick Groeneveld

About the author

Nick Groeneveld is a designer from the Netherlands with over 5 years of UX, visual design, and consultancy experience. He has worked in many different industries, including retail, finance, and sports.

Take a look at Nick’s LinkedIn and Medium for more.

Was this post helpful to you? Share it with others!

Facebook
Twitter
LinkedIn