WEEK 8: Recipe Design
(October 7-11)

To Do This Week:

Notes:

NEXT WEEK OCT 18  – Holly Slocum

  • Have an idea for the Multimodal Narrative Project
  • Types of Digital Narratives
  • Help with your Recipe Design…

Typography assignment, by former student Natalie Hendren

Typography demo
/ demo PDF

Validate demo…

unwanted bullet points – ‘list-style-type: none” or Eric Meyer’s reset.

Responsive Design Reminders

mobile first!
flexible design (using % instead of px)
percentages! (do the math)
html flow
cascade principle
inheritance (only change styles that need to change)
max-width and min-width (set limit with max or min width)
height values are tricky
responsive images (100% of container parent or img {width: 100%;})
modular design
“breakpoints” based on design not device
display: none and display: block
turning off iOS resize

Media Queries Overview
workflow – sketches, create boxes of content

Approximate Breakpoints:
1200px
960px
768px
600px
480px
320px

 

 

Student Highlights:

Recipe Responsive Structure – 5% (DUE Oct 11th)

  1. Find/Create your recipe. You will need to find a recipe – your own, from a web search or generated with AI tools.
  2. Open SublimeText to start the html…
  3. Create the Recipe HTML by following along with me in class

We are building the HTML for a single, responsive recipe page with images, and a responsive layout with distinct areas for content. This week you are just submitting a functional responsive prototype or wireframe website using CSS media queries and CSS grid and/or flex for layout. The site should have the following:

  • an index.html page inside your “recipe” folder
  • an internal or external CSS stylesheet (your choice)
  • at least two media queries for changing layout from mobile to desktop
  • use of CSS grid or flex on recipe sections
  • at least three images
  • uploaded to the server – check the url!
  • Submit url to Canvas

Your grade in this assignment will be based on your understanding of the fundamentals of responsive design (html/css code, media queries). The Recipe project will be graded in two parts: this week is 5% (responsive structure) and next week is 10% (applied visual hierarchy)

Recipe hierarchy:

  1. Header/”Hero-unit” (title, image, description)
  2. Ingredients
  3. Data (cook time, tools, nutrition, diet)
  4. Steps/Instructions
  5. Other info (country, notes etc.)
  6. Footer info

Recipe – Final Design (for Visual Hierarchy) – (DUE October 18)

Visual Hierarchy Principles:

LAYOUT:

  • Does the layout bring attention to the parts of the recipe and still expresses a whole?
  • Does the layout show enough of the content “above the scroll” to be meaningful?
  • Is the wrapper or container under 1200px?
  • Have you added Eric Meyers reset to the top of the stylesheet before your own default styles?
  • Is your stylesheet mobile first, followed by media queries for larger sizes?
  • FYI:child elements of a Grid should not have CSS margin or width applied

COLOR:

  • Do you have a color scheme (5 colors) for your site design? Use Adobe’s Kuler and put values at the top of your stylesheet.
  • FYI: At the top of your stylesheet, make a comment that lists the hexadecimal values for the color scheme colors
  • Is the color scheme applied so that to the content and the hierarchy are clear?

TYPOGRAPHY:

  • Is there a rhythm of repetition and difference in the typography?
  • Do you need more padding around text? Or more careful alignment of block elements? 
  • Find a good pairing of fonts (serif and san-serif) on Google Fonts
  • Apply these fonts in the stylesheet for headings and paragraphs

CONTENT (image and text):

  • Do the images fit proportionately your design and content? 
  • Evaluate the image and h1 in the header or hero-unit. Does it stand out and bring the reader into the content?
  • Is the hero image framed properly for all device widths?
  • Evaluate how color, imagery, layout and typography work together to communicate the site content.
  • Did you add “alt” text to images?
  • Do you have a footer with link(s) to your source(s)?

CODE (HTML and CSS)

  • Did you validate your project?(validate early and often!) 
  • Is your stylesheet is mobile first, followed by media queries for larger sizes?
  • Did you format your html and css so that it is readable? Tab in for nested elements, keep alignments. Use beautify CSS or beautify HTML.