WEEK 6: Visual Hierarchy
(September 25-29)

To Do This Week:


CMDC Superpower Survey: https://dtc-wsuv.org/supersurvey/ 

Blackbird Project Due

  1. one external link
  2. one internal or anchor link
  3. one image insert
  4. one background image
  5. an external stylesheet
  6. formatted CSS and HTML (identing)
  7. applied visual hierarchy in CSS – layout, color and typography

Validate the html and css of your Blackbird site:

Visual Hierarchy Primer:

Difference: where the eye is drawn
Repetition: where the eye sees pattern and context


Grid System:

  • proportion, alignment, balance
  • to grid or not to grid?
  • use grid paper for your sketches!

Golden Ratio Calculator (width is 1.62%) :  total length a + b is to the length of the longer segment a as the length of a is to the length of the shorter segment b


Rule of Thirds


Layout examples:



Texture and Imagery:

Applied Web Color

Adobe Kuler

web color values: RGB, 0- 255
rgba.    “opacity” vs rgba

ImageColorPicker – get color scheme from an image


Info-Card: Visual Hierarchy

Read about this weeks Info-card assignment



Mandatory Midterm Meeting (5%) – by Wednesday, October 11

Please set up a mid-term meeting with me by messaging me on Slack. This meeting is to check in about how you are doing so far with HTML and CSS.

Below are my times to meet. You can either set up a 30 minute slot or just 5-10 minutes if you are feeling comfortable with the material so far. For longer sessions, we can meet on Zoom. For shorter, we can meet after class.

My Availability:
MW – 10:00pm-12:00pm, 1:30pm-3:00pm
TTH – 12:00pm-3:00pm


Typography Error

visual hierarchy example

Rules of Thumb:

  • chunk text (analyze the text)
  • organize text for visual hierarchy, create difference and repetition
  • organize for rhythm and tension (explore what baseline rhythm is)
  • choose 1-2 fonts (make differences with weight, size, style, color)
  • create difference in text areas (contrast, proportion, space)
  • keep line length to 45-90 characters per line or 10-15 words
  • use padding on text boxes with borders
  • for text body, use CSS rules: “line-height: 1.5;” and “text-align: left”
  • create strong lines of continuance (verticals, rule lines, borders, gutters and alignment)
  • avoid underline and bold for emphasis ( italic is best)
  • repeat styles for similar semantic elements to create repetition

Typography Basics:

Working with Fonts

Typography assignment, by former student Natalie Hendren

Typography demo
/ demo PDF

Blackbird: Visual Hierarchy


Workshop: address layout, color and typography


Recipe Project

Visual Hierarchy – breakdown sections

Build HTML – basic start page

Responsive Grid template

Project #2:  Recipe Project 10%

Build a one-page, responsive site for a recipe of your choice.  In class, we will discuss visual hierarchy, responsive design, typography and layout of different semantic areas. Your grade in this assignment will be based on your careful handling of design, code and content.

Chunk Recipe into Visual 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

Student Work:

Previous Recipes projects -Spring 18

Previous Recipes projects -Fall 18

Previous Recipes projects -Spring 19

Previous Recipes projects -Fall 19

Previous Recipes projects -Spring 20

Previous Recipes projects -Spring 21

Previous Recipes projects -Fall 21