Skip to content
DIG 245 Critical Web Design

3-1CSS

Sep 7

📌 Complete before class

Learning Objectives
  1. Give and receive structured peer feedback using “I Notice / I Wonder” to develop critical observation skills.
  2. Apply five design fundamentals from Ch 2 to critique and sketch a redesign of a poorly designed website.

👉 Activity: Eye Movement Test

Section titled “👉 Activity: Eye Movement Test”
ExcerptSection 2.1.2

Repeat the following activity as often as necessary while assessing your own design compositions or use it to give feedback to others. Use this Igor Stravinsky example first.

  1. Choose a composition to assess—for example yours or your peer’s—or view a website robust with content.
  2. Close your eyes for a few seconds, then open them and look at the layout.
  3. Name each element that draws the focus of your eyes, in order of appearance.
  4. Review the order. Does it match the relative importance of each item in the context of information in the design?
  5. Consider potential issues with how the design leads your gaze. Do your eyes ever get stuck, leave the page, or struggle to find meaning when looking at the design?
  6. Update the design to reiterate the hierarchy of information.

👉 Activity: Explore the Power of CSS

Section titled “👉 Activity: Explore the Power of CSS”
ExcerptSection 2.2.3

This activity puts your knowledge of paths to work to explore how websites use CSS to change the presentation of HTML files.

  1. Visit the CSS Zen Garden website at csszengarden.com.
  2. Click through the links in the menu on each page. As the design changes, notice the text does not. This site uses a simple but effective trick, loading different CSS files (indicated by the changing number in the URL) to underscore the power to control the presentation of HTML using CSS.
  3. Edit the URL of the site so that the number at the end looks like this: csszengarden.com/000 and press return. You are now viewing the unstyled page, or vanilla HTML. Created over twenty years ago, every contributor started with and evolved this basic HTML page, designing and coding layouts to reimagine the original.

Introduction to CSS

Section titled “Introduction to CSS”
Followpages 64-74
  1. Fork the View Source project
  2. Add HTML boilerplate
  3. Add inline CSS
  4. Add <style> tag with CSS
  5. Switch to View Source demo or copy paste starter into yours
  6. Block <div> and inline <span> elements
  7. CSS Inheritance
  8. Class and Id selectors - Explore palettes at coolors.co
  9. CSS position and transform
  10. Use DevTools!

*Finished View Source demo

Section titled “Related”

HTML & CSS for Absolute Beginners: CSS syntax / formatting CSS (6:16)

📌 Homework