To Do This Week
- Recipe: Final Design Due March 18 (Tuesday after Break)
- Have an idea for the Multimodal Narrative Project
In Class
Helvetica discussion…
Recipe Design
Tips:
- Remove all margins and widths on children of grid –
<li>. Padding is OK. - Percentages on all values
- Don’t use positioning to fix layout problems
- Grid-gaps should be in pixels
- Close elements! Validate frequently.
- 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 considered colors)
Typography:
Review Recipe Projects for Feedback
Reminders Before Submitting
- Validate your project (validate often!)
- Resize your images for the web (under 1000px wide)
- Ensure your stylesheet is mobile-first, followed by media queries for larger sizes
- Do not copy all CSS for media queries; only include changes
img {width: 100%;}will ensure responsive images if they are inside a container- You need at least two media queries, but more are allowed if needed
- Pay attention to visual hierarchy. Differentiate content with typography
- Apply CSS styles to links
- Include a footer with link(s) to your source(s)
- Format your HTML and CSS for readability: use tabs for nesting and maintain alignments
Extra Credit
- Download this zip folder: Mr. Potatohead
- Complete the assignment (assemble the images) using
position: absolute. - Upload the project to the server and submit to potatohead assignments in Canvas.
Multimodal Narrative Project – 15%
Due April 8
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
- Research your idea and gather material (ChatGPT can help).
- Sketch site designs on paper or by using Figma.
- Create HTML with a responsive or flexible structure, placeholder images, and dummy text. Use ChatGPT if you want.
- Create and edit images/media to fit design sections.
- Apply Visual Hierarchy principles in CSS design.
- Add content: write text and create media.
- Refine design to enhance navigation and content hierarchy.
- Optionally add interactive effects with small JavaScript features.
- 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.
Multimodal Narratives
Inspiration
- swanh.net 2018
- My Boyfriend Came Back from the War, Olia Lialina 1996
- Cityfish, JR Carpenter 2006
- How to Rob a Bank, Alan Bigelow
- The Cape, JR Carpenter 2005
- My Body, Shelley Jackson 1997
Example Student Projects
- scroll-jyoes
- scroll-story-khatton
- scrollcoffee-dkutsenko
- narrative-dbeard
- narrative-jberry
- titan-jberry
- scroll-bparsons
- bethany-dubeck-narrative
- bryn-kristi-betrayal
- eperez-narrative
- henry-brooks-sequential
- holly-slocum-sequential
- narrative-espanning
- narrative-jberry
- paul-meiners-narrative
- streamliners
- taylor-jones-narrative
- b-ruhe-narrative
- tangled frozen
- rhasmagian
- the run – wanderson
- climbing everest
- accidental findings
- rguggisberg-svg
- gvandervort-network
AI Coding
Stay in control of the design. Use AI to help you iterate through possibilities and then make it your own. This is especially true for writing and coding. Understand and use the code produced. Ask the AI to comment of the code to explain it!
AI Writing Models
Be specific about style and desired outcomes.
Generative Image/Video Models
Sketch-to-Render Tools
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 (bird’s-eye view, etc.)
- Describe film types and stocks
- Output resolution keywords: 8K, 4K, photorealistic, ultra photoreal, ultra detailed
- 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 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.