InDesign tutorial: Design an interactive magazine layout for the iPad and iPhone

The co-founder of the award-winning digital comics and illustration magazine Scrawl reveals how he creates engaging layouts for the iPad and iPhone.


My name is Michael Golan. I’m a designer and co-founder of Scrawl Magazine  (together with Roni Fahima and Shiraz Fuman). In this tutorial, I’ll take you through the process I used to create the layout for an interview with comic writer and artist Jason from the ‘Power’ issue of Scrawl.

Scrawl is an interactive magazine dedicated to visual storytelling that runs on the Mag+ platform. It features illustration and comics, and integrates them with new technologies in order to create a new and fun experience.

In this tutorial, I’ll explain how to adjust document settings for your readers’ devices, working with the different layers for a dynamic layout, embedding HTML content and adding links.

I’ll be using InDesign CS5, but you can use any later version – including InDesign CC – with the same process.

Time to complete 

2.5 hours

Tools

Pen/pencil & paper, InDesign CS5 (or later) and free Mag+ plug-in, Illustrator and Photoshop

Step 1 - Ideas and wireframing

STEP 1

The interview was conducted in a Q&A format, and I thought speech balloons would be a great way to convey this sense of conversation.

In the image (right), you can see an early sketch of the wireframe of how the page layout should look.


Step 2 - Creating the assets

STEP 2

Once I had the general idea, it was time to start off creating the assets for the design – mainly the speech balloons.

Scrawl is a combination between the old and new; mixing hand-drawn illustrations with computer graphics and code. We’re treading this fine line as we believe this is one of the things that makes us unique.

I drew a couple of speech balloons by hand – these always look better when created this way as they are less uniform.

After scanning my illustrations, I used the automated tracing function in Illustrator (Object > Live Trace…) to convert them to vectors. I created a few balloon types to use.


Step 3 - Setting up the document

STEP 3

It was now time to open an iPad Mag+ template document.

Before I start working, I like to change a few things. First, I right-clicked on the rulers to change them from the default option to Pixels (as we are designing for web).


Step 4 – Use transparency

STEP 4

Select Edit > Transparency Blend Space > RGB.

This is important if you plan to use transparency in your work and don’t want the colours to become dull (again, relevant since we are designing for web). See the next step for an example of why this matters.


Step 5 - Colour difference

STEP 5

Here’s an example of why selecting the right colour space is important.

Colour difference becomes apparent when using transparency – as shown here, where the left side of the image is set to CMYK and the right side to RGB.


Step 6 – Output settings

STEP 6

In the Mag+ panel, I’ve selected the Mag+ Settings tab. I’ve checked Output PNG images Only, as PNG keep transparency data in them.

They don’t need compressing, so aren’t downgraded when exported – PNG is also the file type Apple recommends when creating content for iOS (rather then JPG).

Also under the Mag+ Vertical tab, I’ve punched in the ID & Name of the vertical.

Now that the document is ready, I saved it and started laying out.


Step 7 - Typesetting

STEP 7

Since I wanted the text to scroll continuously, the obvious way to position it was on the A-Layer (which is used exactly for this).

I’ve used a san-serif font for easy reading on screen and did a few tests regarding the size, kerning and line height. When I was happy with the result, I set up the baseline grid and laid out the text in paragraphs. That part took the most time.


Step 8 - Laying out the B-Layer

STEP 8

I wanted the portraits of the interviewer (myself) and the interviewee (Jason) to keep the same position – one opposite the other while the Q&A in the balloons pass between them. I chose to position the portraits on the B-Layer.

Content positioned on the B-Layer doesn’t scroll when scrolling the A-Layer and instead remains at the same place.


Step 9 - Laying out the balloons

STEP 9

Next, I returned to the A-Layer and added the speech balloons. Since they were vectors, I was able to easily change their size and fit them perfectly.

I’ve coloured the Q&A in different shades of grey to make it easier for the reader to distinguish between them.


Step 10 - Extra content

STEP 10

There are three break points in the interview where we stop to show some of Jason’s artworks.

