How To Find Design Inspiration, Part 1: Magazines

Magazine covers are a superb source of offline design inspiration. We glance at them and often make very quick decisions about whether we’re interested in the content based purely on the cover. Yes, the hunky man or the beautiful woman are usually the main draw on the glossy mags, but the colours used are part of the overall plan to grab your attention.

This article looks at some of the colour schemes gracing the newsstands at the moment and how we can learn from them and apply them to our web designs.

You can be absolutely 100% assured that the colour schemes on today’s magazines do not happen by accident. The art director spends a lot of time choosing a suitable image, followed by a choice of colour for fonts. Magazines with recognisable logos such as Rolling Stone, Vogue and New Scientist frequently change the colour of the logo to match or complement the images on the cover to make them eye-catching.

The headlines on the cover of a magazine equate somewhat with the call to action on a web site. They are bold, stand out, grab your attention and get you to do something. Buy Me! You may not be selling on your own website, but I’m sure you’d like users to stick around and not close the page before even reading the content. Using effective colour schemes can help you do this.

Studies have shown that web users form an opinion in as little as 1/20th of a second when opening a new web page, so getting your colour scheme right is important. Obviously there are many other factors to consider, including layout and typography, but the colour is the first thing to register in the user’s mind.

To illustrate the idea of using colour schemes found offline, I’ve chosen a few magazines and highlighted the main colours they’re using. Underneath each magazine is an example of a website using a similar scheme.

foodmagazine
In this edition, Food magazine uses a mixture of greens, with a dash of bright blue thrown in on a headline.

compasslearning-green

wired
On this illustrated cover for Wired, a bold scheme of bright blue and yellow are combined.

dibusoft-yellowandblue

sportsillustrated
Matching the background with the players uniforms, Sports Illustrated goes mustard!


insightout-blackyellowred

sciencenews
Science news keeps things simple with high contrast orange and black. This is a colour scheme I’ve noticed increasingly on magazine covers.

planit-agency

gq
Another colour scheme with good contrast is grey and very bright red, as can be seen on this GQ cover.

redrelevant-redandgrey

If you’re having trouble picking colours for your design, why not take a break from the computer and pick up a magazine for a little while? Other tools that you may find useful to help you pick colours include the wonderful Kuler from Adobe Labs, the ColorBlender website, which I love for it’s simplicity and Cloford.com.

I plan to write future posts about offline sources of inspiration and I’d really love to hear where you guys find design inspiration away from the web. Cinema, books, music, games? Let me know!

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://jeffbridgforth.com JBridg4th

    As I read this article, I remembered coming across an online archive of the latest magazine covers, http://www.colourlovers.com/trends/magazinecolors. I also found this archive that might be helpful, http://nmca.presspublish.info/.

  • Tim

    What a great article. I have been learning InDesign recently and find magazines a greta source of structural / layout ideas – as in, how many columns have they used, what must the underlying grid have looked like, and so on. Do you ever find inspiration for web page layout in magazines?

  • agentolivia

    This is a really great idea. Now if only there was a handheld RGB color picker that we could use to grab colors off of idea-inspiring magazines. ;-)

  • http://www.magain.com/ mattymcg

    @agentolivia Sounds like a great idea for an iPhone app!

  • agentolivia

    @mattymcg ~ exactly what I was thinking.

  • http://www.laughingliondesign.net jennyrusks

    @jbridg4th – thanks for the links – I love the color lovers website and the archive is brilliant. Amazon.com is a great resource for all the latest mag covers too.

    @Tim, yes I definitely use magazines for web page layout inspiration. I love looking at the typography used and how they frame images. I cut out a lot of things that I like and keep them in a book.

    @agentolivia, Get going on the iphone app. Designers would love it!!!

  • http://www.funkysouth.com funkysouth

    any1 know how dibusoft.com done that menu ? looks cool.

    Jquery or Mootools ?

  • http://boldmedia.co.uk/ blueskyman123

    Very good advice! I would also recommend a trip to http://www.csszengarden.com if you need a bit of inspiration for what can be done with CSS (although it hasn’t been updated for ages!).

  • Liz

    Does anyone know who designed the Insight Out site? Thanks.