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.
In this edition, Food magazine uses a mixture of greens, with a dash of bright blue thrown in on a headline.
On this illustrated cover for Wired, a bold scheme of bright blue and yellow are combined.
Matching the background with the players uniforms, Sports Illustrated goes mustard!
Science news keeps things simple with high contrast orange and black. This is a colour scheme I’ve noticed increasingly on magazine covers.
Another colour scheme with good contrast is grey and very bright red, as can be seen on this GQ cover.
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!
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns