Grid systems are aids designers use to build designs, arrange information and make consistent user experiences. They include rule of thirds, golden section, single-column, multi-column, modular, baseline and responsive grid systems. For example, responsive adapts content to screen size and orientation, for consistency.
“One must learn how to use the grid; it is an art that requires practice.”
― Josef Müller-Brockmann, Graphic designer, author, educator and International Typographic Style pioneer
See why grid systems are invaluable aids.
For centuries, grids have played a vital role in displaying information optimally. From publishing to graphic design and UI design, grids remain extremely useful for helping organize design elements best. Low-tech and inexpensive, they’re also essential to keeping users happy and securing their trust for designers’ brands.
In visual design, a grid system helps you align screen elements based on sequenced columns and rows. Like making a map, you apply the column-based structure of a grid system to guide your design, structuring your text, images and functions consistently throughout it so they can appear instantly recognizable elsewhere. A reassuringly varied selection of grid systems exists. The key is to pick the right one for the right project.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0
Pick from the most common grid systems, namely:
Rule of Thirds – This grid system splits content evenly into thirds, horizontally and vertically. You put your design elements at the intersection of those dividing lines or along one of the lines. Used effectively in (e.g.) cinema, it’s a tried-and-tested way to catch users’ eyes and access them in familiar visual terms.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0
The Golden Section – Or The Golden Ratio, it’s a long-established mathematical ratio used by artists and architects for over 2,000 years. Its formula is: Side A is to side B as side B is to sides A+B, which equates to a ratio of 1:1.618. Featuring frequently in nature, the golden section can please users’ eyes with organic and natural-looking design compositions.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0
Single-Column – The simplest grid, it comprises a single column of text surrounded by margins. It’s the default for new documents in page layout programs, and typically appears in books where single columns of text appear in spreads (facing pages).
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0
Multi-Column – These grids provide flexible formats for publications with a complex hierarchy or that integrate text and illustrations. The more columns you create, the more flexible your grid becomes. You can use the grid to articulate the hierarchy of the publication by creating zones for different kinds of content. A text or image can occupy a single column, or span several. Not all the space has to be filled.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0
Modular – This type has consistent horizontal divisions from top to bottom as well as vertical divisions from left to right. These modules govern the placement and cropping of pictures and text. You split the page into several columns according to the content. Then, you divide the page from top to bottom in several rows. This combination assures continuity throughout the design. You can enhance the clarity of your message by how you place text on the grid. The modular grid offers infinite ways of doing this, although it takes some learning to use it best.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0
Baseline – This grid system comprises horizontal guidelines that govern the entire document. Baseline grids help you anchor all (or nearly all) layout elements to a common rhythm. To make one, choose the type size and leading of your text: e.g., 10-pt Scala Pro with 12 pts leading (10/12). Avoid auto leading; you can work with whole numbers that multiply and divide cleanly, then. Use this line space increment to set the baseline grid in your document preferences.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0
Responsive – This grid system adapts to screen size and orientation, ensuring consistency across layouts. Responsive grids typically comprise three elements: columns (areas that the content occupies), gutters (gaps between columns) and margins (spaces that add padding between the page contents and the viewport edges). The configuration of columns, gutters and margins changes depending on the screen’s width. A breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to match the screen size and orientation. Each breakpoint range determines the number of columns, and recommended margins and gutters, for each screen size.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0
Take our Visual Design course.
Read designer Nick Babich’s insightful advice on grid systems in this Smashing Magazine piece.
Find some helpful insights into using grids and examples of them in this WebFX piece.
Grid systems in graphic design align screen elements based on columns and rows. Designers use these to organize content on a page neatly. They create a consistent and harmonious user experience. These systems include various types like single-column, multi-column, and modular grids. Each type serves a different purpose.
For example, single-column grids are great for simple layouts, while multi-column ones handle complex designs. They help in aligning elements like text, images, and graphics. This makes the design more user-friendly and aesthetically pleasing.
You'll find grid systems helpful if you want to create professional and effective graphic designs.
The "Rule of Thirds" is an example of a grid system in graphic design and photography. This grid divides a layout into nine equal parts: two horizontal and two vertical lines. Designers and photographers place the most important elements at the intersections or along these lines. This positioning creates balance and interest in the composition.
© Interaction Design Foundation, CC BY-SA 3.0
The Rule of Thirds guides the viewer’s eye to key parts of the design or photo and makes it more engaging. It's a simple yet effective way to organize content. Designers use this method for its visual appeal and ease of application.
In layout design, a grid system provides a framework of intersecting vertical and horizontal lines. Designers use this framework to place and align text, images, and other elements. This system ensures proper alignment and a structured layout. It makes designs easy to navigate and visually appealing.
Grid systems vary in complexity. They range from simple single-column layouts to complex multi-column arrangements. Grids create a balanced and professional design appearance. They guide the placement of elements to create harmony and order in the overall design. This makes grid systems crucial in layout design.
Watch Michal Malewicz discuss the "red square method" to understand more about layout design principles. This concept emphasizes consistency in spacing between elements.
Grids streamline the design process and improve the appearance and functionality of the final product. They play a vital role in layout design for several reasons:
Create balance: Grids allow designers to achieve a balanced look. They guide the placement of elements on vertical and horizontal lines. It creates an equilibrium without over-relying on symmetry.
Ensure cohesiveness: Grids help you coherently arrange various elements in a design for clear communication.
Enhance visual appeal: Grids offer a structured layout that helps guide viewers through the information hierarchy. This structure makes the design visually attractive and user-friendly. Consistent visual frameworks, like the ones described in UX design tutorials, reinforce this point. They emphasize the importance of visual hierarchy in creating a cohesive and engaging layout.
Grids focus the viewer's attention and improve the user interface in design projects.
Designers use several types of grid systems in design. These include:
Single-Column Grid: It features one column of text, often used in books and simple layouts.
Multi-Column Grid: This grid includes multiple columns. You'll find it ideal for complex layouts in magazines and websites.
Modular Grid: It combines rows and columns to allow detailed control over text placement and images.
Baseline Grid: This grid aligns text across a page for consistent vertical spacing.
Rule of Thirds: Often used in photography, this grid divides the space into thirds, both horizontally and vertically, for balanced compositions.
Golden Section: This grid uses a mathematical ratio of 1:1.618 to create naturally appealing designs.
Responsive Grid: It adjusts the layout for different screen sizes and orientations.
These systems help designers organize content and create visually pleasing layouts.
A grid acts as a structure in design, consisting of intersecting vertical and horizontal lines. Designers use grids to organize text, images, and other elements. This structure ensures alignment and consistent placement across various parts of a layout.
Grids are essential in graphic design, web design, and other design fields. They help designers create balanced, organized, and visually appealing compositions. By employing a grid, designers simplify the design process and achieve a harmonious appearance in the final output.
For learning about grid systems in design, consider these two resources:
The article How To Use Grid Systems thoroughly examines different grid types. It includes advice from Massimo Vignelli, an Italian designer. You'll find this article helpful if you want to organize your work better.
Visual Design Course covers visual elements, color theory, and typography. It focuses on grid systems, and experts teach the course. They mix theory with practical tasks. You can take this course to improve your design skills and build a portfolio.
These resources offer a practical understanding and application of grid systems in the design work. You can apply this knowledge directly applied to your projects.
Here’s the entire UX literature on Grid Systems by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
