iPads, Hands and Gesture Images!

Hey all,

I needed to subscribe to Shutterstock for some client work, so while I was at I downloaded bunch of random stock that might be helpful in your presentation. There are images of hands, more iPads and gesture images. Some are vector, some are flat JPGs.

They are in the same folder as the images from the previous post. Enjoy!



iPad Templates

Here’s a link to download the iPad mockup templates. Each has a layered photoshop file to enable you to make the designs look like they have realistic highlights over top, etc. This is a link to a folder on my Dropbox, but you don’t need a Dropbox account to get these, and it will not add to your Dropbox quota.


Outline of Final Presentation

Your final presentation will be presented and delivered to me digitally, in the form of a one multi-page PDF document. Each bulleted item below represents a separate page in your final presentation. Each page should be purposely designed, utilizing a common labeling system with information such as your name, project name and name of content on that board.  In addition to the final PDF presentation, those who used interactive mockup methods for their usability testing should provide me with that interactive file (likely in the form of an interactive pdf or a .swf file) in order to get bonus points.

  • Strategy Board including target audience, competitor research, and marketplace positioning matrix.
  • A “brand board” of sorts, showing versions of your masthead logotype and typographic standards used within both print and tablet layouts.
  • Inspiration and Sketches for your cover images (keep in mind that I did not require a certain number of thumbnails, but I will grade based on your efforts, so it is to your advantage to show all sketches). These can be scanned or photographed and placed in.
  • Covers for 3 print Issues, utilizing a common masthead, shown together on one page.
  • At least 3 spreads of the print magazine, showing a primary article spread, a secondary article page, and one other type of feature content.
  • Infographic map of app architecture and navigation, plus wireframes of rough layouts.
  • Usability test results, presented visually.
  • Covers and at least 3 screens of the app, shown in multiple states on a tablet screen. How you present these and communicate the interactivity is up to you. I recommend mocking them onto a dimensional image of a tablet screen and use photos of hands interacting with the app. You can do this using stock images of tablet and hand, or if you know someone with a tablet, load up flat JPGs and take pictures of actual hands interacting.
  • Utilizing content from the previous pages, design a concise one or two page presentation for possible use in your portfolio. This will require you to be selective in what you show, and creative use of layout to present elements of both print and tablet in one view.

– – – –

Step 7: Usability Testing

Due Tuesday, February 12

You may be familiar with the idea of usability testing from the article I assigned you to read on the 99% blog. Essentially, usability testing is the practice of showing a mockup of your website or app to non-biased potential user and observing how they interact with your design. In the example from the article, these tests revealed that the navigation was not designed in a way that was understandable to the user.

While you do not have all the content of your app completed, and nor do you have an app with actual interactive functionality, 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. There are a couple ways you can execute this test:

Option 1. Using Basic Interactive Features in InDesign and Testing On-Screen 

(bonus points available for using these methods)

1A. 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, your user can actually click around on these buttons in Adobe Acrobat.

1B. For the more adventurous, there are flash based animation tools available in InDesign. These tools allow movement triggered by clicks or timing, such as a menu that flies in from the side. You can also use the buttons and hyperlinks available in the option above. When saved as a Flash file (swf) this can be viewed on screen in a browser, allowing the user to interact with it.

Option 2. 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 in various stages of use. 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.

– – –


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

STEP 2: Find at least two “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 several pre-determined tasks. These tasks should be things they could feasibly do with the content you have available. For example, you might say ask them to navigate to the feature article, or ask they to find a certain article in which they have to deduce what section to go to, or return to the table of contents, etc. 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.

– – –

Deadline Reminder for Tonight

At the beginning of class, we will have a detailed crit of near-final revisions to all of your print and tablet layouts. Please print your three print spreads out full size (11×17) and place them on your desk in front of your computer. Tablet layouts should be saved into one multi-page pdf, to be viewed on screen at actual size above your print layouts.

Please be ready for crit at class start time.

Step 6: App Layout Comps

Start digital comps of your screen layouts InDesign. Using your architecture map, design navigational elements for several layers of navigation. Remember, these layouts should match the style standards being developed in your print spreads, but be reorganized and modified to make sense for an interactive iPad screen. 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.

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.

Also, explore the use of the new “alternate layouts” feature in InDesign, which will allow you to create a landscape version of each page and envision what happens if the user turns the tablet on its side.

You will be required to design a cover plus three screens. 

Suggestions for those screens: 

  • One Cover: emulating one of your print covers, with sizing adjusted as needed and modifications made for interactivity and navigation. You can opt to make this only a splash screen that then advances to a secondary navigation screen, or perhaps the navigation / table of contents is designed into the cover, or perhaps the navigation pulls out from somewhere.
  • Section Overview Screen: top page for the section of a magazine. 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.
  • First Page of Article: Similar to the primary print spread of your article, this is the introductory screen to your feature article and should include intro graphics, title, and beginning of body copy. I recommend you use content for a different article than you did on your print spreads, in order to achieve variety within this project for your portfolio.
  • Secondary Page of Article: content / copy heavy screen of the meat of the article.
  • Other Feature Content: an infographic, recipes, quiz, etc. You can have some fun with this feature!

