Exploring Grid Structures

Starting with a grid structure hypothesis


Grids are limiting. I almost never use a grid in my design work until I have experimented laying out the elements and content in a multitude of ways. I then use the grid to clean things up. The funny thing is that I unknowingly build grid structures while I am designing. Things naturally fall into some type of grid while I arrange things to achieve hierarchy, balance, proportion, etc. If you’re like me you probably don’t hold grids in high esteem, however starting with a grid structure hypothesis can aid your intuitive process. If your process ends up going in a different direction just redefine the grid to fit your design. If this logic offend some of my hardcore grid designers I am sorry. To me design is more art than science, or rather design is science after the fact.

I have created a number of grids that you can download here. I encourage you to turn each grid on and off as you are working on your next project. Now let’s review the logic under which these grids were built.

The average desktop screen resolution is 1366x768 pixels and 99% of screens are over 1024x768 pixels according to W3Schools as of January 2014 (http://www.w3schools.com/browsers/browsers_display.asp). Almost half of all screen resolutions are over 1366x768 pixels and this ratio is widening every passing year. Most frameworks and grids optimize for the average of 1366x768 pixels or below so I decided to create a grid based on a 1920 pixel width.

Grids are often created from numbers that are divisible by 3. I think this is a great approach because of the rule of thirds. I have created a 3, 6, 9, 12, 15, 18, 21, and 24 column grid based on a 1920 pixel width with 10px margins. In the psd file you will find each one of these column layouts, which you can turn on and off as you are designing.

Download The grids here: https://dribbble.com/shots/1587898-Grid-Structures-Free-PSD?list=users&offset=0

I would love to hear how turning each grid on and off while designing impacted your intuitive process.


If you like what you just read, please hit the green ‘Recommend’ button below and follow the Designed Thought Collection.

Check me out on Twitter, Dribbble, Behance.