VICO 3173 / 5173 Assignment

NPR Gold Rush Photo Essay

Let's build a webpage that will be a scrolling webpage narrative. Design and build a photo essay for NPR using their original reporting, photos and audio.

2009 NPR Story Download NPR content Download the new single-page scrolling website templates

Some must-have content

  • Head: Mongolians Seek Fortune In Gold, But At A Cost
  • Tag line: A 21st-century gold rush is taking place in Mongolia.
  • Date: September 7, 2009
  • Reported by: Louisa Lim
  • Photographs by: Ariana Lindquist for NPR
  • Audio producers: Melissa Marquis, Kevin Wait
  • Producer OR Produced by: your name here
  • NPR logo

Some media, design, content ideas

  • Story
  • Photos
  • Photo carousel
  • Photo bkgds
  • Photo layout/montage
  • Captions
  • Pull quotes
  • Font choices/subheds/sections
  • Color choices
  • Audio
  • Audio slideshow
  • Map

Assignment: Build a narrative, scrolling webpage for this NPR story with their content

  1. Read the story, listen to the audio, look at every photo. Understand the story.
  2. Read, listen, look AGAIN, but this time for visual story-telling ideas -- take notes and save them in a 'notes' folder.
  3. Sketch out thumbnails/rough wireframes (including the media content placement) -- save at least three sketches in a 'sketches' folder.
  4. Think about how you will design and build a visual, scrolling narrative with a beginning, middle and end.
  5. Edit down your photo choices to use at leasst five images on your page, and RESIZE each selected image to 2000px MAX width. Save ONLY the selected/resized photos to your 'images' folder.
  6. Do a rough first version of your layout -- one section at a time -- using Bootstrap's "container > row > cols" layout grid.
  7. Save it, test it, and then... Start over on a new 'blank' canvas!

Your narrative can use original content, too, like an audio photo gallery.


I will be looking for:

  • Good coding -- you started with a blank canvas, your psge is responsive, proper indenting of HTML code, use of annotations and spacing, use of Bootstrap's "container > row > cols" for your layout, and organized project folders.
  • Good content -- a clear theme, a compelling narrative about your places, use of your own work for the text and images.
  • Good design -- customization, use of color, fonts and typography and strong images.
  • If I don't see Bootstrap's "container > row > cols" layout grid with annotations, you will get an F.
  • If I don't see at least three versions of your project html files, you will get an F.
  • If I don't see a neatly organized project folder with 'css', 'images', 'notes' and 'sketches' folders, you will get an F.
  • If I don't see an 'images' folder with only your selected and resized photos, you will get an F.