Designing for Digital Publications

Tips from Rupert Knowles, Senior System Engineer, Adobe

Over the past couple of years I have worked with many clients building publications with Adobe Digital Publishing Suite. One of the great things about Digital Publishing Suite (DPS) is that it allows publishers to use existing in-house graphic design expertise to create both their paper based publications and their digital cousins.

I am constantly amazed at how a designer from a pure print background can very quickly create stunning interactive publications. However, the designer will still need to learn new skills unique to digital production. In particular you need to think about the user experience, and the journey that the reader will take as they navigate the publication.

There is a tendency with any new technology to sometimes overuse the features just for the sake of it. It is always worth using them in moderation and where appropriate. And remember, with Adobe DPS analytics, you can measure whether people are interacting with the elements that you create.

Readability

One of the first things to decide on is the size of the font. Typically, for body text, most DPS apps use 16-18 point. One of the most common mistakes I have seen is that the text size has been set too small.

Not all fonts look as good on screen as they do in print. This is less of an issue with Apple’s retina displays, but you should still make sure the typeface serves its purpose well.

And remember you can now choose to render your pages as PDF output. This not only reduces the folio size but also allows people to pinch and zoom on the article.

Navigation & Interaction 

The display on a 10” tablet is a lot smaller than the page size of your average magazine. So an 80-page paper publication could translate into a much larger digital edition.

This is one of the reasons why publishers create publications that scroll both horizontally and vertically.


Figure 1 – Most magazine use 2 dimensions

However some publishers prefer to flatten the folio so that the title only scrolls horizontally. This create a simpler user experience, but the reader now has to swipe through a lot more pages, and it can become a bit unwieldy.


Figure 2 – In this example from Foxtons Area Magazine, they only use horizontal scrolling

To help with this scenario, we have just introduced a feature called 2 finger swiping. Swiping with one finger will take you to the next page, but swiping with two fingers will take you the next article or section.

An important aspect when adding an interactive overlay to your publication is to make sure that the dynamic element does not prevent or restrict the reader from moving to another page, for example creating a full screen swipe-able slideshow or image sequence would block the reader from changing the page. I would recommend leaving a consistent part of the page as “non-interactive” so that the reader quickly learns where to swipe from to change page.

We have made this process easier with the addition of another new feature, hot zone page control. Hot Zones let users tap the edges of the article to browse to the next or previous articles. You can define the width of the Hot Zones in Viewer Builder. Hot Zones take precedent over all overlays with the exception of buttons.

Symbology

Whenever you create a publication it is important to establish a set of icons or symbols to denote which parts of a page are interactive. It needs to be clear to the reader where to swipe or tap to access a specific feature.


Figure 3 – Icons from Lakeland Magazine

It is also good practise to provide positional cues throughout the publication to indicate if a story continues and show how many more pages there are to go.


Figure 4 – Navigation cues from Uncut Bowie

We all know how a paper publication works, the goal here is try and make the digital variant as intuitive as possible.

Finally encourage your readers to explore by making it fun.

 

Share

COMMENTS

  • By imz - 2:18 PM on January 7, 2013  

    I am well excited that Digital Publishing Suite (DPS) has become available to Adobe Creative Cloud members, Can’t wait to get started with DPS.

    • By Adobe Digital Publishing Suite Team - 1:36 PM on January 22, 2013  

      So great to hear the enthusiasm! Let us know how it goes.

  • By Pedro - 9:21 AM on October 17, 2012  

    “And remember you can now choose to render your pages as PDF output. This not only reduces the folio size but also allows people to pinch and zoom on the article.” If you do that and have an MSO the article gets stuck between pages.

    Regards
    Pedro

  • By Stan - 9:27 AM on September 9, 2012  

    Ищу людей занимающимся разработкой изданий для i-Pad. Для обмена опытом и идеями. pinkys.stefans@gmail.com

  • By natasha swarbrick - 11:47 AM on September 5, 2012  

    I am writing to you with a view to discuss further opportunities whereby we could potentially show case our ipads. We have recently completed an extremely succesful ipad app for Lakeland and we are about to complete another one. We pride ourselves on using the software to its maximum and have produced extremely aspirational work.

    If we can discuss this further then please do not hesitate to contact me via email on n.swarbrick@chscreative.com

    Kind regards

    Natasha Swarbrick

  • By griefcounselor - 1:34 PM on August 29, 2012  

    The two-finger swipe addition is a great new feature. Can’t wait to try it!