WEEK 6: Visual Hierarchy (Feb 11)

To Do This Week

  • Work on Blackbird Project designs (Due September 27 – in two weeks)

Notes

Mandatory Midterm Meeting (5%) – by Friday, October 4th

Please set up a mid-term meeting with me by messaging me on Slack. This meeting is to check in about your progress with HTML and CSS.

My Availability:

  • Short meetings (5-10 min): After class
  • Longer meetings (15-30 min):
    • MW: 2:00 pm – 4:00 pm
    • TTH: 12:00 pm – 3:00 pm (on Zoom)

Blackbird Project

Refer to the completed Blackbird HTML for guidance.

CSS Review

Background Images

CSS3 Features

Web Color

CSS Positioning and Layout

CSS Layout

  • Box Model – Float
  • CSS Positioning
    • position: fixed; (relative to browser window)
    • position: relative; (relative to itself)
    • position: absolute; (relative to parent)
  • Positioning Example (ZIP)
  • Mr. Potatohead: Extra credit (3 points) for completing with position: absolute;, uploading to the server, and sending the link.

CSS Grid and Flexbox

Practice: Flex-Grid Demo

Blackbird CSS Design (10%)

Due: September 27 – Two weeks

Apply CSS for the final site design. Include:

  • A cohesive color scheme using Adobe Kuler
  • A background image
  • Thoughtful typography
  • A basic fixed-pixel layout
  • Formatted CSS (proper indentation)

Note: Effort counts! Extra credit will be awarded for designs reflecting the poem’s meaning.

Checklist Before Submission

  • Validate your project (HTML and CSS Validator)
  • Use a color scheme with good contrast
  • Add alt text to images
  • Style links
  • Format HTML and CSS for readability

Ensure the following are included from last week’s Blackbird HTML assignment:

  • One external link (e.g., Wikipedia page)
  • One internal/anchor link (e.g., from author name to #bio)
  • One image insert (images inside an “img” folder)
  • Formatted HTML
  • One external stylesheet (styles.css)
  • Check your project on the Blackbird List (01) or Blackbird List (02).

 

 

 

 

 

 

To Do This Week:

Notes

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:
Validator.w3.org  

Visual Hierarchy Primer:

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

Zipcar

Grid System:

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

Golden Ratio Calculator (multiple or divide a width by 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

GoldenRatio

golden-ratio
Rule of Thirds

Understanding-the-Rule-of-Thirds-Why-it-works-2

Layout examples:

1-column
2-column

 

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

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

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

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

Visual Hierarchy Demo

Blackbird address layout, color and typography

info-card-hierarchy-example/

Student Info-Card Designs:

CSS GRID