Why I Heart Designing with Grids

Share:

Grids – a series of intersecting vertical, horizontal, and angular guidelines – are often used to help structure content in graphic design, typography or web design.

The grid is like a design’s backbone – the invisible system that gives the visible layout its structure and holds everything in place.

Sounds straightforward enough, yet grids can be difficult or even scary for designers to embrace.

Why? We designers enjoy being in a field that allows our creativity to flourish. A grid system, on the other hand, is a series of straight lines that are precisely and accurately set in place.

This embodies some of the contradictions that artists have struggled with for centuries. Freedom versus structure. Creativity versus order. Fluidity versus rigidity.

An early form of grids was introduced way back in the 13th century, when architect Villard De Honnecourt devised his famous diagram for producing harmonious page layouts.

I’ve always been a fan of grids as a tool to make my job easier and, working at a full service marketing agency, they save me a ton of time each week. Here are the five things that I’ve come to appreciate about them:

1) Grids Define Visual Hierarchy

By scaling important elements up and less-important elements down across multiple columns, I can use a grid to help me to define what I want the viewer to see first, second and so on to help them to absorb the content in an order that makes sense. 

Shapiro, Matthias  “Grid System Guide PNGs.” Web blog post. Matthias Shapiro: UX developer & consultant, info vis author & trainer. 2013. Web. 26 October, 2016.

2) Grids Make My Job Quicker

Grids can greatly speed up design time. Instead of randomly positioning elements until I find a decent-looking composition, a grid helps to guide me toward a natural solution because it gives me a foundation to start with.

3) Grids Enhance Designer Collaboration

Just as they’re transferrable between page layouts, a strong grid system also makes it possible to share work with other designers while ensuring the end product will have consistency and visual harmony across the board.

This website design project for a software firm in NYC relied heavily on grids to enable structured scaling between devices as well as collaboration between Ridge Marketing designers, developers and content managers at the client.

4) Grids are a Saving Grace for Multi-Page Layouts

An established grid is transferrable from page to page, making it much easier to maintain a cohesive structure throughout page layouts without sacrificing unique elements and design choices along the way.

5) Grids Scale Well

A grid system is a big help, particularly in web design and marketing where we need to seamlessly adjust our designs from large desktops to smaller screens, such as tablets and mobile devices. Having a layout already established within a grid helps components to shift seamlessly from four-, to two- to one-column grids, as screen real estate gets smaller.

Those are some of the highlights of why I favor using grids in my designs. To learn more about grids and how they’re used, check out some of my favorite grid resources below:


 

Resources/ More Reading Material:

A Brief History of Grids (Adapted from Grids: Creative Solutions for Graphic Designers (RotoVision)) by Lucien Roberts

http://www.graphics.com/article-old/brief-history-grids

Designing with Grid-Based Approach
by Vitaly Friedman

https://www.smashingmagazine.com/2007/04/designing-with-grid-based-approach/# 

The designer's Guide to Grid Theory

by Creative Blog Staff

http://www.creativebloq.com/web-design/grid-theory-41411345

15 Reasons Why A Grid Based Approach Will Improve Your Designs

by Mary Stribley

https://designschool.canva.com/blog/grid-design/

Share:
Blog Home Next Article