WEEK 10: Navigation and Interaction
(March 22-26)

To Do This Week:

Assignment: Plan and sketch designs for Narrative Project


Video Lecture:


Zoom Class

Recipe Projects List

Narrative Projects 
Part 1:
DUE Tuesday 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”

Brainstorm ideas for Narrative Projects

Skrollr overview / other scroll options


Notes:

CSS Grid:

Tabs/Buttons/Breadcrumbs:

Scroll:

HTML5 Audio and Video

JavaScript/jQuery

jQuery

jQuery and JavaScript Plugins:

Review Fixed, Relative and Absolute Positioning


Narrative Project 15%

Part 1:
DUE Tuesday 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

Inspiration:

Example Student Projects:

Spring 2020 Projects

Fall 2019 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 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.