Digital magazine design best practice

Here, Dialogue’s in-house experts share digital magazine design advice and examples to help make the leap from page to screen painless and effective.

In our increasingly digital-first world there’s a lot of clamour about the digitisation of magazines. 

It’s worth outlining exactly what we mean by ‘digital magazines’. It’s not simply a recreation of the print product as a PDF or similar.

Print magazines create a unique experience and are designed around that – a collection of multi-length content that is delicately mixed and balanced, with carefully chosen paper stocks and finishes forming a multi-sensory experience. And a digital magazine is equally complex, not simply a collection of stories stored digitally for readers to browse.

A digital magazine should seek the engagement of print, using the technology available to make it interactive, media-rich, personalised if possible, measurable and fully responsive. Find out how to create a digital magazine.

Naturally, a big part of creating an effective digital magazine is the design. Here, Dialogue’s Art Director Rich Berry and Head of Digital Mark Ovens share their digital magazine design best practice knowledge.

Digital magazine design: don’t abandon basic design principles

Just because it’s on a screen, not a page, doesn’t mean everything you know about good design goes out the window. People still read and navigate pages in a similar way, therefore your digital magazine should absolutely still have headlines, images, captions and subheadings.

Firstly, you need to remember you or your client’s branding. Consistency results in recognition and, eventually, loyalty, so your digital magazine design needs to reflect that.

Secondly, don’t be afraid to use large images. The human brain processes images 60,000 times faster than text which makes large images a great way to grab your reader’s attention in a noisy digital landscape.

However, just because it’s digital doesn’t mean you should abandon quality. At Dialogue, we take care to craft specific and clear photography briefs to make sure we get the images we need, regardless of format, because quality will keep readers coming back.

“You can get away with using low-resolution photography on digital platforms, which wouldn’t hold on a full page in print,” explains Rich. “Using good quality photography looks great in a magazine in print, but looks even better on a digital platform because people are so used to seeing bad digital photos. How many of us have a Facebook feed full of people who can’t take a photo? We get used to seeing these low-quality images, so the images that have been taken by a professional – composed and lit correctly – stop people in their tracks.”

Thirdly, use a grid system. This is a common term in print, but is just as applicable in digital magazine layouts. It’s a structured way of displaying content using horizontal and vertical lines, and is a visually appealing design standard that readers are used to engaging with.

Finally, don’t be afraid to use multiple fonts in your digital magazine designs, just like you would in print. Sans Serif fonts perform better on the screen as they are less visually complex and require less time for our brains to process, which lends itself to scanning a screen. Sans Serif fonts should certainly be used for body copy in digital magazine design. However, Serif fonts create interest for the reader on the page and, just like print, as long as they complement any other fonts used on the page they can be used as part of an engaging and visually appealing design.

Digital magazine format

A digital magazine shouldn’t just be the print version on a screen: simply copying and pasting print articles online won’t cut it.

One of the benefits of digital magazines is the ability to navigate around the publication with just a few clicks. Design features such as an interactive table of contents and image thumbnails make it easier for readers to find the content they want.

This interactivity also makes it fun, not just functional but this can be pushed further by involving your audience with quizzes, polls, embedded videos and animations. Interactive content helps enhance conversions by 40-50% as well as increase shareability, which can increase as much as 28%.

“There are lots of interactive elements built in to digital magazine design software; slideshows, pop-up functionality, etc.” says Rich. "Within the software we use, you can create an A layer and a B layer, where the A layer is a floating, scrollable layer and the B layer is a static background. We masked out the B layer so you would see an image, the text would scroll over it on the A layer and fill the screen, and the B layer would change to a different image, so when the reader finished scrolling it would reveal a new image.

“For example, we often have a long article, which means the user would need to scroll for days. Instead we may break the article into three horizontal panes, opening with one big picture, scrolling through the copy and ending with maybe a big picture and a pull quote.”

