Category Archives: Magazine Process

7. Liquid and Alternative Layouts

Your goal will be to apply Liquid Layout rules to at least one screen of your app, and then try creating horizontal iPad versions and an iPhone version using Alternative Layouts.

Getting Started with Liquid and Alternate Layouts in InDesign

6.2. Usability Testing

Process for Usability Testing:

STEP 1: Produce your mockup using one of the methods listed previously.

STEP 2: Find at least three “users” to test on. These users should not be classmates and ideally, should not be designers. We are looking for unbiased perspectives here. The less knowledge they know of this project, the better.

STEP 3: Without telling them the concept of your magazine, ask each user to briefly explain what they think the purpose or theme of this publication is.

STEP 4: Ask each user to perform at least three pre-written scenarios. These tasks should be things they could feasibly do with the content you have available. For example, you suggest a scenario in which they want to learn how to identify a barn owl. They would need to determine what section to go, figure out what article to look at and navigate to that piece of information. Take detailed notes of your observations, paying special attention to their first instincts and errors when trying to navigate your app.

STEP 5: Produce a written and visual report of your findings. You will have one page of your final presentation that overviews this testing. Using screenshots of the pages of your app, digitally draw lines over the top to point out observations and problem areas in your navigation. Your findings will be presented in this infographic-esque format.

Some helpful articles on usability testing:
Running a Usability Test

6.1. Usability Mockups

Essentially, usability testing is the practice of showing a mockup of your to non-biased potential user and observing how they interact with your design. You should have initial designs for all pages of your app needed to complete this. While you do not have an actual functioning app, you can still perform some basic usability testing of your own. This should give you some insight into whether the layout, navigation and concept of your app is clear to users. As we covered in class, there are a couple ways you can execute this test:

Options: Digital Prototypes

Clickable PDF: If you use only interactive PDF tools InDesign such as rollover buttons and clickable links to content, you can save your app as an interactive PDF file. When viewed in full-screen mode on a computer, your user can actually click around on these buttons in Adobe Acrobat. You could also send this to an iPad or other tablet device and accomplish some basic navigation. The important tools for this are located under Window > Interactive in InDesign. You will need to use the bookmarks palette to bookmark all the pages in your file and then use the buttons palette to create navigation buttons and point them to those pages.

Pros: easy way to do some basic linking and turn flat designs into a prototype. Cons: only accessible via web app, must be connected to internet to use.

POP: Protyping on Paper: Need to download an app for this, basic version is free, meant to link together sketches.

Adobe Digital Publishing: For the more adventurous, you can play with the digital publishing tools in InDesign. This enables you to do some basic screen scrolls, pull out navigation, slide shows etc as demoed in class. It’s possible to preview this on an iPad if you have an Adobe login, login within the Folio Builder in InDesign, and if you have the Adobe Content Viewer App on your iPad. The process of Bookmarks and Buttons is the same as the interactive PDF option, but the tools to create Scrollable Frames and Slideshows are located in the “Folio Overlay” palette. Here are some helpful videos on Digital Publishing Suite:
What is Adobe Digital Publishing Suite?
Collection of Videos on Learning Digital Publishing Suite
Adobe TV Tutorial: InDesign Layout to iPad App

 Analog Option. The Finger Point Method Using Prints

Here’s the old school way of usability testing used for websites at times. Print actual size print-outs of your screens, including duplicates of each page with in-between states such as a nav bar pullout. Starting with the top page, your user can then point with their finger where they want to click or swipe. When they “click”, you provide a corresponding printout for the page view they have “navigated” to.


Interface Origami

Interface Origami
Here’s an inspiring alternate way to bring life to your paper prototypes:


5. Second two content layouts

Having already established universal navigation and page layout structure, design roughs of your two other required pieces of content.

Second Featured Article: primary page and a subsequent page of the article.

Interactive Dependent Feature: content that utilizes the interactive environment in the way it structures, organizes and reveals its information. For example, an infographic or  step by step recipe. Show at least two steps of that interactivity.

4.3. Rough first two layouts


Creating roughs of your first two layouts in InDesign. Remember, these layouts should be organized  to make sense for an interactive environment. They should also consider navigational elements for several layers of navigation. Type sizing and styling considerations may change to fit the space of a screen and design elements need to be positioned and sized according to how a user’s finger’s might interact with them. For example, if a user is meant to push a button to advance then it can’t be too small to tap with a finger.

When we refer to each “layout” in this assignment, we are not necessarily talking about only one screen per layout. Because you are designing for an interactive environment, you not be trying to jam your content onto one screen view. Content can be paced and stepped out across multiple pages that you navigate to, or be revealed as you scroll or swipe. You may begin by developing two screen views for each “layout”, one for the initial view when you arrive at that piece of content and one view of how that content looks as you scroll, click or swipe.

Keep in mind, it will be necessary to design the same screen in multiple states for our next steps. For example, show what a slide-out or pop-up looks like both when in use and when retracted. Don’t worry about alternative formats or sizes for now.

Suggestions for those screens:

Table of Contents: likely the first app screen you see after the cover, this will set a precedent for the content organization and navigation within your app. You will need to use those other content headlines you pulled from other magazines here to show all the possible content of your issue. You might show a navigational breakdown of sections here. For example,Time magazine has many sections: Politics, World, Technology, Business, Arts and Life. The Arts section has a top page that overviews further division within that section: Books, Music, Theatre, Movies, Exhibitions, etc.

One of your Featured Articles: primary page and a subsequent page of the article.

4.2. Universal Branding and Navigation Elements

Before designing any internal pages, you should consider how branding and navigational elements will appear consistently on all content pages.

Universal Branding: beyond the cover, you will need to find a way to apply simplified branding to all pages. Sometimes it is a smaller version of the masthead, sometimes only one letter or simplified version of the masthead or other graphic elements.

Universal Navigation: your content map should hopefully inform what is needed here. As the designer, you need to give the user the ability to jump to other content in the magazine directly from any page, rather than always going back to table of contents or swiping page to page. Did you determine that there were sections to your magazine in the content map? If so, the universal navigation needs to give the user the ability to jump to any section. Sometimes this navigation is a consistent nav bar, a pull out menu or a certain place on the page with navigational “buttons”.