Skip to content
DIG 245 Critical Web Design

3-2Design Fundamentals

Sep 9

📌 Complete before class

Learning Objectives
  1. Give and receive “Glow and Grow” peer critique using design intent and code organization as evaluation criteria.
  2. Articulate how specific CSS decisions (color, font, spacing) communicate meaning beyond decoration.

Javascript intro

Section titled “Javascript intro”

C.R.A.P. introduction

Section titled “C.R.A.P. introduction”

We already used the “Eye Movement Test” to discover how a design can lead our eyes around a layout. CRAP design principles illustrate why that happens:

Critical Web Design cover
  1. Contrast - Make different elements clearly different (size, color, weight) so the eye knows what matters most.
Critical Web Design cover
  1. Repetition - Repeat visual choices (colors, fonts, spacing) throughout a design so it feels unified. Treating similar content the same makes it easy to find information and navigate.
Critical Web Design cover
  1. Alignment - This is the spatial relationship between different elements. Line elements up with each other so nothing feels randomly placed.
Critical Web Design cover
  1. Proximity - Group related items close together, and separate unrelated ones, to show relationships.

👉 View Source feedback

Section titled “👉 View Source feedback”
  1. Share your View Source draft — push to GitHub and share the live link in Slack.
  2. Groups - Note one design principle you applied to your project — what did you intend, what was the visual effect?
  3. Articulate how specific CSS decisions (color, font, spacing) communicate meaning beyond decoration.
  4. Explore examples in these articles for more: How to Use C.R.A.P. Design links with Principles for Better UX? and 4 CRAP Design Principles For A Better UX

👉 Work during class

Section titled “👉 Work during class”
  1. Finish your View Source project in class following the prompt in the assignment.
  2. Validate your live HTML page at validator.w3.org and CSS at jigsaw.w3.org/css-validator.
  3. What is one question you have after completing the first prompt / assignment? Post in Slack with the link to your finished project.

📌 Homework