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.

More posts
  • Recognized as One of Indianapolis' Top Design Firms

    Whan an unexpected surprise, but one we don't take lightly. At Made by Munsters, we've worked extremely hard in building quality products with our partners and scaling our world-class team of designers and developers with the best talent.

    Read More
  • Determining User Needs Based On User Personas

    As product designers and developers we solve problems that our users face. Our work, hopefully, provides solutions to tasks that either take users too long to complete, confused them or didn't exist in the first place.

    Read More
  • We're Teaching At Squares Conference

    Good news. Made By Munsters will be teaching at Squares Conference this year. The three-day conference, held in Grapevine, TX and hosted by the good people who created Circles Conference, has asked us to teach a one-day workshop on crafting your own CSS framework.

    Read More