Layout Grids

What is a Grid?

A grid is a formatting structure composed of a series of lines (vertical or intersecting) that divide a page into columns and/or modules. These lines enable a designer to arrange the contents of a page in an equally proportioned manner. While the lines of a grid themselves are not necessarily visible (although sometimes they are), using the structure ensures that all elements are aligned according to the page layout framework. Think of the grid structure similar to a graph of the page where the designer can organize graphic elements (for example, text sections, images, and other functional or decorative elements) using a calculated, easily measured approach.

Why Do We Use Grids?

Grids are a powerful and necessary component for creating an interface with robust usability and intuitive layout. There are many variations of the grid system, but the ability to customize allows web designers to conform to what will serve the page content best. We prefer a 12 column grid as it’s versatile and easy to integrate by our standards. You may appreciate a different format, to each their own. As long as it simplifies the layout process for you, use them all if it helps.

Baseline Grid

The baseline grid, traditionally used in print design, is a tactic that allows the designer to create a vertical rhythm which essentially creates invisible vertical units within the typography and page elements. It is an invisible way of giving some order to disorder. The following highlights some of the other benefits of using baseline grids:

• They help take some of the guesswork out of how to space things exactly vertically.
• Provide a framework by which elements over several columns line up visually.
• Unify scaling of different elements against typography.
• Quickly and consistently line elements up across multiple pages.
• Provides a template so that multiple designers can work on a project without a misstep.
• It makes it easier for developers to determine space.

Baseline grids give your work cohesion and consistency. It is the tool that ensures balance in your work so that you have confidence that all elements are properly aligned. It is what gives your work just the right amount of crispness and sleekness. You know, that sharp crispness that people can’t quite put their finger on.

We suggest using a grid with a vertical pitch of 4px. As a designer working on websites and/or products, you’re probably familiar with the popular 8px grid, so you might be asking: why are we suggesting four here?

Desktop design tools have fairly dense interfaces when optimized for productivity and speed. With such a dense interface, an 8px scale doesn’t provide enough granularity.

Every value should be divisible by four, including element sizes (images, fields, tables, buttons, etc.), margins, paddings, and line-heights, except for the font sizes and icons, as making them a multiple of four may negatively affect their look. Our grid is definitely on the more granular end of the scale, especially compared to the 8px grid you might see included within many modern marketing websites. Building denser interfaces requires a high level of fidelity, a fidelity provided by a more granular grid.

Custom Grid Solutions

Our experience has taught us well. We have learned what works best for us, our clients, and our designers. Time has been a great educator for us when it comes to grids. We have time-tested our process, systems, and layouts and have customized our best solutions into a set of proprietary grids that we use as our very own starting point. The measurements are based on a combination of the Bootstrap 12-column grid, the Muller-Brockmann modular systems, and Chihold’s studies on the use of grids in typography. Each one is a precise grid design for varying resolutions which can be helpful for different sized screens. The following highlights our customized solution: 

1920px resolution
12-column grid
Side margins at the edges are 370px
Content Area Width is 1180px
Column width is 80px
Column spacing is 20px

1280px resolution
12-column grid
Side margins at the edges are 50px
Content area width is 1180px
Column width is 80px
Column spacing is 20px

1024px resolution
12-column grid
Side margins at the edges are 40px
Content Area Width is 944px
Column width is 64px
Column spacing is 16px

320px resolution
3-column grid
Side margins at the edges are 20px
Content Area Width is 280px
Column width is 80px
Column spacing is 20px

Mimicking Nature

The 320px grid is built around the 12-column Bootstrap grid but tailored after the iOS design guideline. These templates offer an intuitive layout for a web page while keeping it versatile enough for screen sizes with different resolutions. There are far too many devices of various sizes and categories to tailor a customized grid to every alternative, so we use this tool as the baseline and work down from there. Feel free to take advantage of this tool that will make customizing your layouts second nature.

The arrangement of elements in these grid designs is modeled after a common mathematical sequence that appears in nature often, called the Fibonacci Sequence. The Fibonacci Sequence is a phenomenon where each number in the sequence is the sum of the previous two (1, 1, 2, 3, 5, 8, and so on). Fibonacci discovered this same sequence in various cases throughout nature: in various seashells, flowers, etc.

Some of the most beautiful patterns in nature follow the Fibonacci Sequence. Because the sequence mirrors nature, the human senses are trained to naturally emulate the similarity to find beauty when we see things proportioned. The same principle applies to grid systems. They provide an effective and appealing format for organizing design elements on interfaces.