Your next step will be to create a “mockup” of the app that you use for user testing. In web design, this can be done on-screen or as simply as printing the screens for users to pretend “click” on. The degree that you play with actual interactivity in InDesign is up to you. If choose to do use the trial of digital publishing suite and have an iPad, you could actually preview and test on an iPad screen. If you want to simulate interactivity without the trial, you can use the flash interactivity features in InDesign and export as a swf file that a user can play with on a computer screen. A way to achieve user testing without interactivity in place is to just create screenshots and visually note where the user tries to click, although it may not be as effective.

More information on the next step, user testing, will come next class.

Step 5: App Architecture and Wireframes

Due Thursday, Jan 31

5.1 App Architecture Map

Soon we will be moving into the layout and design of the app version of your magazine. However, before you dive into the nuances of layout, you need to have an understanding of the architecture behind the navigation of your app. As you know there are big differences between how a user navigates through a printed magazine versus a website versus an interactive application. The organization and experience of how the user navigates the content should be tailored to the medium.

To do this, you will first map out the architecture of your app. In essence, this is an infographic that shows the connections of the content in your app. You are probably familiar with website maps that are commonplace in the process of web design. These are usually represented by a map made of labeled screen proportioned boxes connected by a network of lines, representing the different click paths from which a user can navigate. In a similar spirit, the architecture of an interactive app needs to mapped. However, whereas website maps only have one action for the user to initiate navigation (a click), apps have a vast array of taps, swipes, dragging, pinches, etc. This will pose another challenge as you create your architecture map: how to communicate the method of navigation.

Below, I am including a website map of a site I worked on years ago. Also, I am including several examples of app architectures I found.

5.2 App Content Placement Wireframes

As you are working on the architecture map, you should also develop some wireframes of several screens of your map. These do not need to be developed layouts, rather a basic layout of labeled boxes that suggest placement of content. There are two ways you can do this. If you like, you can incorporate it into your architecture map, as seen in some examples below. If you don’t integrate them into the map, then you can show them separately.

Step 4: Revised Covers and Rough Spreads

Due Tuesday, Jan 29. Presentation at Class Start. 

 4.1 Revised Covers

Having chosen a direction for your masthead and typographic hierarchy, revise and rollout into your three covers. Each cover should include a common masthead and outline the “contents” of the magazine. Use typographic hierarchy to communicate one feature article, two other  secondary articles, and one other type of feature content. You should also have comps of your images placed on the covers. Final size of covers should be 8.5×11, portrait. Therefore, you will be presenting three 8.5×11 covers.

4.2 Rough Print Layouts

Using a consistent standard grid from your thumbnails, first develop master page templates in InDesign by placing guidelines, rectangle frames for images, and text boxes for text. Secondly, place rough images and content into your templates, creating at least one primary intro article spread, one secondary content-heavy article spread, and one other type of feature content such as a recipe, infographic, top-ten list, etc. Final size of each spread should be two 8.5×11 facing pages, which equals one 11×17 page. Therefore, you will be presenting three 11×17 spreads.

Note 1: Don’t forget to only place images that are CMYK and of a dpi of at least 150 dpi effective dpi (not actual).

Note 2: Please place your body copy for your article into Textedit program and covert to raw text before placing into InDesign. This will assure any previous formatting will be removed. Also, please use linked text boxes in your layout, so when body copy is placed it will flow through all text boxes.

At Start of Class on Tuesday: be prepared to present your three revised covers and three rough spread layouts in a full class critique at 7:00. All should be printed out and trimmed to size (if your designs are full bleed). No mounting required. 

Step 3: Masthead, Cover Hierarchy and Grid Sketches

Due Thursday, Jan 24

3.1 Masthead Exploration

Explore the typographic possibilities for a common masthead to be used on all covers, utilizing the name of your magazine. Your masthead should be essentially a logotype and use type only, no illustration or marks. However, you can manipulate or alter the type as needed. Develop at least 3 different directions for your masthead, choosing typefaces that would communicate the theme of your magazine to your target audience.

3.2 Cover Hierarchy Explorations

Using headlines, subheads, etc. from your sample content taken from competitor magazines, develop rough explorations of organization and hierarchy of information on your covers. Each cover should have a primary feature article, which matches the cover image, and list at least two other articles plus one other type of feature info (such as a recipe, top ten list, etc). Develop at least 3 directions for the hierarchy of info on your covers, trying different type combinations to achieve hierarchy in different ways. Each direction should correspond to one of your masthead directions. Also include fpo (for placement only) images on your covers. These can be sketches, temporary stock images or roughs of the images you are developing.

3.3 Grid Thumbnails for Inside Layouts

Sketch standards grids that you might use to layout information inside your magazine, with consideration to placement of both images and type. Develop a grid that works for a primary article spread, a secondary article spread and one other feature such as an article or infographic. Number of thumbnails is up to you, but amount of effort will be considered when grading.

Deadline Reminder for Tues, Jan 21

A reminder of the following items due at beginning of class:

  • Strategy Board with competitive research (3 columns), marketplace positioning grid and target audience personas.
  • Content Selections from competitor magazines to be used in your magazines (at least 3 articles and one other feature content).
  • Inspiration board for your cover images.
  • Thumbnails sketches or “photo-sketching” for your cover images.

Just to re-clarify: you will be creating your own cover images via photography or illustration. Other mediums or methods of creation may be proposed to me. No stock photography allowed on the cover. Some stock may be allowed inside if it is purchased and of a good production quality.