Authored by Primate

A rather awesome, informative
and witty blog about all things web

Lessons from magazine design

pantone swatchbook

The world of print design: where deadlines are real and colours are patented.

I started my career as a magazine designer, and although I did make a couple of shameful flash sites during my first years as a professional, it wasn’t until a couple of years ago I really made the full transition into digital. The move from the fixed format, final deadline (no-one wants to pay for the reprint to facilitate a “post-launch” change to the content) world of print was not without obstacles, but in the end I’m thrilled I made the switch. The web moves at a faster pace than anything I’ve ever experienced and it’s very exciting to be part of a world-changing industry that’s still in it’s infancy.

That said, I consider myself  lucky to have a foundation of traditional print design upon which to build my web design practice. With ever-changing browsers, delivery methods and devices, the web poses a very different set of design problems which require design solutions unique to the medium, yet I’m still holding on to many principles from magazine design. Although the mediums are different, most visual design problems boil down to the same thing: communication. As designers, it’s our job to convey whatever message – or facilitate whatever process – the job at hand stipulates, and to do that we have to employ a range of design fundamentals that aren’t (or at least don’t need to be) medium dependent.

Images are not decoration

In contrast to magazine cover design, a lot of web designers seem to opt for the bland image + [insert your text here] combo as a catch-all home page solution, the key being to keep the image roughly related to the topic of the website (enter: business-man handshake), but not so specific it might not fit with the content that will invariably be delivered 3 days after launch. We’re also experiencing an astounding amount of “themes” for various publishing platforms (not naming any names here, although the letter W comes to mind) mainly consisting of stock imagery, textured backgrounds and ornamental/grungy/shiny decoration that essentially make up the shell in which the content is inserted later on.

Good websites – and magazines – avoid this by choosing imagery and text that both work around the same concept (obviously I’m not talking about celebrity magazine covers here, where the concept is always the same: picture of [celebrity] covering part of the title). The text and image may individually communicate different things, but when combined they create a new, reinforced meaning. For example, a picture of a smashed up piggy-bank coupled with the words “Big sale on bicycles!” will create very different connotations than the same image with the words “Obama is down to the last cent” written above it. This is called juxta-positioning, and it’s as common as table salt. I’d go as far as saying it’s one of the most important aspects of graphic design and I don’t see any reason why it shouldn’t be equally important online.

“The study clearly shows that owning a 27 inch mac severely reduces designer’s ability to think rationally”

Break up your text

Have you ever flicked through a magazine, noticed an intriguing quote in big letters (“The study clearly shows that owning a 27 inch mac severely reduces designer’s ability to think rationally”) and stopped to read the article? You wouldn’t be alone, and that’s not the only trick in the book either. Intro paragraphs, pull quotes, fact boxes, info graphics, bullet lists and sub headers all help breaking up the content into sizeable chunks that are easier to digest for the reader. It doesn’t require much effort – I’m by no means advocating over the top measures such as animated text or blinking colours– but by offering multiple entry points and “skimmability” you’ll increase the chance of visitors engaging with the content.

Navigation is a tool, not an art gallery

Just like websites, magazines make use of navigation tools. The most obvious place to start navigating a magazine may be the contents page, but there’s also page numbers (sometimes accompanied by chapter/section titles), colour coding, even physical indicators such as tabs and section dividers. Common to them all though, is that they never – ever – get in the way of the content. These tools are only there to help the reader find the way, and as such they are often made as small and subtle as possible.

Why is it then, that on so many websites we see huge header areas with decorative ornaments poking out around buttons, nested sidebars, banner images etc, all pushing the content further away from the reader? I think we should design the navigation areas of our websites for what they are – tools for moving through content – not for showing off the latest css technique or photoshop filter. Ultimately, the visitor is there to for the content, and no matter how glorious your framing visuals are, they will soon get boring if repeated on every single page.

Design all pages, not just the home page

