Exercise to improve your layouts and typography

A good way to work on improving your layouts and typography is with this simple exercise. It uses a 12 column grid system that’s commonly used for the web and has been around for ages. There are many tools out there but the one I use is from Grid Calculator (My settings are on there already). I also use a 16px baseline grid to set my type for this exercise. It should look something like this.

So now that you have a base grid. It's time to setup some parameters. Select two typefaces and 1 image, but it’s really up to you to what parameters you want to setup. But put some restrictions on it. When it comes to problems you will need to solve down the track, there will always be restrictions and parameters where your design solution has to sit. Both visually and objectively. So as the saying goes there’s more than one way to skin a cat. You can reach different solutions to the same problem, however some solutions will be better than others and they will vary in their effectiveness. The trick I find is to start working on something deep enough where you are happy with where it's heading and then to scrap it and start on something else and approach it from a different angle. (Obviously if the timing and budget allows for this approach.) This works great if you have a team working on a project, it’s good to brainstorm various ideas and approach it from different perspectives. Rinse and repeat a few times and eventually you'll find what works and will draw inspiration from each iteration. This exercise will help you grow your repertoire of layouts and learn to quickly iterate ideas.  

So with the restrictions being 2 typefaces and 1 image, the typefaces that I used were Gill Sans and Libre Baskerville but you are free to pair whichever typefaces you want. Now that I have the canvas and the restrictions, I tend to like to sketch out some layout ideas in my notebook. Or find books and magazines that I like and break them down. I found heaps of great layouts in “New Perspectives in Typography” so I used a few of those grid ideas in my execution.  Here are 9 layouts that I came up with, also notice how the baseline grid is used to create consistent spacing with the type. 

So go ahead give this exercise a whirl. If you work in a team it's fun to see what everyone can come up with. Feel free to share your results here or email me :) My resource files can be downloaded here and due to licensing purposes I've replaced Gill Sans with googles free font Lato. And if you know someone who might benefit from this it'd be tops if you shared it with them. Enjoy.