InDesign tutorial: Design a beautiful mobile magazine for the iPhone

Use InDesign to build an iPhone version of your publication.


The iPhone is not the same as the iPad. Besides the smaller display, people use it differently – reading in short bursts of time throughout the day instead of long sessions in the morning and evening. And, crucially, there’s a vastly bigger audience.

To reach this army of iPhone users with a product they’ll read and love (and pay for), take advantage of Mag+’s new iPhone reader app and InDesign templates, which allow you to re-imagine your publication for this portable device and create an app that’s a perfect fit.

Here are the basic steps to using Mag+ to build your iPhone publication, with a great new app from technology website The Next Web as an example.

STEP 1

The Mag+ tools are free to use, and you can download them at magplus.com. Run the included installer to add the Mag+ plugin to your version of InDesign (it supports CS4-CS6 on Mac OS X or Windows).

Run the separate installer to install the Production Tool, an Adobe Air-based app that lets you bundle your issue.


STEP 2

Head over to the iTunes store and download the Mag+ Reviewer. It’s a universal app, so it will run on your iPhone or iPad. The app will let you review your layouts on an iPhone in real-time, just as users will see it in the final app.


STEP 3

The Mag+ installer places InDesign templates in a folder called Mag+ in your Applications folder (Mac) or in Program Files/Mag+ AB (Windows). Navigate to the iPhone 4 folder and open the file called magplus_template_CSXX.indt.

While you can use templates from the iPhone 5 folder to create layouts specifically for that device’s screen size and resolution, an iPhone 4-sized publication will also run on Apple’s latest handset in letterboxed form, so is a good template to start with.


STEP 4

The final set-up step is to link Mag+ Reviewer to InDesign. Open the app on your iPhone and make sure that your iPhone and computer are on the same Wi-Fi network. Next, click the Settings tab in the Mag+ plugin, and pull down the Push Review to Device menu. You should see your device name here (if not, click the Refresh icon and it will appear).


STEP 5

You’re now ready to start designing your publication. Each InDesign document is one page, or vertical, and can be as long vertically as you want. Use the non-printing Device layers to see how your layout will look in each orientation.

For iPhone, locking the orientation to a vertical layout using the pull-down menu in the plugin is a good idea, as most people find reading most comfortable while holding their phone in this manner.


STEP 6

Mag+ layouts have two primary layers: the A layer scrolls freely up and down, and appears on top when both layers are visible, while the B layer scrolls in full-screen slides. You can use either or both.

If you opt to use both, you can allow the user to double-tap the screen to hide the A layer and show the B layer. This is a great way to easily create interactivity.


STEP 7

What you put on the layers and how you use them is up to you, but here TNW’s iPhone publication has a text block on the 'A-Main Tower' layer the width of portrait screen.

This type is seven points, a very readable size, but use the Reviewer to experiment. Tap the Fast Review button in the plugin to send the layout to your iPhone and see how it looks.


STEP 8

To get an image behind type, draw a box on the ‘B – Slides Main Content’ layer and place your image in it. You can also place objects on the ‘B – Slides Pinned Blocks’ layer, if you want them to move when the user turns the device.

Use the Pinning menu in the plugin to set how objects on this layer and the A layer move if the orientation is not locked.


STEP 9

To add hyperlinks to your layout, simply select an object you want users to tap, and click the Add Link button in the Mag+ Object tab of the plugin’s panel. This will add a new box on the Clickable Areas layer.

Choose the type of hotspot you want – link opens the in-app web browser – and enter the URL. You can move and resize the Clickable Area box as you like.


STEP 10

To add a movie, select the object you want users to tap to activate it, and click the Add Movie button in the plugin. Now you’ll get both a Clickable Areas box – the hotspot that activates the media – and a Media Areas box, which is also resizable.

If you choose Inline as a video type, the movie will play in the Media Areas box. If you choose Full Screen, you can ignore this box as it will pop up and play full-screen.


STEP 11

 If you’re happy with your layout, click the Issue button at the top of the Verticals tab and select a folder to export your vertical layout to. This can be anywhere you like – just don’t use the same folder for any other material, as this is what the Production Tool will read to create your final issue file, called a .Mib. When each layout is finished, click the Export button.


STEP 12

When you’ve finished designing and exporting all your layouts to your Issue Folder, open the Production Tool. Tap the ‘+’ symbol next to the Issue Folder menu and select your Issue folder.

All your layouts will now appear in the Clipboard, and you can drag and drop them into the main window to order your issue anyway you like. You can also review the issue from here using the Review All or Selected buttons.


STEP 13

 When your issue is complete, hit the Create MIB button to generate the final issue file, which will be placed in your Issue Folder. If you haven’t already, contact Mag+ to sign a license for your app, and you’ll get a access to your own portal on our web-based back end, called Publish.

Here you can create a new issue under the Issues tab, upload your .Mib file and add a cover image. You can upload different Mibs for different devices, so every-one gets an optimised file.


STEP 14

Publish is also where you’ll build your custom reader app to serve your issues to your users. Under the Apps tab, you can upload images and set colours to highly customise the look and feel of your app. When you’re ready, just hit Generate Build button and in a few minutes you’ll have an app file you can test and then submit to Apple.


Mag+ – the flexible Digital publishing solution

STEP 15

Mag+ is the easiest and most flexible way to create designed, issue-based content for touchscreen devices: including all iOS devices, Android tablets and phones, and the Kindle Fire. Using the free tools available at magplus.com, you can create beautifully designed, highly interactive content directly in InDesign, and serve it through your own custom branded reader app in any of the stores.

You will only pay when you’re ready to publish your app, with flexible plans starting at just $999 per issue or $399 per month. And if you don’t want to produce the app yourself, Mag+ offers creative and professional services to help bring your digital vision come to life.

To learn more about Mag+, visit magplus.com