Grids in Graphic and Web Design

Alexander
Alexander
Nov 20, 2017 · 8 min read
Grid in graphic and web design

Nothing could be more useful to reach our intention than the Grid. The grid represents the basic structure of our graphic design, it helps to organize the content, it provides consistency, it gives an orderly look and it projects a level of
intellectual elegance that we like to express.

Massimo Vignelli. The Vignelli Canon

Page is a finite space. An empty page is dull and boring, but it’s full of potential. Place custom guides into the page and you will create a grid. A grid is a tool to provide rhythm, order and consistency to your design. It never dictates the design or its outcome. A grid always works with, rather than against, the primary goal of the designer.

With horizontal and vertical lines crossing the page you can create infinite numbers of grids, but only one would be appropriate for the design project at hand.

In today’s article we are going to discuss the anatomy of the four main types of grids and their potential to enhance your design.

A grid system is an aid, not a guarantee.

Josef Müller-Brockmann

Basics

Grids vary in size and shape from simple to complex, depending on the range and amount of information you are going to place on a page. No matter how sophisticated or plain your grid is, it’s always constructed of the same elements.

Anatomy of grid. Source: https://vitorials.net/
  • Columns are vertical divisions of space, separated from each other by gutters. They are the main force, that help the designer to place visual elements across the page.
  • Margins are the negative space between the page’s edges and the active area of the content. Their main goal is to direct the viewer toward the visual elements. Margin space may also be used for the placement of subordinate elements such as footnotes, folios, etc. The size of the margin depends on type, format and quality of visual information.
  • Flowlines are horizontal axes that brake the space into horizontal divisions (rows). They provide an additional point of alignment and help to arrange elements across and down the page.
  • Gutters (column intervals) are inactive divisions of negative space that separate one column from the other.
  • Modules are active spatial fields, created by intersections of columns and flowlines. They help you to arrange visual elements and textual data and establish consistency and order. Assigning information to the specific modules helps you to create a pattern for the viewer, that is easy to comprehend. But avoid to be to too predictable and monotonous and to repeat the same pattern over and over again. It abates the natural rhythmic of your design and diminishes user interest.

Manuscript grid

Medium article is a good example of manuscript grid.

The active area in a manuscript grid is defined by margins. The length of the margins influence the perception of the text. Generous margins help to focus on the content and provide a natural reading experience. Small margins create tension and may distract user attention.

Generous margins help you to create a natural text’s flow

Classic manuscript grids have wide margins at the bottom and the sides of the page and smaller at the top. Inner margins are typically half the size of the outer.

Classic symmetrical manuscript grid

To create a manuscript grid in Gravit Designer, select your canvas and navigate to Pages area in the right panel. Here you can set color and bleed size, and define the length of your margins:

If you set the same margins on the opposite page of the spread, you would create a very balanced composition called a symmetrical grid. However, asymmetrical grids are a great way to provide dynamic and contemporary look. The additional space in asymmetrical grids can be used for thumbnails, notes and other types of editorial content that do not occur regularly.

If your content comprises of diverse types of information, that appear on pages on regular basis, a multi-column grid is the right fit for your project.

Column grid

An example of a multi-column grid. Source: http://thinkingwithtype.com/grid/

Multiple columns give you endless options for composition. Moreover, it helps you to maintain rhythm, movement, tension, balance and order — attributes of a successful web layout. So, it’s no wonder, that most popular CSS frameworks, Bootstrap and Foundation, are built on multi-column grids.

The Bootstrap grid system for example is based on 12 columns with 70px width each and 15px margins from each side of the column at a total width of 1200px.

You can quickly build this grid in Gravit Designer in a few steps.

Step 1: Start with default 10px grid and activate snap to grid option.

This step is arbitrary, but it helps you to be more precious

Step 2: Create a column with a width 70px:

Step 3: Make a duplicate of the column using Ctrl/Cmd+D and move it by the distance of 3 cells (3x10px=30px) with the mouse. Gravit will remember your last step (see step 4).

Step 4: Use the magic duplicate shortcut Ctrl/Cmd+D 10 times in a row to produce all required duplicates. Gravit will automatically move them at 30px distance.

You can also use Gravit Designer’s transform panel in step 3 and set the horizontal move distance (X) to 100px and the number of copies to 11

You can download 1200px and 960px Bootstrap Grid template for Gravit Designer on vitorials.net.

The length of text

Ideal text length for single-column and multiple-column grid.

Modular grid

An example of modular grid. Source: http://thinkingwithtype.com/grid/

The degree of control within the grid depends on the size of the modules. Smaller modules can guarantee more flexibility, but too many cells can also bring chaos and disrupt the logic of the design.

The basic understanding is: the smaller the module of a grid, the least helpful it could be. We could say that an empty page is a page with an infinitesimal small grid. Massimo Vignelli. Canon

It’s considered as a best practice, that the size of the content dictates the size of the module, not vice versa. The width of a module can be determined either by the average width of an image or by the ideal length of text (35–45 characters in a row). If an image or block of text is much larger, designers could combine several modules into the group, called a spatial zone.

Modules can be groped into the spatial zone

A modular grid comes in handy when you design a tabular information, like charts, forms, schedules, navigational systems. The rigorous pattern of modules helps to standardize data in a table.

The Google Apps menu is a good example of modular grid.

Modular grids can also serve as a framework for entire creative teams. Built wisely, it provides a solid foundation for collaboration amongst designers.

Aside from its practical applications, modular grids became a symbol of pragmatism and ideal political order. Such an appreciation rooted from two influential design schools of 20th century — Bauhaus and International Typographic Style.

Posters by Josef Müller-Brockmann. Source: http://typetoy.com/post/118289947598/josef-muller-brockmann

Hierarchical grid

The alignment of elements to a hierarchical grid can be dictated by the their role or function in the design. First, you have to place a key object, that serves as a focal point, and then align other elements accordingly.

Hierarchical grids are systems, that don’t fit to any category. They are more organic and rely on intuitive placement of the visual information. Due to the fluid nature of a web page, hierarchical grids are very popular in web design.

Practical tip. The Snap to Shapes feature helps you to quickly construct a hierarchical grid in Gravit Designer. This option enables you to place the guides according to key element in design.

Snap to shapes option in Gravit Designer

Thank you for reaching that far. If you have found it interesting, please hit the clap button and share it with friends.

Gravit Designer

The official blog of Gravit Designer, the design software made for everyone. Get it now on https://designer.io

Alexander

Written by

Alexander

Grafic and web designer. Writer. Founder of vitorials.net. Love to learn and share.

Gravit Designer

The official blog of Gravit Designer, the design software made for everyone. Get it now on https://designer.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade