Category Archives: Designing the Magazine Experience

Magazine Design Inspiration

Good inspiration site for tablet design:
/ / /
Good inspiration for magazine covers:
/ / /
I like this site for type inspiration, but it also had a magazine “category”:
/ / /
A few case study projects I came across on Behance:
/ / /
These are print publications, but I drool over their use of layout, type and simple color:
/ / /
Good overview of the “elements of a magazine page”:

Invision Code

The rep from Invision gave me a code that will allow you to have a free, upgraded  version of the app.

You need to use your school email and sign up here:

The code is: 56-73-13-19.
If you already have an account, and want to be upgraded to this full free version, send an email to Nadav Reis, our rep at InVision:

Grading Criteria

Following are the line items on my grade sheet for the project. Each item will receive a grade on a 4.0 scale. All items will then be averaged together and converted to a percentage grade.

– – – – – – –

Research, Competitors, Content and Naming Exercise

Inspiration, Sketching, Multiple Concepts to Arrive at Solutions

Use of Mapping and Wireframes to Understand Tablet Navigation

Usability Testing:
Completion, Revisions, Visualization of Findings

Fluid Design:
Rules and Alternate Layout for at least one page

– – – – – – –

Illustrating Ideas:
Creation of Cover Images, Communication of Article Content

Cover Layout:
Consistent Masthead Design, Typographic Hierarchy on Covers

Overall Experience: 
Navigation, Typographic Standards, Organization and Grid

Page Layouts:
Met Required Pages, Use of Space, Flow of Content for Interactive

Final Presentation:
Layout, Design of Portfolio Spread, Completed All Elements


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.  You may also provide any other files to demonstrate your interactive mockup, if applicable.

  • Strategy Board including  competitor research and naming exercise.
  • 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 2 issues, utilizing a common masthead, shown together on one page.
  • Infographic map of app architecture and wireframing.
  • Usability test results, presented visually.
  • Layouts within app, shown in multiple states on a tablet screen. You were required to produce at least a table of contents, two articles and other other type of content such as an infographic.  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.
  • Page detailing your fluid design rules, and examples of an alternative layout in horizontal iPad format and one other device.
  • Utilizing selected 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.

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