Using Layout Grids Effectively

Here are examples of basic vertical layout grids.

1 column vertical grid

2 column vertical grid

2 column vertical grid

3 column vertical grid

3 column vertical grid

3 column vertical grid

Here are examples of basic landscape layout grids.

1 column landscape grid

 2 column landscape grid

 3 column landscape grid

3 column landscape grid

4 column landscape grid

4 column landscape grid

Always use a layout grid for your design projects. No exceptions.

If you don’t, you’ll never be able to repeat that look consistently. Your projects will never have visual harmony, and like anything which lacks structure or a strong foundation, your concepts will be visually inconsistent from one product to another and will always be a struggle to produce. Without a layout grid, graphic elements will not properly work together.

This system is always the first test to see if that idea will work well and be applicable to a real world application. Any high-quality design project, campaign or identity/branding system needs a strong, tested and perfected layout grid system to make it possible to split the work to many designers at one time, so that they all produce the same quality end result with consistency and visual harmony.

It is critical when you go from print, where you have total control over your layout, and apply your design to the web, where you have less control, that you still apply these principals by managing the number of cells, white spaces, margins, borders and padding. It’s even more critical in this case, that your layout grid system is extra flexible for responsive websites, where your designs can go from four columns to one and still keep its integrity and the client’s message. A layout grid is the invisible force that gives the visible its structure and holds everything in its proper place.

Also see Responsive Website Formats Explained

Adjusting Your Layout Grid for Your Binding Type

It’s important, as you create your layout grid, that you pay special attention when choosing the type of binding to compensate for the gutter. We’ve all had the experience of losing content in the gutter of a publication, at one time or another, and have learned this lesson the hard way. Illustrated below are examples of a perfect bound spine and a double-page layout grid, where the gutter has been taken into consideration and the proper adjustment made.

The gutter is the blank space between two facing pages. The gutter space is that extra space allowance used to accommodate the binding in publications. It needs special attention because it is not always usable for design and will affect legibility in most cases. For example, a perfect bound spine will take about a ¼” for the glue, so you should consider the first ½” as non-usable. Any type of Wire-O™ or spiral binding, which make it possible for the document to lay flat when open, will have either drilled holes or punched squares for you to consider. With these specific bindings, the first 3/8” should be considered as not usable or illegible space. On the other hand, the gutter of a saddle stitch binding will not have this problem and can easily have an image or text run though it without any legibility issues.

The Rule of Thirds

This rule is used by professional photographers the world over. The rule of thirds works by splitting an image into thirds, so you end up with 9 equal sections, then simply place your main subject where the lines intersect.

The Golden Ratio and the Fibonacci Sequence

The Golden Spiral is based on the Golden Ratio while the Fibonacci Spiral is a spiral based on the Fibonacci Sequence. Both are very similar, and can be used as a compositional tool.

The Golden Spiral

The Fibonacci Spiral

The Golden Ratio is also known as the divine proportion. In mathematics and the arts, two quantities are in the Golden Ratio if the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one. Also In mathematics the Fibonacci Sequence are 0 and 1, and each subsequent number is the sum of the previous two: 1, 1, 2, 3, 5, 8, 13, 21, 55, 89,144, etc.

Optimum Social Media Image Sizes
Online Advertising Formats Standards