At these points the text is suspended, and since I want the reader to pay attention to the artworks, I decided to hide the portraits of Jason and myself.

The A-Layer floats above the B-Layer, so hiding the portraits was easy to do. I added a white image to the A-Layer – when this scrolls over the portraits, it hides them.

I coloured the white areas red in the screenshot, so they will be visible. You’ll see that I used an alpha gradient effect. This was done to ease the disappearance of the images below when the A-Layer goes over them.

Since we chose to output the images as PNG, they’ll be saved with the alpha gradient. This effect wouldn’t have been possible to create with JPGs.

When the reader continues scrolling down, the image scrolls as well – and the portraits are revealed again.


Step 11 - External HTML content

STEP 11

One of the images mentioned previously shows Jason’s work process, and illustrates how he creates a scene in one of his comics books.

I wanted the images to change when tapped. This can be achieved easily and without the need to write a line of code with Mag+, but since I had a script ready that does the same thing, I decided to use it instead.

One of the great things about Mag+ is that you can embed custom HTML content really easily. We use this feature a lot in our magazine.

To do so, you just need to create a separate directory on your hard drive, where you can place your HTML file and all its assets – images, and so on. Don’t forget to prepare your images using Photoshop’s Save for web command, as the Mag+ plugin won’t resave these for you as it does with images in your layout.


Step 12 – Using a placeholder

STEP 12

You then go to the container you set as placeholder. I like to use an image so I’ll remember what I placed and where, but you can use an empty container if you wish.

Go to the Mag+ Object panel. From the Object Type drop-down menu, choose HTML. Click on the File button next to URL and choose your HTML file. And that’s it.

When viewed on your device or in Xcode your HTML file will be loaded and presented instead of the content of the placeholder.

There are some more advanced options, such as Scale content to fit block. Another nice feature is the Transparent option, which when picked will make the background of your HTML transparent.


Step 13 - Adding Links

STEP 13

Simple as embedding HTML is, the ability of the Mag+ Plugin to add links. In this case I used this feature to add external links, but links can be used as anchors to skip to other pages in the issue or even to skip to another issue.

In order to set a link, you need to choose an object. I prefer to draw a new block rather then use an existing one for links.

The first action I did was to make sure I’m on the right layer (A-Layer in this case). I then drew a clear rectangle (no fill and no outline) over the text where I wanted the link to be.


Step 14 – Testing links

STEP 14

On the Mag+ Object menu, I clicked the Linked button. This immediately creates a new blue rectangle at the same size as the original one, which is positioned in a new layer called Clickable Areas.

A new set of options will also appear on the Mag+ Object menu. Every option is already preset to link, so all that’s left for you to do is to insert the URL in the text box and test the link on your device or in Xcode. Click Fast Review under the Mag+ Vertical menu to export your finished vertical.


Step 15 - Export the final vertical

STEP 15

Once you’re finished and happy with the result, save the file – I really hope this isn’t the first time you do so. Then click Export in on the Mag+ Vertical panel to export your finished vertical.

That's it for this tutorial. The end result with the complete interview can be seen in our Power issue. Download Scrawl Magazine to your iPad or iPhone from www.scrawlmagazine.com.


About Mag+

STEP 16

Mag+ is a complete digital publishing ecosystem comprised of a plugin for InDesign CS4-CC, a powerful web-based back end, and white-labelled reader apps for iOS, Android and Kindle devices. Mag+ pioneered touchscreen publishing on the first iPad and remains the fastest, simplest publishing platform for creating content optimized for mobile devices, without the need for programming skills. For those creating custom mobile apps, the Mag+ App SDK allows developers to build on top of our core components, saving hundreds of man-hours of coding.

From publishers to catalogue marketers, design agencies and app developers, Mag+ is ideal for anyone wanting to bring beautiful, immersive content to the millions using the new generation of digital devices. Clients in a range of industries have now built nearly 2000 innovative apps, including Victoria & Albert Museum, WeSC, New York Magazine, British Journal of Photography, Boohoo.com and Hemispheres (United Airlines).