Inspiration Ideas From Magazine Layouts

When you think about it, web pages – particularly informational ones – aren’t so different from pages in magazines. Websites obviously have the advantage of linkable content, thus broadening the reach of the subject matter and allowing readers to delve deeper into a particular subject, but that doesn’t mean that the principles of print design cannot successfully be applied to web design.

With that in mind, here are just five principles of print page design that can be applied online to really make your web pages stand out.

1. Hero image
They say a picture paints a thousand words; that’s what your hero image should do. As soon as someone lands on your web page, they should know exactly what it is they are dealing with. If you’re a florist, choose a picture of a beautiful bouquet of flowers; if you fix cars, get a picture of someone with their head under the hood of a gleaming automobile. While it may sound like a simple idea, some websites insist on using generic shots of people smiling to try to convey warmth and an approachability. Your hero image should do that: and then some.

2. Typography
Grab the nearest magazine to you and flick to a feature. What do you notice about the typefaces? It would be a surprise if there were more than three used across the whole feature: one for the headline and smaller headlines, one for the actual feature and perhaps another for the captions. If any others look a little different then chances are they are from the same family as on of the others, but are in bold or italic. Using the same typeface throughout adds a sense of coherence and makes the piece hang together. Likewise on your website; choosing a headline font, body font and “other” font will help in giving your site a sense of continuity.

3. Pull quotes
A pull quote is literally a great quote from the article “pulled” and displayed more prominently on the page. Here’s the trick: it doesn’t have to be a great quote from a well-renowned celebrity, it can encapsulate your site’s core values or highlight a particularly strong statement you want to impart on your visitors. Take a look through your home page. Is there something there that you feel sums up your site in fewer than 20 words? Pull it out and make it a feature.

4. Drop-in pictures
A page would look pretty bland with just the hero shot. You need to maintain visual interest by including a few more pictures on your pages. You could even try combining a pull quote with a smaller image, perhaps of something your website does alongside its main function, or you could decide that this is the place to drop the image of folks smiling that other sites consider to be their hero image.

5. Box outs
On a magazine layout, a box out acts as a contrast to the main piece while supporting (or opposing) the arguments being made. It will usually be in a box all to itself, and is often displayed in a contrasting colour so as to highlight as different from the main piece. In web design, your box out could be a couple of client testimonials, it could be brief list of the services you offer, or a price list – the key is that it again acts as an area of contrast and something else to draw the eye. It is like a picture that doesn’t need to use pictures.