Creating page layouts from magazines

Warning This article was written over six months ago, and may contain outdated information.

This is an idea I first read about in Andy Clarke’s excellent book, Transcending CSS (if you don’t have a copy already, you should really think about getting one), and was then reinforced by Jon Hicks’ presentation at @media 2007, How To Be A Creative Sponge. In both cases, they suggest using magazine layouts as inspiration for web design; I decided to go one step further, and rip off the design completely.

So I grabbed a copy of one of my wife’s magazines — Marie Claire, August 2007 issue — and chose an interesting layout — page 166, if you have a copy to hand (if not, I’ll put a scan up here later).

First of all, I made as exact a copy as I could — with Lorem Ipsum text to save me copying it all out, and stock photography instead of the actual images. My first effort is here:

Marie Claire layout, version 1

A quick sidenote: I’ve only tested this page (and the next example) using the browsers I have to hand; as I use Ubuntu, that’s Firefox 2, Opera 9.2, and Konqueror 3.5.6. I can’t promise it displays correctly on anything else. There are some CSS 3 selectors used, so it definitely won’t look right in IE6 — but then, you don’t use that any more, do you?

It’s not a bad layout, but in order to stop the main image being too big, I’ve restricted the width; that makes it too narrow and tall, and the fonts are tiny. In order to get around those problems, I increased the width and the font size, and re-cut the main image to be broader and shorter:

Marie Claire layout, version 2

Et voila! A perfectly workable, no design skills involved, web layout. Of course it could do with a little more work to make it perfect, and some more changes to avoid charges of plagiarism, but for a couple of hours work, it’s not too shabby.

The advantages of using this technique are that it introduces typographic and colour combinations that work well and, for someone like me whose design ideas are betrayed by their lack of technique, it’s a shortcut to building a workable hook upon which more changes can be hung.

Comments are closed.