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
  • My Week with Disney's MagicBand
    A UX Dream Come True

    Last fall, my family and I went to Disney World for the first time. We decided at the last minute to go, so we opted to stay in a timeshare and rent a car off Disney property. The experience was great (of course, because it's the Happiest Place on Earth), but we noticed we were the only people at the park without these awesome looking wristbands.

    Read More
  • Debugging Angular from the Browser Console

    No matter how well-designed your AngularJS application is, when components start interacting with the real world--and each other--unforeseen issues can arise. Being able to dive into the app's components, inspecting individual slices of behavior and state, is critical to efficiently resolving those issues.

    Read More
  • How To Find Success As A Remote Intern

    Made By Munsters made the transition to working remote easier by utilizing the best tools for communication and project management. Those tools have helped me learn that finding success as a remote intern involves discipline, communication and motivation.

    Read More