by JuliannaKunstler.com
In design, a grid is a system for organizing layout.
Grids help you to structure your design in a way that would otherwise be difficult, time consuming and troublesome
The layouts could be for print (like a book, magazine, or poster), or for screen (like a web page, app, or other user interfaces).
The secret to any good design lies in the way its visual elements are organized and positioned in relation to each other. This is exactly what layout design is all about.
One of the chief uses for a grid is to keep your elements aligned and ordered, and your page design clean and neat. This is because grids encourage alignment, that’s a big part of their job description actually.
A grid is made of up of horizontal and vertical elements and modules that create a structure for your work. Because grids create a system, they can help a designer ensure that a layout is balanced and has a good sense of proportion.
The format is the full area where the final design will be laid out. In print design, the format is the page and in web design the format is the browser window.
Margins are the empty spaces between the edges of the format and the content. The size of the margins is what gives the content a general shape, usually a rectangle.
Flowlines are horizontal lines that separate the different sections of a grid into parallel bands. They help the reader follow the content of the layout.
Flowlines also create stopping points, or edges for the elements to be placed on.
Some flowlines are called hang lines and others are called baselines.
Modules are the building blocks of any grid. They are the spaces created between the flowlines and vertical lines. Vertical groups of modules together create columns. Horizontal groups create rows.
Groups of adjacent modules in vertical and horizontal areas create spatial zones or regions. A vertical region can hold a block of text, a horizontal region can hold a video.
Regions can be organized proportionally or used to create overlapping zones.
Columns are vertical spatial zones or regions that fit fully from the top to the bottom margin.
Rows are horizontal spatial zones that fit fully from the left to right margin.
The spaces between rows and columns are called gutters. These should always be equal between columns or rows, in order to maintain a visual balance.
All layout grids can be designed in two ways: symmetric or asymmetric.
Symmetric grids follow a center line. The vertical margins are equal to each other, as are the horizontal ones. Columns in a symmetric layout are also the same width.
In an asymmetric layout, both margins and columns can be different from one another. It is important to always look for balance when using an asymmetric layout.
A Word document or a presentation template will always have a manuscript grid.
Manuscript grids in a text document separate the header, the footer and the space on the edges (margins). The manuscript layout creates a rectangle inside the page (format), like a bounding box for text.
The rest of the pages will follow the same measurements. It’s good practice to keep the manuscript grid consistent inside one document design.
Column grids are used to organize elements into columns.
Magazines use column grids to place the text in easy-to-read sections.
Column grids are used inside websites as well, like in online newspapers or blogs.
Column grids can have as little as two columns or as many as six or more, but that is not very common.
A modular grid is similar to a column grid in that it has columns, but it also has rows. This kind of grid is used when there are more elements to organize and a column grid isn’t enough. Newspapers use column and modular grids to organize the stories comfortably and easy to read.
Modular grids are also great for laying out forms, charts and schedules. They are also used a lot in e-commerce websites. Your phone homepage that shows all the apps, has a modular grid.
A baseline is the line where text sits. (Leading is the spacing between baselines).
A baseline grid can be applied to any of the grids mentioned above. Using a baseline grid will give a flowing rhythm to the text. It will also give the headings and subheadings a proportional space in relation to the body text, making them more pleasing to the reader.
Lined notebooks have a baseline grid.
Hierarchical grids are mostly used in web design. The purpose of a hierarchical grid design is to organize elements in order of importance.
They are created organically by placing the most important objects on the page first and then creating a grid around them.