Outline of Final Presentation

Final Presentations on Tuesday, April 30

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 must 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.
    iPad Templates, Stock of Hands and Gestures available here. Feel free to use what you want:
    https://www.dropbox.com/sh/36cu2whw3skdq7v/nzgm221kYm
  • 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.
Advertisements

Deadline Reminder for Thursday, April 25

Due: final print covers and spreads

Please have full size, full color printouts ready for critique.
No mounting required. Printouts need to be actual size and in color so we can give a detailed feedback for revisions, but do not need to be expensive, high quality prints.

I will give you 1/2 hour at the beginning of class to finish preparing. Have your printouts ready for critique at 7:30.

Step 7: Usability Testing

Due Tuesday, April 23

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.

– – –

PROCESS FOR USABILITY TESTING

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.

– – – – – – –

Step 6: Rough App Layouts

Roughs Due Thursday, April 18

Create roughs of your screen layouts InDesign. 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. Also design 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.

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

Roughs due Tuesday, April 16. Remember, thoughtful organization and navigation of content is more valuable for this rough than aesthetics. 

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 the second example from the bottom. If you don’t integrate them into the map, then you can show them separately, as seen in the bottom example.


Step 4: Revised Covers and Rough Spreads

Due Thursday, April 11. Crit 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 Thursday: be prepared to present your three revised covers and three rough spread layouts in a full class critique. All should be printed out and trimmed to size (if your designs are full bleed). Covers in full color. Rough layouts can be in B&W. No mounting required. 

Step 3: Rough Cover Images, Masthead, and Type Hierarchy

Due Tuesday, April 9

3.1 Inspiration and Rough Sketches of Cover Images

Your first step will be to create a series of cover images which illustrate key themes of your feature articles. These images will eventually be used in  your cover designs combined with a masthead logotype and magazine contents highlights. You may create these images using photography or illustration, utilizing symbolism, metaphors, etc to communicate ideas in a simple impactful way. You must create your own images. No stock photos allowed.

3.2 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.3 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.

– – – –

Project Timeline for Section 01

This is a rough project schedule. Deadlines may be revised as needed. Please follow the blog posts for information about your deadlines for each class period. 

Tuesday, April 2

Introduction of Project
Due:
 Magazine Concepts and Naming Ideas
Individual meetings on magazine concept.

Thursday, April 4

Due: Strategy board with competitors, positioning matrix and target audience
Due: Content selection from competitor magazines
In Class: work on inspiration boards and thumbnails of cover image ideas

Tuesday, April 9

Due: cover hierarchy explorations with rough image placement and mast head roughs
Due: print layout thumbnails

Thursday, April 11

Due: revised covers
Due: rough print layouts, at least 3 directions for article and one other feature

Tuesday, April 16

Due: revised print layouts
Due: app navigation map
Due: app wireframes

Thursday, April 18

Due: rough app mockup of 3 screens

Tuesday, April 23

Due: final print covers and spreads
Due:
 usability test results

Thursday, April 25

Due: revisions to app screen layouts
Due: thumbnails of final presentation layouts

Tuesday, March 30

Due: final presentations, including process and final files

– – – – –

Step 2: Strategy Boards and Content Selection

Due Thursday, April 4

2.1 Your strategy board will contain the following pieces:

Competitor Research: make three columns for different points within the concept of your magazine. You will use these to categorize the competitors of your magazine. For example, competitors of “urban gardens” magazine might include gardening magazines, urban or apartment dwelling magazines, and green living magazines. Research existing magazines in each of these categories and list them in that column along with a brief clarifying description of each magazine’s content. Aim to have at least five different competitors in each category.

Marketplace Positioning Chart: on a matrix grid, place two contrasting target audience characteristics at either end of both vertical and horizontal axises. For example, axis qualifiers for “urban gardens” might include “full scale professional gardeners” vs “small container gardeners” or “urban” vs “country” or “conventional” vs “organic” or “gritty” vs “sophisticated” or even specify and age range. Using your research, plot each competitor in the appropriate cross-axis location on the chart. This process is often revealing of areas of target consumers that other magazines have failed to address, and you may choose to revise the concept of your magazine after doing so.

Target Audience: create personas for the readers of your magazine. For example, one persona for “urban gardens” might be 20-35 year old city dwelling hipsters who are interested in composting and growing container gardens on the balcony of their apartment. Another might be urban families who want to teach their kids about local food and maximize plant growth in a small yard. Develop three personas and include one short paragraph for each.

2.2 Content Selection

Next, utilize competitor magazines that have similar content to your proposed magazine and select articles, as well as other feature content that you want to use in your layouts. You will not be replicating any design or images from this borrowing, only raw text content. If you are referencing a magazine published online, you may be able to copy and paste some text. Otherwise you will need to retype the content from a printed magazine.