WEEK 9: Narrative Design
(March 15-19)

To Do This Week:

Read: Scott McCloud, Blood in the Gutter

Recipe projects DUE Friday March 19th
Recipe Projects List

Video Lecture:

Zoom Workshop:

Brainstorm ideas for Narrative Project
Recipe Projects


Recipe projects DUE Friday March 19th
Recipe Projects List


  • name your folder “recipe” and make sure you have the file named “index.html”
  • validate your project (validate often!)
  • make sure your stylesheet is mobile first, followed by media queries for larger sizes
  • do not copy all css for media queries, only css that you want to change
  • img {width: 100%} will take care of responsive images as long as images are inside an element
  • you need at least one media query, but you may have as many as you need
  • pay attention to visual hierarchy at all levels
  • apply css styles to links
  • have a footer with link(s) to your source(s)
  • format your html and css so that it is readable: tab in for nested elements, keep alignments


Narrative Project 15%

Part 1:
DUE Thursday April 6th (by class time) – nearly complete Narrative Project for pod critique (10% of final grade) 
Part 2:
DUE  Tuesday April 13th- the final Narrative Project for grading 

Folder name: “narrative”

Build a responsive, 1-5 page website that follows a sequential path or linear progression. For example: a how-to sequence or instruction,  a story, a comic, a brief biography, a narrative about a past event.  You must include text, images and/or other media, like audio, video or gif animations. In class, we will discuss narrative sequencing, navigation, visual rhythm and hierarchy along with the basics of responsive design and scroll animations.

Your grade in this assignment will be based on your effort and thoughtful consideration of:

  • responsive design
  • typography
  • html and css syntax and formatting
  • sequential content (text and media)

Brainstorm ideas…

WORKSHOP: Narrative Projects

  • gather media and create site architecture – index cards
  • design for visual hierarchy – sketch plan
  • build structure and navigation/pagination of site (wireframe) – html, colored borders
  • add media and design elements – css, color and typography
  • add interactivity and effects – javascript/jquery
  • revise and edit: narrative, closure, time frames

Scroll animation: Skrollr


Example Student Projects:

Spring 2020 Projects

Fall 2019 Projects


  • site for a real or fictional business that tells the story of a product or service
  • a narrative demonstration on how to make or do something
  • a multi-linear original story (e-lit or hypertext)
  • a multi-linear adaptation of  a public domain story
  • a work of multimedia journalism
  • a short multimedia exploration of a moment in history
  • a short multimedia biography
  • a mock online newspaper
  • turn an essay/assignment from another class into a website
    (permission required)

Statement with your Narrative Project:
Include a one paragraph statement about the narrative project on your site or as an about link. What was the nature of the assignment? Describe the project idea you settled on and why. Describe the specific learning processes, challenges and/or outcomes in making this website. This is for you to properly document your work for your portfolio.

Sites must be completed for In-class Critique 10%
It is important that you finish a majority of your site’s design and content for the scheduled critique/usability testing. On this day, I will grade this portion of your project.

Narrative Project grading will be based on the following criteria:

Design 30%

  • Layout, imagery, color and typography help create “narrative context” for your story.
  • Overall design is thoughtful. Layout, color and imagery evoke information (difference) and context (repetition) effectively.
  • User interaction is engaged in meaningful ways
  • Images are compressed for the web
  • Spelling and grammar are correct.

HTML5 and CSS3 mark-up 30%

  • HTML and CSS mark-up is valid, hand-coded, and well organized
  • You have an index.html file that is the home page.
  • You use one external CSS style sheet.
  • Your own comments are in the HTML mark-up and CSS to explain your process.
  • You include meta tags for keywords and description are on the index.html file.

Content 30%

  • Content is your own and complete. Images that are not created by you or not in the public domain must be clearly labeled with ownership and copyright information. For Youtube clips, for example, simply reference the creator and link.
  • Your site relates a narrative or story with images, text and some form of time-based media – sound and/or video.
  • Information architecture, layout , design and navigation allow the user to experience a “closure” between discrete elements – text boxes, images, media, pages.
  • Project Statement – Include a one paragraph statement about the project on your site or as a link. What was the nature of the assignment? Describe the project idea you settled on and why. What specific learning processes/challenges you had in the execution, etc. This is for you to properly document your work for your portfolio.