Why the grid is great
Organization of information
The grid is a simple system of vertical and horizontal lines used to align elements in your layout. Whether you’re designing for web, print or even composing a photograph, a grid of some kind is a great place to start. It is most useful when you have a lot of information to convey.
The two most common types of grid are the column grid and the baseline grid, which are used most often in print and digital design. Both are invisible systems of lines that help bring a visual rhythm to your design. A column grid establishes how many columns your design has, and how wide your margins between columns are. It keeps your text and images organized vertically. A baseline grid establishes the amount of space between your paragraphs, and the leading between lines of typography. It keeps your text and images organized horizontally.
Why do I need a design grid?
Besides being the easiest way to organize your content, it creates visual expectations for your viewer. A good grid goes unnoticed, and all the viewer experiences is harmonious, easy-to-navigate content. It is also by this token that by following a grid, we can break the grid and create moments of unexpected emphasis. Here are two reasons you need a grid:
- Design grids establish a pattern and provide consistency
Designing your content to an established grid structure creates visual expectations. Organizing is just what humans do; we like grouping things in a logical order. That isn’t just contained to the world of graphic design, either. Maps, buildings, roads, accounting spreadsheets, where you put your groceries- organizing is inherent.
Whether you’re designing a book or a website, organizing your content to help your viewer find what they are looking for quickly is not only “Step 1” of graphic design, it is best practices. This isn’t to say all designs need to look the same, and be generic/utilitarian. Graphic design is the creation of visual content as a means to communicate information. If you aren’t effectively communicating information, you’re just making art.
A grid just establishes a pattern for the viewer to follow, and helps them predict where to look for information. If you were designing a book, you’d probably structure how you laid out Chapter 2 to mimic how you laid out Chapter 1. And if you were designing a website, you’d probably style all of your introduction paragraphs with the same font and size, hitting at the same height across all pages. These are all easier to do with a grid, which brings us to the second reason to have one. - Design grids are efficient and allow for quick collaboration
Starting with your grid of columns and rows makes everything move faster. You know where elements should- and should not- be placed from the get-go. You can dump in all of your content and see what you have to work with all at once, allowing you to jump into the design that much faster. Content is the design, and design is the content. Grids also offer not only a guide for your standard content, but also gives you the flexibility to scale your design proportionally as needed (which is especially helpful for responsive design).
As well as being efficient for yourself, grids also allow quicker collaboration with colleagues. If everyone is speaking the same language, internal communication is smoother as well (which is why, in addition to setting up a clear grid structure, you should also be setting up style sheets for every project you do).
Love the grid
Establishing hierarchy, consistency and rhythm allows you to be more efficient, giving more time to the design. It gives you more time to push the boundaries of what makes a design great, without getting bogged down in the fussy details of the baseline details required to make a design harmonious. We make the rules to break the rules.