Step 6: App Layout Comps

Roughs Due Tuesday, March 12

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: