WEEK 9: Multimodal Narrative
(October 14-18)

To Do This Week:

In Class:

Recipe Design:
Recipe Sec 01 List
Recipe Sec 02 List

  • Remove all margins and widths on children of grid – <li>
  • Grid-gaps should be in pixels
  • Close elements!
  • No elements other than <li> inside lists!

COLOR: 60/30/10 Rule:
60% Primary Color – based on the overall feel of the site
30% Secondary Color – based on relationship to primary color  in scheme
10% Accent

*white and black are colors

Typography
Typography demo
/ demo PDF

Recipe Projects – feedback

Notes:

Reminders before Submitting

  • validate your project (validate often!)
  • resize your images for the web (under 1000px wide)
  • 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 two media queries, but you may have as many as you need
  • pay attention to visual hierarchy at all levels. make a difference in the typography to distinguish types of content.
  • 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

*EXTRA CREDIT: 
Download this zip folder: Mr. Potatohead (3 points extra credit if you complete the assignment (assemble the images) using position absolute. Upload to the server and send me the link – just FTP the potatohead folder with your CSS changes.

I will also give up to 3 points extra credit if you apply Visual Hierarchy principles to the Blackbird project. Just make the changes to the stylesheet and send me a link describing the changes you made.

Multimodal Narrative Project– 15%

  • Multimodal Project Idea (due October 18) 
    send me your idea and design/navigation approach on Slack by the end of the week
  • Multimodal Responsive Structure (due October 25)
    submit on Canvas your responsive structure with colored borders of elements, dummy text and placeholders
  • Multimodal Final Design (due November 8)
    submit on Canvas your final design with complete media and  text (1000 word minimum).

This project is for you to use the skills you have learned so far in this course to create a multimodal narrative that combines writing with integrated multimedia in a well-designed, functional and responsive website. The term “narrative” is used loosely. This can be any work of writing – documentary, fiction, journalism, mock journalism, personal essay. However, the text should be a minimum of 1000 words and in the form of multiple paragraphs with a header title and sub-headers for different sections (optional). The media should support and be integrated with the text.

Suggested Steps for this Project

  1. Research your idea and gather material. You can use ChatGPT for this.
  2. Sketch out your site designs on paper or with Figma.
  3. Create the HTML with a responsive structure, placeholder images, lorem ipsum text. You can use AI tools for this.
  4. Create the images/media and a minimum 1000-word, copy-edited text to fit your design sections. You can use AI tools for this.
  5. Apply principles of Visual Hierarchy in the CSS design to the site.
  6. Add the content to the site (text and media).
  7. Refine the visual design to reinforce the content and navigation hierarchy.
  8. If needed, add interactive effects with small bits of JavaScript using an AI coding tool, like ChatGPT.

Navigation:
Your site should have a designed navigation bar with at least two pages – the main page and an about page with information about you the author. You may break up your narrative into multiple pages with links in the nav bar. For example, if your topic is a band or musician, you might want to break up the narrative into pages of different periods or albums.

Design:
Apply visual hierarchy in your CSS design so that color, typography, layout best expresses your content.

Media:
Along with the text, you should illustrate your page with images and/or other media, like audio, video or gif animations.  I do encourage you to use AI tools like Chat-GPT, Midjourney or Dall-e-2 for image, text generation and some coding. Using these tools are not to replace your own ideas, but to extend and realize them. You are NOT required to use AI tools at all, but increasingly these tools will be used in the workplace so you might start to get some experience with them. It will also make this project fun!

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

  • responsive design
  • visual hierarchy
  • typography
  • color
  • layout
  • HTML and CSS syntax and formatting
  • integrated media (images, sound and/or video*)
  • narrative design – integrating design for story

*note: if you are not hosting video on the server and using YouTube or Vimeo, you will want to use the “embed code” from the Share button of those platforms. Just paste the code into your HTML and stylize the “embed” tag as you would any other element. To make the <video> or <embed> elements responsive, just set their widths to 100% in the CSS.

Ideas:

  • a multimedia narrative about a real or fictional business that tells the story of a product or service
  • a sequential multimedia narrative on how to make or do something
  • an non-fiction multimedia narrative about an important issue or topic
  • a current or fictional multimedia news story
  • an multimedia narrative about a work of art/media or a moment in history
  • a personal or family background multimedia narrative
  • a multimedia biography of friend, family member, artist, sports figure, historical figure, etc
  • a multimedia public service announcement or message site  (about an issue of concern).

Required “About Statement” with your Project:
Include in the “about” page with a one paragraph statement about the project. 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. Also include information about any AI tools used. This statement is for you to properly document your work for your portfolio.

Multimodal Narratives

Inspiration:

Example Student Projects:

AI  Coding

Dynamic AI Co-Creation: A Human-Centered Approach

AI Writing Models

Be specific about style and desired outcomes.

Generative Image/Video Models

  • Stable Diffusion – An open-source AI model that generates detailed images from text prompts, allowing for customization and fine-tuning by users.
  • DALL-E 2 – OpenAI’s image generator that creates realistic or artistic images from text descriptions, known for its high-quality and creative outputs.
  • Midjourney – A powerful AI tool for generating imaginative and artistic visuals from text prompts, known for its unique stylistic capabilities.
  • RunwayML – A multimodal creative platform that offers AI-powered tools for image, video, and audio generation, with a user-friendly interface for artists.
  • Stability AI – Procedurally generating soundtracks, Foley effects, ambiance, and audio textures.
  • Pika Labs – A tool that generates videos from text descriptions, useful for creating quick concept videos or adding motion to static images.
  • Synthesia – A platform for generating AI-driven video content with virtual avatars, often used for corporate training, marketing, and personalized video messages.
  • Luma AI – A tool for generating realistic 3D models and environments from photos and videos, which can be used in video production and virtual reality.

Image Editing/Transformation Tools

  • Adobe Firefly – Adobe’s generative AI tool that enables image generation and editing with advanced features integrated into the Adobe Creative Cloud suite.
  • RunwayML – Besides image generation, RunwayML provides advanced editing and transformation features, allowing users to create animations, apply filters, and more.

Sketch-to-Render Tools

  • Vizcom – A sketch-to-render tool that allows users to upload rough sketches and convert them into polished 3D renders or detailed concept art using AI.
  • PromeAI – An intuitive AI tool that turns hand-drawn sketches into fully rendered images with impressive detail, often used for creative and design projects.
  • Clipdrop Stable Doodle – This tool combines basic sketches with AI’s ability to transform them into detailed, high-quality images, leveraging Stable Diffusion technology.
  • Scribble Diffusion – A fun, easy-to-use sketch-to-image tool that allows users to convert hand-drawn doodles into detailed images using the power of AI.

Image Prompts 101:

  • Style (name artists, genre or describe style) – “In the style of…
  • Describe lighting
  • Describe mood and emotions
  • Describe camera angle and position (birds-eye view, etc)
  • Describe film types and stocks
  • Output resolution keywords:  8K , 4K , photorealistic , ultra photoreal , ultra detailed, intricate details etc
  • Use other images as prompts
  • Describe order and hierarchy of details 

Building a Standard HTML5 Page Template

Prompt Template:

Create a basic HTML5 template with a responsive, mobile-first layout consisting of a header, main section, and footer. Ensure the webpage is set up for English speakers. 

In the main section, use CSS Grid to create [number] columns for content. Please include ‘lorem ipsum’ text as placeholders for content sections and add comments to explain the structure.

Make sure the site content does not stretch beyond 1200px width and that that the grid collapses to one column in the mobile view under 600px. Define breakpoints for mobile (less than 600px), tablet (601px to 1024px), and desktop (more than 1024px).

Building a Horizontal HTML5 Page Template

Prompt Template:

“Create a flexible HTML5 horizontal-scroll template with a fixed header and footer.  The header should have a nav bar with anchor links. Ensure the webpage is set up for English speakers. 

Inside the horizontal scrollable section, create [number] content divs that are 100% of the browser window. Give each div different background colors.”