WEEK 10: Navigation and Interaction (March 18)

To Do This Week:

Work on Multimodal Narrative Project: build your idea, create the HTML structure for pages.

Due Dates:

Multimodal Narrative Projects
DUE April 7th

This project uses skills from this course to create a multimodal narrative combining writing and integrated multimedia in a well-designed, responsive website. The term “narrative” can include documentary, fiction, journalism, or personal essays. The text must be at least 1000 words, divided into sections with headers and optional sub-headers. Media should complement and integrate with the text. You must include a brief statement about your project on a separate page. For example an “about” page. Describe your project, how you approached the design and the coding of the page. Did you learn anything new? What were some of the challenges?

Folder name: “narrative” with index.html

Narrative class list

  • In-class Critiques: On April 7th, the project due date, there will be in-class pod critiques of your Multimodal Narrative projects. If you do not have a complete design by this date, so that you can participate in the critique, you will lose up to 10 points on the project grade. 
  • Multimodal Final Design: Make changes to the site based on feedback in the critique and submit your final design with complete media and text (minimum 1000 words) on Canvas by Friday April 11th.

Share ideas…

Notes:

Recipe Project Notes:

Recipe class list

  • Validate HTML and CSS
  • Resize images (under 1000px width or height)
  • Typography details – apply difference and repetition
  • Add more padding on text (3-5%)
  • Avoid excessive borders; they do not help hierarchy
  • Ensure critical content is above the fold
  • Align divs and wrappers properly
  • Remove unused HTML and CSS
  • Do NOT position or change margins to fix layout problems
  • Use alt tags for all images
  • Fix media query errors
  • Avoid applying width or height to children of grid
  • Do not use decorative fonts for readable text
  • Use text-align: left for readable text

Integrated Media Techniques:

Navigation:

Tabs/Buttons/Breadcrumbs:

Scroll:

Media:

  • Audio
  • Video
  • For external videos (YouTube/Vimeo), use the embed code and style the <embed> tag for responsiveness (width: 100%;).

CSS Animation:

JavaScript:

Review Fixed, Relative, and Absolute Positioning:

CSS Grid:

Example Student Projects:

Horizontal:

Parallax Scroll:

Non-linear/Networked:

Multi-page:

Animated Scroll (Skrollr plugin):

 

Multimodal Narrative Project – 15%
Due April 7th

This project uses skills from this course to create a multimodal narrative combining writing and integrated multimedia in a well-designed, responsive website. The term “narrative” can include documentary, fiction, journalism, or personal essays. The text must be at least 1000 words, divided into sections with headers and optional sub-headers. Media should complement and integrate with the text.

Steps for the Project

  1. Research your idea and gather material (ChatGPT can help).
  2. Sketch site designs on paper or by using Figma.
  3. Create HTML with a responsive or flexible structure, placeholder images, and dummy text. Use ChatGPT if you want.
  4. Create and edit images/media to fit design sections.
  5. Apply Visual Hierarchy principles in CSS design.
  6. Add content: write text and create media.
  7. Refine design to enhance navigation and content hierarchy.
  8. Optionally add interactive effects with small JavaScript features.
  9. Include a paragraph in an “About” page describing the project, your idea, challenges, and AI tools used. This documentation is crucial for your portfolio.

Navigation and Design

  • Include a navigation bar with at least two pages (main and about page).
  • Apply Visual Hierarchy in CSS for color, typography, and layout.

Media

  • Include images, audio, video, or GIFs.
  • Use AI tools like ChatGPT, MidJourney, or DALL-E 2 for creation. Document tool usage.

Grading Criteria

  • Responsive design
  • Visual hierarchy
  • Typography
  • Color
  • Layout
  • HTML/CSS syntax and formatting
  • Integrated media
  • Narrative design

Note: For external video, use YouTube/Vimeo embed codes and ensure responsiveness with CSS.