If you frequent #DesignTok, you've likely encountered the following statement: "Here are the best websites to get inspiration for your next website." Your journey between Behance and Dribble profiles, where you will draw inspiration from anything and everything, starts. Finally, you switch to Figma to breathe life into your new creation.
However, the journey is never as it seems, especially as a new designer. Hours later, you are left wondering why your work is wrong, but you cannot identify it. While the culprit could be anything, I am confident improper grid use wins. In this article, we shall explore the world of grids in UI design.
What is a grid?
A grid is a system of columns and rows that organises and aligns elements on a page. This organisation system is essential in designing both digital and physical products.
A grid is a system of columns and rows that organises and aligns elements on a page. This organisation system is essential for designing both digital and physical products. In his book Grid Systems, Josef Müller-Brockmann discusses the methods by which grids have been utilised since their inception.
Layout grid cheat sheet from Figma.
Although there are many other types of grids, this post will concentrate on column and nested grids. You can find more information about grids here.
Grids naturally define the dimensions of your type area. A type area is a location on a website or screen where text is displayed. With this knowledge, you should be able to place the visual components of your website to enhance coherence without detracting from the message's delivery. As a rule of thumb, the fewer the differences in size of the illustration, the better the impression your design makes. You must find a systematic approach to arranging text and illustrations on the working area. It is never a matter of guesswork. The image below shows how grids guide content placement on a screen to achieve a specific outcome. Look at the text fonts and the image sizes. None are too large, causing them to appear overwhelming, and neither are too small, making them difficult to decode.
An example of a grid in use
Advantages of a systemic approach
Text and illustrations are arranged in a compact manner creating a rhythm.
Provides consistency in the visual hierarchy for the design making it easy for users to scan and understand the content.
Improves the usability of the design by making it easier for users to find and use elements that they need.
How to construct the type area
As mentioned earlier, a type area is the area where the text content of a page or screen is placed. This area should be large enough to accommodate all of the text content on the page while being small enough to leave a reasonable amount of whitespace to create a sense of balance and legibility in the design.
This area is constructed by considering the format of the page and the size of the margins. The best approach to consider would be to ask yourself these questions
How many columns would be appropriate?
What type of information will I accommodate? Text only or mixed media?
What is the quantity of the media that will be used?
What is the appropriate size of the text and media used?
Tips to consider when designing a type area
Using whitespace
Whitespace around the type area creates a sense of balance and legibility in the design.
Use letter spacing that matches the font size.
This spacing should be large enough to give the text room to breathe but it should not be too large to affect readability. Remember to maintain harmony between the body and the display font pairings.
Use a line height that is appropriate for the font size.
A suitable line height carries the eye optically from one line to the next making the reading experience smooth and easy.
Use a grid.
This acts as a guide to creating consistent and visually appealing designs.
How to construct a grid
At this point, it is assumed you have a defined type area that you will be working on. It is time to set up the appropriate grid to work with.
Modern software has recommended guidelines on the best point grid systems to use. Years of trial and error have simplified some of the work that would be done in the design process. In the material guidelines by Google, an 8-point and 16-point system is recommended. Additionally, common design software such as Photoshop or Figma have inbuilt grid systems that help you easily set up and use grids.
There are two ways of constructing a grid.
Hard grid
This method involves creating a grid of 8-pixel-wide columns and rows and then placing the design elements within the grid. Once you have divided the screen into columns and rows, you can use horizontal and vertical guidelines to create the grid lines. The advantage of this method is that it gives you a more precise layout
Soft grid
This method requires you to use multiples of 8 pixels to define the dimensions, padding and margins of your design elements.
For example, if you are creating a button, you would make the button 48 pixels wide and 16 pixels high. This is because 48 and 16 are both multiples of 8. The advantage of this design is it is more flexible.
Here are tips for constructing a grid
Use a grid system generator to help you create the grid.
Align your design elements to the grid lines.
Use gutters to space out your design elements.
Test your design on various devices to ensure it looks good and functions well on all screen sizes.
Conclusion
There are several ways of using grids in your work. This article is meant to drive your interest in researching grids and how you can make them work for you. A shorter guide can be found here.
Every visual creative work is a manifestation of the character of the designer, a reflection of their knowledge, ability and mentality. - Josef Müller-Brockmann