Narrative Project notes

Narrative  – 15%

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 an historical 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)

Inspiration:

Example Student Projects:

 

Ideas:

  • 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 Final 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.