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
  • Being a recovering workaholic

    Workaholism is a problem, and something we've experienced ourselves. But as a dad, Joey would much rather risk not conquering the world than risk missing out on experiencing time with his kids.

    Read More
  • Just Who Is Made By Munsters

    Made By Munsters is an aspiring company that values itself on an open and inviting culture. A diverse and equal opportunity design and development firm that encourages its designers to code and developers to design.

    Read More
  • Commit with Intent

    The success of git has brought a new generation of committers to open source projects. That being said, it also makes us take a look at how we commit our code and what we can do to improve our commit messaging.

    Read More