UX/ UI tips: A guide to the grid

Sarah Edwards

User Experience Consultant

16 November 2022

Grids provide structure to UI/ UX design, helping users make sense of layouts. Grids are used throughout design but they are especially important in UX and UI. They provide guidance and layout support for page design as they respond to different screen sizes

They also provide a structure for layouts, allowing designers to keep page layouts consistent and support collaboration between designers and developers.

 

1. The anatomy of a grid

Grids are made up of three elements: columns, gutters and margins.

Columns: content is placed within the columns in a grid. In responsive layouts, the columns will be represented by percentages allowing the layout to adapt to the screen size the user is viewing from.

Gutters: a gutter or padding is the space between the columns. They use fixed widths but these can change as the breakpoints of the page change. A breakpoint is the point at which a website will adjust the way its content is displayed to optimise the user’s experience.

Margins: these are the spaces to the left and right off the screen. These margins can adapt depending on the screen size: on a larger screen size you would look to use a larger margin to give the design more space to breathe.

 

UI-tips-grids-the-anatomy-of-a-grid

2. Common types of grid

Modular grid: these grids are a combination of rows and columns. YouTube is a good example of a modular layout.

Column Grid: these grids are based on vertical blocks that depict the width of the content on a website. Columns normally change in number as a page reacts to different breakpoints.

Hierarchical grid: in this example the content is organised in blocks that allow you to prioritise design elements by order of importance.

 

UI-tips-grids-common-types-of-grid

3. Placing content

Gutters are used to create space between each block of content. Do not place content in the gutters, as content should align to the edges of the columns they cover.

Your main content areas should be aligned like this but you should not align every single element as this may compromise your design.

 

UI-tips-grids-placing-content

4. Common screen sizes

The most common screen resolutions in pixels are as follows:

  • Large (desktop): 1440×1024
  • Medium (tablet): 768×1024
  • Small (mobile): 320×640

 

Consider this when setting up your grids and optimise how your users are using these screen sizes. Be aware that screen resolutions should be considered quite fluid as the device is not necessarily linked to the size.

 

UI-tips-grids-common-screen-sizes

5. Adapting the grid

A breakpoint is the point at which a website’s content and design will adapt in a certain way to provide the best possible user experience. Breakpoints should be optimised to support things like navigation and content consumption on mobile devices.

 

UI-tips-grids-adapting-the-grid

6. Breaking the grid

It can be OK to break the grid in some instances, for example if you want to make an element of the design stand out. 

 

UI-tips-grids-breaking-the-grid

Conclusion

The benefits of a grid support designers, developers and users. The grid structure should be one of the first things to consider when creating a UI design.

 

Have a call

We’d love to talk to you about how Make it Clear can support your organisation. Book a call here.