Visual Design Foundations: Grids
Establish a concrete structural basis for your design to compose design elements on top of it.
If you have ever seen the skeleton of the human body, you could see that the whole structure of our body is the bones, they are not visible but you know that they are support all the human weight, organs, skin, etc, all to ensure all the important parts of the body work in an appropriate manner. If some part of that structure fails it can affect the performance of your body. Well, design is not very far from that concept.
In design, we also have some structure that supports all the components of our design in the way that the design works effectively. We call those structure grids which are basically lines that create the base structure for any kind of design. With these lines, the designer could arrange graphic components such as text, pictures, icons, graphics, components, etc. In addition, grids work as a guide to keep consistency across multiple designs of the same kind.
While designing visuals it is important to have the certainty that everything is well placed, this ensures that all the components work together and have harmony between them. Grids create the base guide where we can build the design elements following alignments and consistency parameters.
As we already know that grids are just a group of lines, they are arranged horizontally and vertically as required, these lines have intersections that divide the page into spaces where we can place design elements aligning them with other elements or the artboard. In visual design, we mostly use just vertical lines that divide the page horizontally in equal proportions for the visual components and modules.
In order to have consistency in spaces, visual design takes the grids to another level transforming these lines into columns, splitting the screen into vertical divisions that are separated by spaces called gutters, columns are the guides to align our visual components and gutters ensure consistent spacing between them, this allows us to arrange the design and display the information structurally. We can use as many columns as are required to display any component, the more columns you use makes the grid more flexible.
Free & Discounted Udemy Courses — Explore Now
There are standards that most of the designers and developers have been using currently due to their effectiveness. Using a random grid system could be troubling when we hand off our visuals to developers. So it’s a good practice to sync with developers at the time to choose any grid system.
1. Standard Grid Systems
As far as standard systems are concerned there are 3 systems that you can use which are development-friendly.
a. 16 Columns: As there are 16 columns, there can be a lot of layout variations when using the grid, but unfortunately as a limitation, it can not be divisible into 3 equal parts, which makes it less flexible than the other systems.
b. 12 Columns: It’s the most popular grid system due to its flexibility, it is possible to be divided into 1, 2, 3, 4, 6, and 12. Also, developers use the same system while programming most of the digital products, so design with the same system is ideal for the communication between design and development.
c. 24 Columns: It has more possibility of having layout variations but at the end works the same as the 12 columns system.
2. Baseline Grid
As designers we are always working with multiple elements, it is important to have a good balance and rhythm in the structure so that users can consume the information easily. A good tool is to have a baseline grid, that is a sequence of horizontal lines that define the places where the components will be allocated vertically.
Same as typography we have to consider the proper and consistent spacing between lines to ensure the easy digestion of the content from the user.
3. Gutters
As we already told gutter is the space between columns, they work as margins between components or blocks of components. Gutters are fixed values that can fluctuate in each breakpoint in responsive design, that are the key resolutions where your design will be displayed. Each of these resolutions could have a different gutter size, in general, the gutter width is smaller than the column width, due to the columns being the spaces for the component placement. As a good practice, the placement of the elements should start and finish in the edges of a column, gutters must be used as a separation between elements.
4. Breakpoints
Different devices require different resolutions, and different resolutions require different grid systems to ensure that the space and size balance of the components looks and stays in harmony on any platform or device. Breakpoints are the standard screen size parameters for which the arrangement of the grid and the elements should be altered to keep the harmony of the experience intact in different screen sizes. The consideration of how many breakpoints we need to design for a product totally depends on the fact how many devices will actually run the product. However, the following are the most common breakpoints:
5. Grid System
It is one of the foundation elements that provide structure and a set of measurements and alignment rules, for elements to be displayed on the screen. To appropriately set up the grid system we have to set some parameters that will define the size of columns and gutters. When you are creating one you have to consider:
- Number of Columns(NC) and Gutters(NG):
No. of gutter = No. of Columns -1
(Ex: 12 columns, 11 gutters) - Screen Resolutions (SR) and breakpoints: Identify the key resolutions where your design will be displayed, these will be your breakpoints.
- Gutter Size(G): As a good practice use multiple of 4 to define this size, which allows you to have more flexibility and work better with the standard resolutions, the most common widths are 12px, 20px, and 24px.
- Safe Area(SA): Define the width of the safe area of your design that is the left and right margin space of your artboard, that define the starting and ending point of your columns, mostly this size match with the gutter size or is a multiple of 4 as well.
- Column Size(CS): Apply the formula below with the sizes that you already have, to define the Column width.
There are some examples that how the formula work:
12 Column Grid + Screen Resolution 1440px
12 Column Grid + Screen Resolution 768px
The 8 Point Grid
As good practice it is good, to have your component sizes, margins, and paddings based on multiples of 8. Design in this way is development and multiplatform friendly due to most of the screens in the market being divisible by 8 on the X-axis, this allows the design to be more flexible in terms of information architecture and be adaptable in multiple devices.
Fluid Grid
Nowadays most of the products are multi-platform, which means that the design would be displayed in multiple resolutions, which is why we set breakpoints that will fluctuate our gutter values. but no breakpoint is involved within a certain screen size range, in these situations, the gutter should be consistent and the column size should be dynamic. The Fluid Grids are coded in such a way that they adapt when the screen size or resolution increases or decreases.
Tips / Best Practices
- Consider the most common display resolutions so that it is developer-friendly.
- Set breakpoints based on your device resolutions.
- Use multiples of 8, so that it would be scalable to a wide range of display resolutions.
- Document all the decisions and behavior of your grid.
- Gutters should be used for spacing and margins between elements and columns to define starting and ending points for actual components.
- Columns should be wider than gutters as they encompass content in form of visual elements
- Test by tweaking columns and gutter spaces multiple times to ensure the specifications chosen work best for that particular resolution.
Checklist
- Define all the break-points
- Define safe area, margin, column & gutter for each resolution
- Document use cases and behavior of the grids
Related Topics
Quick Question
When we are arranging elements vertically it’s a good practice to use:
- 12 column grid
- Baseline grid
- Fluid Grid
- 16 Column Grid
Leave your answer in the comments section below!
Free & Discounted Udemy Courses — Explore Now