A word of warning, though: “Digital does not mean limitless. While I’m sure most platforms can develop whatever you want, the tools they give you are building blocks, like a Lego kit. You can build anything you want with the blocks you have, but you might need to buy more Lego kits for certain things.”

A good digital magazine design example is Bauer Media’s Empire app. All of the articles found in the printed version feature in the digital edition accessible via the app, but with the additional embedded videos and interactive animations mentioned above.

In addition, as well as access to exclusive picture galleries and videos, there is an in-built search function allowing readers to research their favourite films, actors or directors in the Empire content archive, and readers are signposted to the accompanying podcast, which is simple to access from the magazine app, furthering engagement with the brand.

Other considerations for digital magazine design

Of course, there are a few technical considerations that you need to keep in mind when designing your digital magazine layouts.

A key design approach for digital magazines should be its lack of clutter and this is especially important if you’re considering interactive content, you need to make sure elements are spread out so readers won’t accidentally select something they don’t want to.

Where a website could feature display ads and pop-ups, good digital magazine design should make use of white space, just like print does. This allows the reader to really focus on the content that matters.

A focus on content is vital. We’ve already suggested using multiple fonts, but make sure the sizing is responsive to ensure legibility across a range of screen sizes (desktop, mobile, tablet – and vertical or horizontal mode for the latter two). In fact, the whole design should be responsive to accommodate your reader, no matter what their device.

“There is a vast amount of devices, screen sizes and browsers to consider – BrowserStack offers testing on more than 2,000 real devices – so ensuring the content is accessible is paramount,” explains Mark.

“Ensure the magazine environment is responsive, whether it’s in an app or web-based. The coding needs to be flexible and fluid with the appropriate breakpoints, typography, etc., catering for all screen sizes. Normally digital magazines are designed for smaller screens (using a mobile-first design principle), then the design and behaviour is tested on larger screens. For web-based applications, hosting requirements is about accommodating the potential traffic and views, ensuring enough bandwidth to manage any surge of traffic, and that all assets are fully optimised whilst taking advantage of caching capabilities to keep costs down.”

Rich continues: “With a device, it’s viewed in either portrait or landscape, whereas if you’re looking at magazine design, you’re working with a double-page spread, so you’ve got more opportunity to make pictures bigger or devices flow across the page. With copy, on a page you read left to right and you can put copy in columns, whereas on a device you can’t have two columns of copy as you’re asking the reader to read to the bottom then scroll all the way back to the top to read the second column, so it’s quite limiting in terms of page layout and structure. It’s beautiful to work on an iPad or Android tablet as you have the flexibility of that space, whereas on a mobile phone it’s really hard to do a layout that’s not just ‘picture, text, picture, text’ because it’s so restrictive.”

Digital magazine design software

There are many platform options when it comes to choosing the software for your digital magazine. Rich shared his thoughts on a few that really stand out in our experience:

• Pugpig – “They have a lovely platform that’s simple to use and nice looking, and it has great distribution options for multiple devices.”

• Mag+ – “It’s one of my favourites, not necessarily in terms of workflow, but in terms of the flexibility it gives you as a designer. It’s not using a content management system (CMS), it’s using InDesign, which designers love to use – we design our print magazines using it, so why not design our digital magazines using it?”

• Edition Digital – “Somewhere between a CMS and design tool, as it’s a web tool used online. It lets you dip your toe in the water of web development for some basic animation techniques.”

Best digital magazine publishing platform?

“It’s an interesting time to see where we go from here,” muses Rich. “Is it a specialised platform like the above or will page-turners eventually win because people just want the printed experience on a screen, without that digital flair?”

While a digital magazine will always be fighting with other digital platforms for the reader’s attention and engagement in a way a printed product doesn’t have to, the beauty of a digital magazine is its fluidity. Designers can play with interactive elements and layout design, and test and measure the results among readers so that the digital magazine design can be tweaked to best satisfy them.

In terms of getting it right, remember basic design principles, add enhancements to fully engage the reader and don’t forget to design for the format in order to really get the digital magazine experience right.