WEEK 9: Multimodal Narrative
(October 16-20)

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

 

Burgerville

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%
Assignment description

This project is for you to use the skills you have learned so far in this course to create a multimodal article, essay or 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.

Build a responsive website for a work of multimodal writing (writing with integrated media) that is a minimum of 1000 words. 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.

Along with the text, you should illustrate your page with images and/or other media, like audio, video or gif animations. Apply visual hierarchy in your CSS design so that color, typography, layout best expresses your content. I do encourage you to use AI tools like Chat-GPT, Bard, 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!

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*)

*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:

  • an article about a real or fictional business that tells the story of a product or service
  • a sequential article on how to make or do something
  • an article about an important issue or topic
  • a current or fictional news story
  • an article about a character or moment in history
  • a personal or family background essay
  • a work of multimedia journalism
  • a multimedia biography
  • a mock news article
  • turn an essay/assignment from another class into a website
    (permission required)

Statement with your Project:
Include in the “about” page 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 Narrative Project

Inspiration:

Example Student Projects:

Spring 2020 Projects

Fall 2019 Projects

AI  Coding:

Prompts – specificity and detail!

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 a 100% of the browser window.  Give then different background colors.

 

AI and World-building

Principle:

  1. Tone – the attitude and approach you want, create a scenario and roles for the chat
  2. Format – describe the parts and structure of the response
  3. Objective – what is the larger project goal
  4. Context – is this for social media, academia, art?
  5. Examples – give an example of the response you want

example:
Tone:
You are a story coach that is knowledgable about the variety of forms that a story can take. Help me brainstorm the characters for my story.

Format:
I would like a breakdown of the characters and their backstories as well as a general description of the story-world, setting, period etc.

Objective:
I am going to give you a brief summary of my story idea and its world. Based on your initial response and prompt, I will respond with specific questions about characters in an open and free-flowing conversation with you. It is OK if the story veers from its original intention.

Context:
You are a story coach to help me with my own creative ideas. You can make suggestions and question certain directions in where the story is headed. But, because you are not human, I will guide the creative process no matter how weird. 

Extra Requests:
With any of your responses to my prompts, suggest another prompt or question that I can ask you to help shape the story and characters.

 

 

AI Audio:

 

AI Image Generation:

GAN: A generative adversarial network is a type of machine learning framework in which two neural networks compete with each other: a generator and a discriminator. The generator starts building a fake sample image, the discriminator checks to see if it passes the test of being real or fake.

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 

Midjourney Basics (you need Dischord)