Final Pres Content Examples

As requested, here are samples of some of the pages from past student’s presentations.

This is just a selection of some, and doesn’t represent all the content that should be in your final presentation. Please check the bulleted list published previously for that. 

Deadline Reminder for Tuesday, March 26

Deadline Reminder for Tuesday, March 26

Due: revisions to app screen layouts
Due: usability test results
Due: thumbnails of final presentation layout

In class, we will discuss your findings from your usability tests, and get feedback for your final presentation.

Outline of Final Presentation

Thumbnails or Roughs of Final Presentation due Tuesday, March 26
Final Presentations on Thursday, March 28

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.

Step 7: Usability Testing

Due Tuesday, March 26

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.

– – –

Deadline Reminder for Tuesday, March 12

Due: revised print layouts
Due: rough app mockup of 3 screens

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.

Step 5: App Architecture and Wireframes

Due Thursday, March 7

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.


Revised Schedule for Section 02

Adjusted the schedule here because of snow days. Also note that we have added an extra day onto the schedule after spring break.

Tuesday, March 5

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

Thursday, March 7

Due: rough app navigation map and wireframes

Tuesday, March 12

Due: revised print layouts
Due: rough app mockup of 3 screens

Thursday, March 14

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

Tuesday, March 19
Thursday, March 21
NO CLASS: Spring Break (woohoo)

Tuesday, March 26

Due: revisions to app screen layouts
Due: rough final presentation layout templates

Thursday, March 28

Due: final presentations, including process and final files

Step 4: Revised Covers and Rough Spreads

Due Tuesday, March 5. Presentation at Class Start. 

Thanks to those who have posted feedback for others on dropbox. I will be going through and getting my feedback to those who posted work as soon as I can get to them.

 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. 

The people have spoken!

We will NOT hold class tomorrow night.
– – –
Instead, you will get extra credit if you attend the Design Week kickoff event. That means that you also have a mandatory virtual crit deadline, meaning you need to upload files into the dropbox folder by the end of tomorrow night. This is a requirement of not having class. Here’s what is due for tomorrow’s deadline. Please make sure all of the following is in one multipage PDF:
1. Your Masthead logotype exploration
2. Three full-size covers with revised masthead direction (or multiple masthead versions if you are still deciding), article names and features on cover using typographic hierarchy (the feature article name should get top billing, and use hierarchy to list at least two other articles plus another type of feature info), and rough FPO images (or sketches of your image placed behind.
3. Grid Thumbnails for inside print spread layouts.
– – –
Also, you can bring any prints or sketches you like to the event and I can give you feedback there. 
– – –
Tickets for the event are $10 if you buy in advance online (advance means anytime before the event starts), and $15 at the door. There will be an exhibit of gig posters designed and pressed by internationally known artists, including KC’s own Hammerpress and Tad Carpenter. Posters will also be on sale. Then, there is a special screening of film about gig poster design, followed by a Q&A with the director. THEN, there is live music by local modern-folk-rock band “She’s a Keeper.”
– – –
Buy your tickets here:
http://kcdesignweek.org
– – –