A Happy Medium Between Print and the Digital Reading Experience
It’s no longer news that Print is dying (but not dead) and our means of access to information is changing. Every year more people have access to digital devices and consume their information electronically rather than through analog formats such as a newspaper or magazine. The change has been inevitable for some time now (and that’s okay). There are far more advantages to having access to digital content, with the most notable being the ability to consume a wider variety of subject matter in a much shorter time period. However, I feel there is something lost in the experience of viewing a website compared to reading a newspaper or magazine. I’m not sure what it is, maybe feeling the pages in your hand or the process of turning a page from right to left? –who really knows?
I wanted to create a publication that had the ‘feel’ of reading a magazine but also had the advantages of digital content by providing an interactive experience. For this purpose, I used a tool called ‘Mag+.’
What is Mag+?
(I am in no way affiliated with Mag + or anyone involved with the software)
Mag+ is a plug-in for Adobe InDesign that allows you to create digital publications that include brochures, infographics, magazines, etc. However, the main reason for the software is to bring the ‘look and feel’ of a print product to the digital platform. With this software, you have all of the advantages of the InDesign’s tools when creating your layout with the added ability to make your content interactive.
Getting Started with My Magazine
Like everybody, I am a fan of music. I decided to create a magazine outlining the history of Rock n’ Roll. There would be a total of 6 articles with each one showing the history of rock for a particular time period (e.g., 1940's–2000's).
Understanding Layers and the ‘Snapping Feature’
Without getting too deep into the ‘ins and outs’ of Mag+, a basic layout will consist of two layers — the A and B layer. Although I don’t expect anyone to make much sense of my sketch, the important parts are represented by the blue and pink colors. The blue represents the B layer which acts as the static portion of the page, while the A layer represents the top (this layer can be moved up and down by the user). This will be better represented in the GIF below.
The Process:
I strayed a bit from the original design but the basics remained the same. I wanted the article to read like a magazine so I created the layout accordingly– with the A layer containing the article text and the B layer the image. Much like you would see in a magazine, the article includes columns of text accompanied by an image. This would allow the reader to scroll up to reveal the article text with the image remaining in the background. Mag+ also allows you to design for tablet which is the route I chose.
The 1940’s Article
As you can see here, when the reader begins to scroll down, the text will reveal itself until it eventually ‘snaps’ into place (this feature is called “snapping”). There is an audio clip embedded on the final page indicated by the play button.
The 90’s Article
Using the ‘Snapping’ Feature for an Advertisement
I decided it wouldn’t be an authentic magazine reading experience without an advertisement. This was probably my favorite use of the snapping feature. What appears to be an almost a blank page is quickly animated when the reader scrolls down. You can’t really tell from the GIF example but each instrument has a tappable area that reveals further information about that particular piece of equipment.
The Challenge of the Snapping Feature
I really enjoyed this feature of Mag+ and I believe it certainly added a little extra to the reading experience. However, it was kind of a gamble as to where any particular element would snap into place. Although it may be possible I overlooked a tool that addressed this problem, I couldn’t seem to find it anywhere. Nonetheless, I eventually got each element to snap into its proper location after much trial and error.
2000–2010 Article
Using the ‘Jigsaw Feature’
This was probably my favorite article but it was also the most challenging. ‘Jigsaw’ isn’t actually a feature of Mag+ but it is something you can create by using some Photoshop trickery. Using the name Jigsaw is in reference to a jigsaw puzzle. As shown in the GIF, the image separates from itself and eventually returns to its proper place like a puzzle piece (I know it’s not the most creative name but it sounds catchy!). This was done by creating multiple layers of the same image in Photoshop with the top layer including the right half of the image and article text. From there, the A and B layer of Mag+ was used to create the separation effect.
Present Day Article
Creating a Double Page Spread
This was my final article and I wanted to create something I often see in magazines where the cover page will cover the area of 2 pages called a “Double Page Spread”. I initially thought that it would be simple but I was very wrong. As you can see in the sketch, the cover page would need to be double the width of the remaining portion of the article (making it cover both pages). This posed a big issue as you can not make the article jump between pixel dimensions when reading through it; it has to be one size or the other. After endlessly trying to find a workaround, it occurred to me that maybe I could create the cover page as 2 separate articles. The first page would show the left half of the image and when the reader swipes left to the next page, the second half of the image would be revealed. I gave it ago and, alas! It worked!
The Complete Read-Through
As you can see in the video, the digital publication reads somewhat like a magazine by requiring the reader to swipe right to left (like turning a page) but also gives that extra bit of interaction that makes it exciting and a little less static. The basics of my work really centered around utilizing that A and B layer that created the vertical scrolling text. This subtle feature made the experience a little less mundane in my opinion.
Although this project was only created for educational purposes, I really enjoyed the experience of attempting to create something a little bit different. Looking back on it now, there are certainly some things I could have improved upon such as consistency or choices in typography but I think it was the experience that proved most beneficial. Although I don’t see Mag+ hitting the mainstream market anytime soon, it was a great tool that helped me to learn some basic design principles and allowed me to create that happy medium between print and the digital reading experience.
Brett Monson is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to the final iBooks project in the DGM 2270 course and is representative of the skills learned.
