Secrets & Happiness of Digital Publishing

DONE — Explorations in Art, Crafts & Science

My graduation project DONE will hopefully be in the App Store, soon. Until then, you can have a look on the demonstration video about all the things I considered during making this magazine.

DONE is half portfolio & half proof of concept.

Here are the things that I made different than many other digital magazines made with the Adobe Digital Publishing Suite:

• Clean Structure and clear interaction points
  that cannot be mistaken as layout debris
• Immersive reading experience
  using many features of the InDesign Plugin in different ways
• Enriched with HTML5
  to enable great interactivity, I used HTML5 in webviews to make the publication more fun to play with
• Share & Comment every article via facebook, twitter or email
  At the end of each article the reader has the possibility to share it via facebook or twitter and can leave a comment on facebook. Other people that come across the website donemag.cc can comment, too, and their comments appear inside the magazine.
• Interactive Table of Contents
  an interactive index at the end of the magazine allows you to re-arrange the article according to topic, section or other parameters to find new ways getting into the content.
• Also works on Android Tablets & Smartphones
  The usage of Adobe’s Digital Publishing Suite allowed me to easily made the content available on the Android Platform, too. 

If you want to learn more about the magazine, head over to www.donemag.cc.

To keep in touch with the latest news about DONE and when it will be available in the App Store (fingers crossed!) became a fan on facebook.

During the next weeks I will post several techniques and workarounds I used while making this magazine to share my findings with you.

Tell me what you think about the magazine in the comments or send me an eMail if you have questions.

—Johannes

Magazine Landing Pages / Microsites

A digital magazine does not marketing itself via iTunes. Some magazines also provide a good social media base and a nice microsite for all those people getting into a magazine via the internet.

Here are a few nice examples of microsites. Only dedicated sites are listed, not the usual full corporate sites by printed magazines.

éva magazine

foto5

0 to 100 project

Red Bulletin

Magmagoo

iShowbiz

Harper’s Bazaar

Open Projects

CEO

Timbuktu

With the exception of Timbuktu (Baker Framework) all these magazines are made with Adobe’s Digital Publishing Suite. Adobe has a complete list of all released magazines made with InDesign & the digital publishing suite.

—Johannes

Other things than magazines: Showcase

The Adobe Digital Publishing Suite was always promoted as a new publishing workflow for digital magazines and market focused on those so far.

Even the navigation paradigm dictates it: Stacks as articles next to each other (horizontal swipe) and pages in an article among each other.

But this did not detain some designers to create other types of digital publications, even with clever use of the two-dimensional structure.

Some of the examples below could also be done with a native iPad-App in Xcode, but with the Adobe DPS you stick to your InDesign-Workflow and don’t need any knowledge of programming code.

Here are a few examples:

0 to 100 Project

0 to 100 is a beautiful project by Photographer Sandy Nicholson and the people at Up Inc (Kristin Maling, who made the iPad app).

100 Photographs of people from 0 to 100 years old and a quote. Simple and strong. Nice use of DPS, especially the funny tool “Facemaker” where you can mix up all the faces.

Alphabet Animals

An outstanding example comes from James Alistair Gillan (at AQ2) who made a cute and simple learning app for kids. Every character is represented by a stack and animals are pages containg an interactive element: Touching the animal reveals it’s written name. clever!

DIY Portrait Retouching

From the people at Dark Glass Media who created the also non-magazine DI magazine for the iPad comes this tutorial-esk manual with 40 portrait retouching tips for Photoshop & Co.

BREE Collection & BREE Seasonal

The german leather goods specialist BREE has it’s catalogue and a seasonal collection up in the AppStore. It was brought on the iPad by d&d digital data media.

A special feature on the last pages: They included live google maps pages to show the nearest BREE store and lets you calculate the route to it.

Digital Body

João Martinho Moura is an Interactive Media Artist and Researcher (who also has his own podcast) from Portugal. This digital book is made by TECField Design Team and illustrates the artistic live of Martinho. Within the book are many photos from his exhibitions and even 3 interactive pages where the reader can draw his own shapes (presumably made with HTML5 canvas in WebViews).

Another example of a publication focusing on an artist is Rok Chopina from StudioQ in Poland. They added some very nice interactivity (like scratching with your fingers) and falling snow into it.

Rezepte Namics HD

This example of a recipe book is not far away from a magazine, but there is no such where it come from. This is an app by Namics AG who asked themselves for their very personal recipes from home. They talk about recipes and show the people, but never show the finished meal ,-)

135° SOUTH WEST Photobook

This is a good example of a photobook with panorama photos by Hardy Richter. ePublishers take very good advantage of the Pan & Zoom feature: the reader can pan around these very wide panoramic images and zoom out and in. Sometimes with very interesting effects on the composition. well done!

Do you know another example?

If you know another example where Adobe’s Digital Publishing Suite is cleverly used for non-magazine content, let me know in the comments!

—Johannes

View high resolution

Stephen Coles over there at Font In Use has a very close look on the typography and layout of the new editorial news magazine “The Daily”.

The Daily is not made with Adobe’s digital publishing suite. But it is a long announced and in fact nicely designed news magazine you can get inside the US. It faces the same layout issues like every other magazine read on digital devices.

The Cover of the December issue of marie claire features a very Harry-Potter-esk moving portrait of Emma Watson.

Ceros Hot Studio published this as a digital magazine via zinio, the Magazine is available as a standalone library app in the AppStore.

In fact, they did a very clever job for the rest of the magazine: For the most pages, they ported the normal print spreads onto the iPad (works good in horizontal orientation). Interactive elements lay above the print layout and flash every time you scroll to the page.

On the technical side the cover is just a full-page video with all the typography rendered into. It might be to stressfull for the iPad to mix text and video. And the headlines on the cover are not interactive. It is just a video, but a great idea.

View high resolution

But wait … there is more!

the basic navigation is: left/right another article. up/down next page in article.

So especially for the down-navigation you should show your reader that the article continues at the bottom. In the image above you see 12 ways of doing so:

1st row 

• WIRED (the first magazine authored with the Adobe Tools)
• ND+
• Martha Stewart Living
• TheNewYorker

2nd row

• Fine Cooking for the Holidays
• CEO Magazine (my favorite)
• Project (not an Adobe magazine)
• Sabado Bicentenario (clipping a part of the next element from the page underneath, in this case a “1924”)

3rd row

• Monkey (they are showing arrows in every direction navigation is possible)
• Outside+
• TypotronHefte (also showing that there is more when rotating)
• Future by semcon (designed much like WIRED, they are clipping and overlapping elements here)