Print to Web Series: Digital Magazines

Editor’s note: This is part of an ongoing series that explores the relationships and similarities between traditional print design and web design. For more inspiration, check out Patrick McNeil’s related articles on the subject:

And be sure to catch the digital versions of your two favorite design magazines—HOW and Print editions for the iPad.

One niche in print graphic design that’s been hit hard by the digitization of information is the news industry—and we’re going to focus on a subset of this: magazines. Although printed magazines clearly continue to sell, their sales have been on the decline. And while it might be tempting to suggest that digital versions of these magazines have displaced them, this is not true across the board (though it might be in individual cases).

The reality is that magazine sales and circulation are overall on the decline. (My opinion is that readers are simply going elsewhere for information, particularly to the web.) Despite this, there’s real opportunity for magazines to find a new home in the digital era. And no, it doesn’t include 300MB downloads with layouts that simulate the page-turning experience—an old-fashioned design approach that ignores the real possibilities of the web. Following are some great examples of online publications that marry great magazine content and great user experience design.


HDLlogo

Are you making your way from print design into the digital design space? HOW Design Live in San Francisco, June 22-26, offers a dedicated Print to Web track just for you. Hear from speakers including Patrick McNeil, Chris Converse, Mario Garcia, David Sherwin, Jose Caballer, Terry Lee Stone and more.


Best Examples of Online Magazines

homepage Edits Quarterly Magazine

Our first example of outstanding online magazine design is Edits Quarterly. (Click over to visit the site and browse around a bit. Seriously … if you don’t, you’ll miss the whole point of this article.) The user experience is a huge part of what makes online content so darn special and so different from print (and is, of course, one of the reasons publishers struggle to make the move).

If you haven’t yet seen an interface like this, you may already be inspired to try something like it. Let’s dissect what makes this an excellent example of online magazine design. First, notice what’s missing: A cover that follows any sort of traditional formula. There’s no engaging cover photograph, no attention-grabbing copy. Second, it’s not vertically oriented like a print magazine. Desktop computer screens aren’t vertical, so why should a digital magazine be? If your first instinct in building a digital magazine is to make it vertical just because that’s the way print magazines are done, you’re clearly not ready to let go of the past and move forward. (Granted, you could argue for a vertical layout if you’re designing a digital magazine for a tablet reader. If that’s the case, think it through and be conscious of that choice.)

As you move through the content of this online magazine website, you’ll realize you’re viewing what you might think of as a spread, but it interacts in a web-like way. If the content is longer than a screen, you simply scroll through that spread’s content before moving on to the next. The sticky elements on the side that don’t scroll help make this particularly effective.

More Great Online Magazine Designs

Eephus League Magazine website homepage

Next up is another niche magazine called the Eephus League Magazine. Again, I highly recommend you visit the site and experience it before reading further. (I’ll wait here.)

One of my favorite things about this site is that the layout shifts in format. It’s a challenging design approach that takes more planning and development. But the handcrafted nature of this online magazine has a high-quality feel that is absolutely amazing. While Edits Quarterly, above, has just a couple of layout formulas, Eephus League employs many formats—and while this scheme takes more time to design and execute, the designers will over time accumulate a whole library of diverse and useful layouts that could easily be replicated, populated with content and placed into a magazine.

Trends in Online Magazine Design

Already we can easily spot a few common design threads in both of these samples: First, a strong focus on beautiful typography that echoes traditional (printed) type. The serif fonts in both of these online magazine designs anchor the sites in tradition, whereas sans serif fonts would echo a more modern style. For print designers looking to move into web design, here are two great examples of how your well-honed typographical skills can translate.

A second common element is the way content is revealed, especially in the Eephus sample. As you leave one spread of content and move into another, it’s revealed as though it was simply hidden by the content over it. This locked-in-place approach is interesting in that it highlights the fact that you’re changing “pages” to view new content. The flow and continuity of the content is a joy to experience.

Third, you’ll notice that on the homepage of both of these magazine websites you find instructions on how to use either your keyboard or your mouse to navigate the content.

More Examples of Online Magazines

There are many gorgeous examples we can look at in this area to see how some very creative (and technical) people have solved the problem.

Suit Up Or Die Online Magazine homepage

Suit Up or Die Magazine feels right at home with the above examples. One thing I particularly appreciate is the inclusion of a table of contents. Allowing users to jump around to content that interests them can be important.

Readymag online magazine demo

This example from Readymag, a new platform for online publishing, is not an actual magazine, but rather a demonstration of a concept for creating online magazines. Notice the use of animation, interactivity and social networking and video. To say that this is an inspiring piece is to vastly minimize the awesomeness it represents. Work for a magazine and want to scare the crap out of your boss? Show him this. Fortunately it isn’t just a killer concept, it’s a platform for creating content like this. Too bad it’s still in beta!

ESPN magazine digital version

Just in case you’re thinking, “Yeah, but no real magazines are doing this,” I present an example from ESPN the Magazine. It’s obvious that powerful direction from a designer elevated this from a technical project to a visually stunning one.

Interview Magazine online version

You may also be thinking, “Sure this is great for web geeks to play with, but again, no real magazines are trying this.” Think again. Interview Magazine has an interactive interface that resonates well with its roots in the printed magazine while not feeling like a static promotional site for the publication. Note that this interactive magazine website includes advertising (a vital asset for publishers). Not also that the designers ditched the traditional print magazine cover in favor of a homepage that updates with new content, a feature that puts this website somewhere between a news site and an online magazine.

Two Non-Magazine Examples

Deux Huit Huit website homepage

This website for a Montreal design agency is definitely a loose fit for this piece, but I thought that the way the content was separated into spreads provided a nice demonstration of how this can be done. In particular, I love the variety of colors used to clearly break the content into chunks.

Artographik website homepage

Though this example is not a magazine, its approach to creating spreads of content that can be stepped through connects to that world and demonstrate an interesting use of the style in a different context.

How to Create Online Spreads

If you’re looking to put this magazine-style layout to work in your website design, you might be happy to discover a nice JavaScript tool that can give your project a real jump start. It is called Curtain.js and handles the stepping through content and revealing it. At least one of the examples here makes use of this tool.

The Future of Online Magazines

Clearly the future of magazines is uncertain, and the industry has yet to really latch onto a model that works. Perhaps the samples provided here can inspire and challenge you as you consider how to adapt this format in your own projects.

In fact, I’d argue that it’s time to reconsider what magazines are. Digital magazines become a permanent online home for a set of related content. For example, think about a biographical/archival website for a musician who’s no longer living. Many years ago, I built a site for a musician from the 1940s, Louis Jordan (I haven’t updated the site in 8 years). But the content of the website is evergreen and hardly needs updating—so a magazine-style approach to the content would be an interesting exploration.

More resources for print designers transitioning to web design

COMMENT