I've collated some of the main design mistakes that occur in magazine and page layout. You may be thinking "why is this on a web design & development blog?" Well a lot of the design mistakes apply equally to web design, especially considering the trend to use more magazine style layout and typography based websites.
You can learn a lot from what doesn't work and apply it to your own designs.
In this article I'll look at the following problems with examples:
- Alignment of elements
- Text touching edges
- white text on white / Black on black
- Columns - too wide / too thin
- Font styles - too many
- Colour clash
- Unbalanced layout - images/text/whitespace
- Difficult to read
- Images - don't look natural
Examples of bad magazine layout:
Alignment of elements
Aligning elements (images, text boxes, text, headings, etc.) is a basic skill. The placement and size of these elements should follow some logical idea for example: edges line up, gutters and margins of equal size. The use of grid systems helps in the design process (links to grid systems at the bottom of this post).
This magazine example has a great right hand page and a nightmare on the left. The top images don't conform to the text column width or the overall page margin and even the gutter between the images is a different size compared to those below the image. The group of images in the bottom corner have no spacing around them and to top it off a thin image is wedged into the bottom page margin.
Here is an art book where the top right corner doesn't have the same margins as the top left.
And another magazine layout with non-aligned elements. Also take a look at that top centre image - why should that one pop out to the page edge?
Text touching edges
Text should be easy to read - but when it touches the edge of a text box or image it becomes really difficult. The example above does have the text touching the edge of the red header but that is probably a design decision. The one below is just bad placement. The black stroke on the red letters and overall alignment doesn't help either (alignment of header, author and inset image).
Columns - too wide / too thin
Columns of text too wide are more difficult to read. We associate these with serious letters or books and the implication is that we have to settle down with a wide column and give it all our attention. The example above also has too wide columns.
On the other hand too thin columns become difficult to read, require weird hyphenation or start making ragged right hand edges (if left aligned) or rivers of whitespace (if they are justified).
White text on white / Black on black
Using images as backgrounds with text on top increases the likelihood for the text to become unreadable - especially over high contrast images.
This magazine cover shows how white text on white just doesn't show up.
Font styles - too many
There is a limit to the number of font sizes and styles you can use before it starts to look messy. On a single page a hierarchy of 3 levels is usually considered to be enough.
This magazine has different styles for headings, subheadings, quotes, tagline, tables, headers, footers and a side bar - and that's before the chart has been chucked in!
(also notice that the alignment of the little graphic in the table is weird)
The above example shows how a good colour scheme (in this case cyan, black, & white) can be ruined by a clash of colour. That chart is just one rainbow abomination - along with its ugly black text.
Here is another example of a magazine cover that shows how the pink colour scheme (taken from the lips of the photo) is thrown into sharp relief by an opposing colour (that green text) and also how a high contrast background (black hair, white backdrop) makes over-lying text really hard to read.
Unbalanced layout - images/text/whitespace
Whitespace is great and is a useful design element (and it doesn't have to be white!) however balance is usually needed in design.
This example shows how the layout is unbalanced with a dominant right side (and also huge caption text compared to the body text)
This other magazine spread is almost there, however the margins on the text don't match the structural lines in the photo. If the edge of the glass was offset from the centre line the same distance as either of the margins then this would be beautifully balanced.
Difficult to read
Readability of text is vitally important. Check out this example that at first glance looks okay, until you try to figure out where the first word of the first paragraph actually is!
Images - don't look natural
And lastly my favourite problems. Things that you can do with photoshop can lead to some really un-natural images.
Check out the weird head:
..the missing leg
and the missing thigh!
If you're interested in magazine-style web layout then check out the following post about web design styles.
And also using grid systems for web design.