This is a three-session project designed to exercise your content-generation, type and composition skills for interactivity.


Bring in three real world examples of design you really, really love. Bring in three examples of design you HATE. These can just be JPGs.


Base your project on something you find fascinating. This project seems to turn out best when it’s NOT related to art or design. My suggestion is to delve into history or science and nature. Even better: base your article on a place you can visit. Examples at bottom.

  1. Find an article for a four-page editorial piece (400–800 words).
    • Look for an editorial piece, not a marketing or publicity piece. Editorial articles are journalistic: they’re not trying to sell you anything.
    • You may use content from editorial websites or editorial print publications.
  2. Go snap some photos or draw some illustrations to use as visual content.
  3. Research periodicals (preferably interactive) in which your article might appear.
    • Questions to ask yourself:
      What is their intended audience?
      What defines their look and feel?
      What kinds of typefaces do they use?
      How do they use imagery?
    • Most importantly, focus on how the articles are structured.
      What’s the hierarchy?
      How many type treatments are used before the article even begins?
      Do they use sidebars? Infographics? Illustrations as well as photos?
  4. Sketch wireframes of a four-page article to show structure and interactivity.
    • Questions to ask yourself for discussion:
      How does your reader get around the piece?
      Can I tap on something to get more information/a sidebar?
      What gestures (if any) control the flow?
    • Remember that interactivity means you don’t have to show everything at once: some items can be hidden until the user triggers them!
  5. Choose a typeface family for the project. A beautiful one. An appropriate one. A versatile one. A workhorse.
    • Research your face’s origins and designers. I want to know who made it, for what foundry, what year, and if the typeface was based on any pre-existing face.
  6. In Adobe InDesign (or Illustrator or Sketch), create a new document.
    • Set it to the resolution of the tablet of your choice, either portrait or landscape. (You can find tablet resolution comparisons here.)
    • Establish a grid and pull in your text based on where you placed it in your wireframe.
    • Start styling your type. Include multiple levels of typographic hierarchy that you deem appropriate: headline, subhead or slug, deck (introductory) text, pullquotes, calls-to-action, what have you.
    • Don’t rely on point size or pixel size of the type to determine the best size for your copy. Use your eye.
    • You needn’t yet pull in your imagery (unless you want to get ahead of the game). We’ll start next week by reviewing your typesetting.

Student Examples

These are final versions of this project. You’ll be handing in prototypes like this in Session 04.

Not enough of a challenge? Done a lot of editorial pieces before?
Push the interactivity and/or the idea of what device this might be on. You can even imagine it to be prospective technology…


  1. A PDF file containing:
    • the results of your research
    • preliminary content
    • wireframes
  2. name it firstname_lastname_best_01.pdf.
  3. Drop this in my dropoff folder before class two.