Why Do We Need ‘Em?
Grids act as a guide for the placement of your design. Their specific function is to create harmonious compositions while building the foundation for smooth responsive transitions.
Grids are the framework for applying the basic principles of design (balance, unity, harmony, space and form). Some people say that grids stifle creativity but really they create consistency in form which is important to the success of any design. The sections within your grid don’t have to be square or rigid, but they allow you to align items, distribute elements, and break components into sections. This creates a visually pleasing layout while initiating predictability in the design. Using a grid actually make actions more obvious. The Aesthetic Usability Effect states that beautiful designs are automatically easier to use.
Grids help designs adapt to different mediums. Structuring the elements of your design into consistent sections allow you to easily stack and group them for smaller viewpoints. Whether you begin with a desktop or mobile design you need to consider the mathematics behind how things will move and flow from each viewpoint from the beginning.
The Anatomy of a Grid
To ensure you are familiar with the terms I’ll be using, here is a quick overview of a basic grid structure. These terms are also useful when discussing your designs with developers.
Column: Vertical modules of space. They provide the primary real estate for your design.
Gutter: The space between the columns.
Margins: The negative space between the edge of your content/design and the edge of the browser window.
What makes a good grid?
Evenly divisible: This allows you to break up and stack elements equally, creating a more balanced layout. For example, if you have a 13 column grid it’s mathematically impossible to have four blocks across with even spacing within the grid.
Consistent distribution: The proportions of the columns, margins, gutters, and padding should always remain consistent. It took some trial and error to find the pixel perfect combination of column/gutter widths for each design width.
Responsive: Unfortunately we can’t use the same grids for all widths and viewpoints. It simply doesn’t make sense to have the same number of columns and the same gutter widths on a 1400px design and a 320px design.
Here is an example of the same grid system used on a desktop and mobile phone.
Here at Demac, we’ve been working to find the perfect grids to incorporate into our design foundation. Below you will find the PSDs we are currently using. Each grid has been tested to ensure it’s as close to pixel perfect as possible while maintaining proper balance and composition for each viewpoint.
iPhone portrait mode: Download
– 320 px wide
– 4 column
– 12px gutter
iPad portrait mode: Download
– 768 px wide
– 12 column
– 13px gutter
Desktop generic: Download
– 1024 px wide
– 12 column
– 16px gutter
Desktop large: Download
– 1400 px wide
– 12 column
– 27px gutter
Want to create your own grids? Guide Guide is a great Photoshop plugin for automatically generating grids.