Why Grids Still Matter In Web Design

A grid is made of lines that allow the ease of locating points. Grids are used in maps, electronics, and architecture but most importantly, in web design. I have learned that the best way to create a design-to-development workflow is through a grid structure because it provides clarity, consistency and efficiency.

Clarity

The grid framework makes it clear on how the layout will be communicated between the designer and the developer. It allows for the elements to be organized and utilize whitespace. The structure provides a layout that promotes a hierarchy in content and is also easy to read.

Consistency

Grids allow for design consistency throughout project’s various views. This means no guessing — all of the spacing between columns will be the same and all of widths of the columns will be the same. This also allows for the structure to remain consistent on all screen sizes.

Efficiency

As a developer you are aware of how the design fits within the grid. You can look at a design and see that you have four evenly distributed sections and know that on a 12-column grid each section will take up three columns. The gutter space allows for the even spacing between these sections.

A grid isn’t used to make a design look boxy; it’s used to organize content. Creativity is always encouraged, but the layout provides an organization for the user flow. I’m using Neat, a lightweight and flexible Sass grid on my current project but there are plenty of other grids to try. It’s important to figure out a grid framework that works best for you and your team.

Share your favorite grid with on Twitter @MadeByMunsters.

Originally published at www.madebymunsters.com.