If you’re seeing this, the site behind it is likely broken!

Hi, there. I use these course sites as little sandboxes to experiment with and learn various “brand new” CSS properties—and your browser does not support (at least) one of them. Apologies. It “should” always work in current/updating Safari and Chrome!

  • Typography & Interaction

    ’25–26

  • The Syllabus

  • Our Class

  • Unit Nº 1: “Type and the Web”

    Wks. 1–6

    • Week Nº 1

      Aug. 29

    • Everything Is a “Web Page”

    • Week Nº 2

      Sep. 5

    • It’s All About Type

    • Week Nº 3

      Sep. 12

    • An Intro to HTML

    • Week Nº 4

      Sep. 19

    • An Intro to CSS

    • Week Nº 5

      Sep. 26

    • The Box Model

    • Project Nº 1: “Manuscript”

      Oct. 3

    • Week Nº 6

      Oct. 3

  • Unit Nº 2: “There Is No Perfect Layout”

    Wks. 7–10

    • Week Nº 7

      Oct. 10

    • Responsive Design

    • DevTools /​ Web Inspector

    • Week Nº 8

      Oct. 17

    • Finally, Flexbox

    • And (CSS) Grid

    • Week Nº 9

      Oct. 24

    • Some Additional, Advanced CSS

    • Project Nº 2: “Spread”

      Oct. 31

    • Week Nº 10

      Oct. 31

  • Unit Nº 3: “Typography as Interface”

    Wks. 11–15

    • Week Nº 11

      Nov. 7

    • Working with Images

    • Week Nº 12

      Nov. 14

    • Week Nº 13

      Nov. 21

    • Thanksgiving Week

    • Project Nº 3: “Binding”

      Dec. 5

    • Week Nº 14

      Dec. 5

    • Week Nº 15

      Dec. 12

  • Winter Break

  • Unit Nº 4: “Interface as Interface”

    Wks. 16–21

    • Week Nº 16

      Jan. 21

    • Week Nº 17

      Jan. 28

    • An Intro to JavaScript

    • Week Nº 18

      Feb. 4

    • Week Nº 19

      Feb. 11

    • Week Nº 20

      Feb. 18

    • Project Nº 4: “Links”

      Feb. 25

    • Week Nº 21

      Feb. 25

  • Unit Nº 5: “If All You Have Is a Hammer, Everything Looks like a Nail”

    Wks. 22–30

    • Week Nº 22

      Mar. 4

    • Session Recording

      Project 4 Grading

      We’re working through your Links feedback/​evaluations from last week, and hope to share them ahead (🤞) of class next week. We’ll be in your Slack DM⁠s, as is custom!

      Let’s Talk About “AI” (…again)

      We wanted to pick up our conversation around “AI”/​ LLM use, with your projects in the rearview mirror:

      • How did using/​incorporating these tools feel, from your perspective?

      • This is new to us too, as policy; how does it compare with your other classes/​experiences/​ethics/​goals?

      • On our side, we’re feeling like a lot of the use was… unexamined/​uncritical, just taking the responses as “right.”

      • Within this, our instincts suggest reverse-centaur “cleaning up after the machine”⁠—lots of no-fun, no-learning commenting on the output (or even, completely pointlessly, having the LLM do the commenting).

      • We’re thinking about changing our policy for your last project, disallowing LLM use. What are folks’ thoughts about that?

      Reading Discussion

      We’ll properly begin our fifth and final unit, If All You Have Is a Hammer, Everything Looks Like a Nail, with a discussion of last week’s reading:

      • What Is Code?
        Paul Ford, 2015

      • Unit Nº 5: Reading Responses

      Further Reading

      We will again look at several additional readings over the unit, to understand and situate ourselves in the current zeitgeist:

      • TikTok’s Enshittification
        Cory Doctorow, 2023

      • The Age of Average
        Alex Murrell, 2023

      • Why A.I. Isn’t Going to Make Art
        Ted Chiang, 2024

      • A notional design studio.
        Ethan Marcotte, 2025

      HIGs

      We also want to introduce you to human interface guidelines. These documents describe the paradigms, intent, and overall look-and-feel for a given operating system⁠—made to encourage software developers to craft consistent, native-feeling applications for a platform. These are the original digital design systems.

      The most famous instance (which lends the category its name) comes from Apple, written for the original Macintosh⁠—the first popular, consumer computer with a graphical user interface. We’ve also selected influential examples through time, covering the era of modern, GUI-based software up to the present day.

      We aren’t designing applications for Windows 95 here, but these should serve us in two ways: as a timeline of user-interface design patterns, and as examples of documentation and design systems⁠—particularly the current, ongoing/​living versions:

      Historical

      • Human Interface Guidelines
        Apple, 1987

      • Macintosh Human Interface Guidelines
        Apple, 1992

      • The Windows Interface Guidelines
        Microsoft, 1995

      • Aqua Human Interface Guidelines
        Apple, 2001

      • iPhone Human Interface Guidelines
        Apple, 2008

      • Windows Phone 7 UI Design and Interaction Guide
        Microsoft, 2010

      • Material Design 1
        Google, 2014

      • iOS Human Interface Guidelines
        Apple, 2014

      Current

      • Material Design 3
        Google, 2021 (ongoing)

      • Human Interface Guidelines
        Apple, 2022 (ongoing)

      • Fluent 2 Design System
        Microsoft, 2023 (ongoing)

      Our Final Project

      And we’ll introduce you to our final project:

      Project Nº 5: Functions

      It’s All in Your <head>

      Finally, let’s look at some odds and ends around sharing:

      Puttin’ a (Link/​Meta) Bow on It

      For Next Week

      • You’ll complete the first, brainstorming phase for your final project:

        Project Nº 5: Define Your Problem

        Consider the project introduction thoroughly, identify three (3, three) possible problems to look at, and outline how you might move forward with them.

      • Submit a link to your document when it is in a good place:

        Submission Form

      Further out…

      • We also want you to pick up thinking about/​working on your Index projects, due at the end of the semester. Our next milestone:

        Project Index: Adding Context and Form

        We will be checking in on these on March 25 (after Spring Break), but don’t want this to pile up on our ongoing Project 5 work. Let’s make some progress ahead of then!

    • Puttin’ a (Link/​Meta) Bow on It

    • Week Nº 23

      Mar. 11

    • Spring Break

    • Week Nº 24

      Mar. 25

    • Week Nº 25

      Apr. 1

    • Week Nº 26

      Apr. 8

    • Week Nº 27

      Apr. 15

    • Project Nº 5: “Functions”

      Apr. 22

    • Week Nº 28

      Apr. 22

    • Week Nº 29

      Apr. 29

    • Week Nº 30

      May 6

    • “Everything Else”

  • Project “Index”

    May 15

  • The end