Grids 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
A grid is made of one or more horizontal or vertical guides, that help you to arrange pictorial and textual elements on a page.
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.
- 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
A single-column or manuscript grid is the most basic composition system. It is an ideal solution for presenting a large amount of continuous text. Take a medium article for example.
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.
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.
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
When you divide the page on multiple spatial intervals, you add flexibility and welcome diversity.
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.
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
Text in a column is all about line length and readability. Text can be comfortably read in lines from 30 to 80 characters. Less or more makes reading difficult. The ideal length for single-column grid is about 65 characters. For multiple columns it’s between 35 and 45 characters including spaces and punctuation marks.
Modular grid
A modular grid is a descendant of a multi-column grid with the addition of horizontal flowlines. Modules provide you with more control over the content, than a column grid could offer. It’s especially helpful for complex projects with lots of visual and textual data.
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.
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.
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.
Hierarchical grid
If you’ve ever designed sites where you align elements to each other without any columns to guide you, you’re probably implementing a hierarchical grid structure in the design project.
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.
Thank you for reaching that far. If you have found it interesting, please hit the clap button and share it with friends.
