Magazine design

Learning Outcomes

  • Develop a basic understanding of Adobe Digital Publishing Suite and interactive tablet design.
  • Create a magazine that can be published on the ipad in duo-orientation with interactive elements.
  • Demonstrate an understanding of good photo editing, typography, information architecture and touch design.

Download Project Package ZIP (673megs)

Assignment Overview

You will create a cover, an opening article page and a jump page for a magazine layout to be displayed in an iPad in both horizontal and vertical orientations.

Begin by finding a story which you will art direct. You can find a feature story on NexisLexis or through other internet resources. Length is not important; you will not layout all the text in this design. The story can be told in an alternate format such as Q/A, numbered list or other format. It must be a feature, and it should be from the last year. Then you will art direct the words by looking for images that support the text. You cannot use multiple images from a layout from a single source. Don’t choose anything that you can’t find images to support. You can choose any feature story. Your images need to be high res (150+ dpi) or you can’t use them large in size. Many internet images will be 72 dpi.

Your next step is to define a magazine you would like to design. You will define the look, the market audience and the demographic for your magazine. You will define this information in your rationale. You must create the flag/nameplate/name and look for your magazine. It cannot be a currently existing publication. The cover will include date information (month, year), and a cover line for your story.

DEADLINES

  1. Cover Drafts to Server: 04.04
  2. Inside First Page Drafts to Server: 04.11
  3. Final Due On Server: 05.07 (midnight) – No redo

GRADE PERCENTAGE

  • 20% of total grade

GRADING

  • Typography: choice; design of display headline; readability and choice of body and accessory types
  • Layout: use of grid, margins, white space
  • Eyeflow, visual hierarchy, alignments, accuracy, spelling
  • Interactivity operation in Overlay Creator

DELIVERABLES

  1. Cover (V/H)
  2. An interactive link from your cover to the inside opening page
  3. Opening Page +1 Interactive Element (V/H)
  4. Jump Page (V/H)
  5. Self Evaluation
  6. Rational
  7. Post on blog (JPGs and PDF)

RATIONAL

  1. Design strategy including who your magazine’s audience is, demographic, visual direction, choice of name
  2. Choice of typefaces
  3. Visual source files and reasons why you chose the photos
  4. Your alternative story; why it works, how you got the information or visuals

ON THE SERVER

  • JPG’s of all pages
  • Original Article
  • A PDF of all your pages
  • Your rationale and self-evaluation
  • Sketches/Roughs
  • A properly named folio folder with your all your content, including fonts and linked images.

ON THE BLOG

  • JPG’s of all pages
  • A link to a PDF of all your pages
  • Your rationale
  • List of tutorial and inspiration links

REQUIREMENTS

  • Your layout must include an interactive alternative story form (slideshow, video and/or audio, sidebar, charts, lists, animated timeline), whether or not the original article had one.
  • You must have both a vertical and horizontal layout for each page, use the new alternate layout options you just learned.
  • You must have a link from a cover line to your inside spread.
  • You must name your own magazine and design the magazine wordmark.
  • You must decide the voice and target market of this brand new feature magazine you are creating, and this must be explained in your rationale. You can NOT say, for example, “This article would be in Vogue.”
  • You will have dummy text files for the main story if you cannot get the story online.
  • You must write a new headline and deck head. Write captions for any images
  • you choose.
  • Design this in InDesign.
  • Include a copy of the original article.
  • Provide a source of all images used
  • Establish margins and column grids. Detail those in your rationale.
  • You must create an Adobe ID and share your folio with your Professor.
  • Any photography must be at least 150 ppi.

DESIGN ADVISE

  • Determine first how to tell this story. How can you create a strong visual/verbal connection? Search first for visuals to use in your layout. Visuals can come from any resource including internet resources, but make sure the quality is high enough to display well when printed. You can also scan images to use in your layout. Color will be an important part of your layout.
  • You must give detailed source information for each visual used in your layout—this means giving the source, the Web address, iStockPhoto, Corbis or Getty ID number, the magazine or other source from which it was scanned.
  • Do your research on the current best practices for tablet design. Check out posts from Information Architects and UX Magazine to start with. This is not print but many of the classic concepts of graphic design apply.

Cards have a fixed-size presentation canvas. You can position your information within this two-dimensional space to your heart’s content (allowing for beautiful layouts), but you can’t make it any bigger. Users have to jump to a new card to get to information than won’t fit on a single card. HyperCard was the most famous example of this model.

Scrolls provide room for as much information as you want because the canvas can extend as far down as you please. Users have to jump less, but at the cost of a less-fancy layout. The designer can’t control what users are seeing at any given time.”

Source: Jakob Nielsen

  • Decide what kind of grid you want to work with. Make sure you’re designing your grid and your layout from the strength of the pictures you’re working with. Make sure the pictures will work in the spaces in which you designate their use. (i.e. don’t designate a horizontal picture for a vertical picture space.) You are the Art Director here.
  • Choose your typefaces carefully. The headline should attract reader interest to the article. Make sure you choose a contrasting typeface for captions so they don’t blend in with the body text. Make sure to use photo credits. You can make up a byline if you choose. Your alternative copy should also use a contrast type.
  • Use the library function for anything you want to create and use repeatedly.
  • Use the Paragraph Styles to define your basic type: body, captions, text heads, deck, even headline.
  • Set baseline grid to the leading value of your body text size. Then turn on Show Baseline Grid.
  • Keep text in single text boxes and define the column in the Type Palette. Do not set up separate text boxes for each leg. Baselines should align across your pages.
  • Pay attention to widows and orphans. Eliminate them.
  • Your layout must use captions.
  • Everything should be in the sRGB color space.
  • You must have a byline and photo credit (collective or individual).
  • You must have both a primary and deck headline.
  • You must have one alternative copy feature. Sketch it in when you’re planning your layout.
  • Use strong alignments. Remember factors of readability and legibility. Use roman/book weights for text. Create contrast for captions, headlines, text heads.
  • Match drop caps to color and strongest typography of the headline.
  • Don’t stretch pictures from their original proportions.
  • Turn off auto hyphenation; InDesign > Window > Paragraph > Options > Hyphenation

RESOURCES

Lectures

Templates & Examples

InDesign Tutorials

Tablet Design Pointers

Image Searches Resources – General

Image Searches Resources –  Specific

HANDOUTS