Although they do exist in the darkest corners of the publishing world, template-based magazines where the editor fills in the content independently of a designer are rare and frowned upon, not only by designers and writers, but by that most important person of all: the reader. No-one is interested in flicking through 40 pages of badly set text mixed with photos taken by the editor’s niece three years ago during her honeymoon to Vegas (the article is about the importance of compassion in management, but that’s not important). They want the good stuff; they want zingy headlines, well-considered balance between text and images, news columns, 60-second interviews, photo articles, reviews, latest gadgets and celebrity round-ups – in short, they want variety, both in terms of content and layout. Because printing is expensive, publishers rely on readers buying (and thus paying for) their magazines, so they tend to adhere to the audience’s reading habits and give them a variety of content to indulge in. Unfortunately, this seems not to be the norm on the web, and I think part of the reason is a little something called a CMS.

just because the client can edit their pages we should not treat them as word document repositories

Now let me be the first to admit a sturdy CMS is a godsend and absolute must for any website of a certain size. Luckily, webmasters are now a thing of the past and clients can update their sites on their own at little or no financial cost. However – and this is a very big however – just because the client can edit their pages we should not treat them as word document repositories. It may be tempting, and indeed easy, to repeat the same standard layout for all pages but the home page (you know the one I’m talking about: main column + sidebar widgets), but this practice completely takes the “design” out of “web design”. Sometimes, the content of a page lends itself to a three column layout. Sometimes you’re better off using two images side by side instead of a big one in the middle, sometimes you might want to use a tabbed area to show the different aspects of a particular subject, sometimes a paragraph works much better as a boxed-in list… You get the picture. Yes, this will give you a lot more work (and no, the wysiwyg in WordPress is not the way to do it), but your readers will love you for it.

Don’t let the design get in the way of the content

You may have noticed that all of the above requires you to think about your content – even if it’s just incomplete drafts – before you start designing. If you want to add meaning to your imagery by juxtaposing it with powerful copy, you need to know exactly what you want to say before you scour iStock. If you’re counting on the magnetic effect of a pull-quote you need to emphasise the right – not just any – words, and unless you want your pages to look like templates, you depend on the content to guide the layout.

Why am I going on so much the content? Because it’s the single most important aspect of your website – heck it IS your website . Without content, your graphics are literally meaningless. Without content your fancy navigation points to nothing. Without content you have no layout. At the end of the day, if design is communication, then content is the message that’s being communicated.

And the best design is that which goes completely unnoticed, leaving the message to be absorbed without distraction.

If you liked this article then why not subscribe to our RSS feed.

Author: Espen Brunborg

Espen can easily ruin conversations with questions about chimneys.

Tags

, ,

Comments

Showing 8 Comments

Leave a comment
  1. Camilo Oliveira August 11, 2011 at 11:49 pm

    Bravo!
    Great post.

  2. Kevin Sharon August 12, 2011 at 3:01 pm

    Just like websites, magazines make use of navigation tools.

    This is a great article and really insightful. One caveat, I would be cautious in trying to make apples to apples comparisons from print to web when making a point like the one about navigation. Navigation on the web is very different from print and needs to function as a persistent way-finding tool and a method of building trust with a visitor to a site. I agree on your other points about decoration, that said navigation can&rsquo:t hide in the background. Designing navigation to be “as small and subtle as possible” could be taken to an extreme that wouldn’t be useful.

    • Espen August 12, 2011 at 4:39 pm

      Kevin,

      I wholeheartedly agree the comparison between web navigation and print “navigation” in reality isn’t as direct as I’ve made it out to be for the sake of my argument. I would still insist the navigation should be as “small and subtle as possible”, although I should perhaps rephrase that to “small and subtle as necessary”. What I’m arguing is not to make your navigation tiny, or use colours that don’t stand out. I’m saying let’s keep it totally obvious, persistent, intuitive and easy to find/use – but leave it at that. Animations or over-decoration is, more often than not, surperflous.

  3. [...] from a print background I’m used to handing my precious work over to someone else at the production stage, so [...]

  4. Mark Pryde March 2, 2012 at 5:08 pm

    Great read Espen, believe it or not this is the first time I have read this despite the fact you posted it over 8 months ago. As always I am total agreement with your principals on design, layout and above all content.

    *I suppose I’d better write something nice about one of Gordon’s blogs now.

  5. Glennis Kniss June 5, 2013 at 7:43 pm

    What’s Happening i am new to this, I stumbled upon this I’ve discovered It absolutely helpful and it has aided me out loads. I’m hoping to give a contribution & aid other users like its aided me. Great job.

Leave a Reply