Articles
Grids in Design: 6 Grid Design Layouts
Graphic designers rely on grids to organize a website page layout, improve the user experience (UX) design of apps, and make the design process more efficient. Learn about different kinds of grids in design.
What Is a Grid?
In graphic design, a grid system is a series of overlapping and evenly spaced lines that help designers place images and typography on a page in a hierarchical order. Grid lines do not appear in the final designed product, ad, or print piece. Instead, designers use grids in the layout design process to correctly line up content to improve readability and user experience.
Grids became more commonplace in design in the early twentieth century, following the boxy qualities of the De Stijl and Bauhaus art movements. Swiss graphic designer Josef Müller-Brockmann and German designer Jan Tschichold were influential in developing grid styles for design
Â
How to Use Grids in Design
Grid lines provide the basis for design, and their spacing invites infinite opportunities to create something singular, neat, and true to your final product’s aesthetic preferences. Follow these steps:
- Decide on the style. As a starting point, designers should ask what they want to create—a magazine, website, or poster design, for example—and then use a grid system that works best for that style.
- Customize a grid layout. Designers can space grid lines in inches, pixels, or another unit of measurement and customize the number of columns and rows for each piece of content to streamline workflow.
- Use a grid template. Using page and layout design software, designers can use templates or establish their own grids. If you often work on the same print issue of a literary magazine, for example, you should create a template with the same grids in place, so you have a document to use over and over with the same layout rules intact.
Why Are Grid Systems Important?
Using a grid in layout design gives the viewer clearer focus and improves user interface (UI) design.
- Grids can create balance. Using a grid in layout design is one of the easiest ways to create balance in your image. Placing elements on the vertical and horizontal lines that divide your page into thirds gives your layout design a sense of balance without making everything symmetrical, which can become tiresome.
- Grids help make an image cohesive. A grid can help a designer arrange the many disparate elements of an image in an easily digestible and cohesive way.
- Grids produce an appealing image. A grid gives you a layout template to make an image that visually appeals to the viewer and guides them through the proper visual hierarchy of information.
6 Types of Grids in Design
Each below grid has unique properties that make it suitable for different interfaces and print or web designs:
- Baseline grid: Ruled paper is one example of a baseline grid. Blocks of text are one of the more critical design elements in a baseline grid, which features evenly spaced horizontal lines so that you can perfectly space the leading of text up and down the numerous grid lines.
- Column grid: These grids space content into vertical chunks of equal column widths, as with a newspaper with various columns of text side by side.
- Hierarchical grid: Irregular in design, hierarchical grids facilitate multiple content needs. Designers might employ numerous grids to focus more clearly on one piece of content, such as placing a text box or image over another.
- Manuscript grid: Designers use manuscript grids for books with one rectangular block of text on each page, plus white space surrounding it to create clear gutters and borders. Manuscript grids might also contain a narrow box for headings, such as the chapter’s name, book, or author.
- Modular grid: Modular grids create multiple boxes of equal proportions for text and images. The intersection of vertical and horizontal grid lines creates individual modules to host content. You can use a grid of nine equally sized rectangles to establish the focal point of a portrait-style layout.
- Pixel grid: Pixel grid systems in graphic design are more granular: Numerous horizontal and vertical lines intersect to create tiny squares that allow graphic artists to move a piece of content on a finer level.
