Design like a Pro - Part 3: Smart Grids

Design /  28 September 16 / by Chris Goodall    
Design like a Pro - Part 3: Smart Grids

In part 2 of "Design Like a Pro" we looked at pairing fonts and colours for maximum readability while maintaining an eye catching design. Today we're going to look at using design grids to help layout your content.


Get smart and use smart grids

Using grids and guides in your design allows you to lay the various elements within your layout in a ‘grid’ type formation. This kind of layout, ensuring that all your text and image boxes are aligned correctly makes for a much better, and professional, looking design.

Wiki_How_Bad

I came across the this extremely poorly designed flyer to say the least! [Designer's opinion, but we'll allow it - Ed], on the WikiHow.com web site. As you can see, non contrasting text is overlaying already overlapping photography at strange angles.

As you can see below, aligning the elements with other elements in your design and following some of the rules in "Design Like a Pro", makes for a much more pleasing and professional looking design:

Good_Grid_Layout

Below are four different layouts, all using the same 3 x 3 grid. The red areas indicate graphic areas (photographs, etc.) the grey areas indicate the areas assigned to your text and the blue areas indicate potential 'break out' areas of the page, client testimonials, advertisements, contact panels, etc.

Grid_Examples
Grid_Examples2
Grid_Examples3
Grid_Examples4

All four layouts are effective as the elements on the page are in alignment with each other, all with equal spacing between them.


Summary

Design is powered by inspiration and creativity, and by tempering these qualities by following some fundamental rules you can create professional looking mail items that will appeal to recipients; the alternative is a nightmare of eyeball melting pink and green garishness that only the blind could truly appreciate.

Rate this Article:

Comments are provided by Disqus, you can find out more in our Privacy Policy.

Chat