Detailed schedule

Intro to interaction design, HTML/CSS, and this course

• Introduction

Demo files: Intro demo (ZIP)

Projects

Start Recipe.

Capturing meaning with HTML/CSS typography

• Brief history of the web
• HTML basics
• CSS basics

Demo files: Basic site (ZIP), Shape of Design excerpt (TXT), Text Fixer

Reading assignments and project deadlines appear under the class when they are due.

Reading

• Read the syllabus, class schedule, and starting and submitting projects.
• HTML & CSS, ch. 1 (available for download)
• Twitter thread by @tedstein about dark patterns on the Tesla site

Do you know how to manage files and folders on a Mac? You will struggle in this class if you don’t have an excellent command of those skills. If you have the slightest doubt about your abilities, start working through sections two and three of the Lynda Computer Literacy for Mac course. (Sign in through the AU Library.)

Projects

• Bring in a recipe
• Fill out class survey
• Sign up for a free GitHub account

Firefox

Download and install Firefox on your development machine. You must use Firefox as your primary browser for development.

Firefox offers the best CSS layout developer tools. (If you aren’t running Firefox, I won’t help you with technical problems.) Good practice involves checking sites in several browsers, but we’ll stick with Firefox, since this is an intro class.

The box model; Classes and IDs

• The CSS box model
• Classes
• IDs (use sparingly)

Demo files: Layout/typography demo (ZIP)

Projects

• Complete HTML for Recipe
• If you’re just joining the class, make sure you sign up for a GitHub account, fill out a class survey, and install Firefox. (See above.)

Reading

• HTML & CSS, ch. 2 (HTML text), 12 (CSS text)
• Citations and copyright policy
• See HTML Tidy, like a spellchecker for HTML

DIVs and sectioning content

• DIVs
• New HTML5 elements
• Typographic elements and class naming exercise

A piece of advice about screen sizes: don’t present sites in full-screen mode, and don’t code with your browser in full-screen mode. Most desktop/laptop users aren’t browsing in full-screen mode, and sites need to be able to adapt to varying screen sizes. Working in full-screen mode guarantees nasty surprises later. Stop doing it, now.

Projects

• Turn in Recipe
• Start Typography exercise

Reading

• HTML & CSS, ch. 3 (lists), 13 (boxes)
• How to succeed in this class

In class

• DIV demo files (ZIP)

Images and links

Topics

• The A (anchor/link) element, and links as the currency of the web
• Locating resources: file paths and URLs
• The IMG (image) tag
• Finding, compressing, and using images

In class

Links demo: Links files (ZIP)

Projects

• Work in class

Reading

• HTML & CSS, ch. 4 (links)
• Naming files

Studio

Reading

• HTML & CSS, ch. 5 (images)
• How to crit
• Optional: WhatsApp is fighting fake news by limiting its virality

Good practices for where to put your CSS

It’s technically feasible for your CSS to live in a number of places:

• In a separate .css file
• Inside a <style> element, as part of the current HTML file
• Inline, as part of a CSS attribute
  (<p style="margin-top: 1.5em;">)

Tutorials scattered around the web might suggest all of these approaches. For our class, you should almost always put your CSS in a separate .css file, linked to from every page in your site. This tactic encourages you to think about designing systems and reusing code, it is more maintainable and easier to troubleshoot, and it makes CSS specificity easier to understand.

Layout methods and CSS Grid

• Imaginging and building multicolumn layouts with CSS grid
• More on Firefox Developer Tools
• Browser support

See Can I Use.

Demo files: layout demo (ZIP)

Projects

• Turn in Typography exercise
• Start Layout + image exercise

Reading: CSS Grid and layout videos

• Jen Simmons, Layout Land: Hot metal : Pasteup :: Floats : CSS Grid (video, 6 min.)
• Jen Simmons, Basics of CSS Grid: The Big Picture (video, 15 min.)
• Rachel Andrew, Grid by Example: Defining a grid (video, 3 min.)
• Rachel Andrew, The FR Unit (video, 3 min.)
• Rachel Andrew, Auto-placement and order (video, 3 min.)

Grid exercise; Color models and transparency

Topics

• HSLA, RGB, and named colors
• opacity() vs transparent colors
• Problem-solving grid exercise (files, ZIP)

Reading

• Jen Simmons, CSS Grid like you are Jan Tschichold
• Optional: Basics of CSS Grid Layout at MDN

Reading: background

• Look at layout examples on Jen Simmons Labs

Choosing and compressing images

Topics

• Choosing and compressing images
• Type choice

Links from class

• Image sources advice page
• Image choice: image as evidence, with symbolic weight (Bob Staake), as synecdoche, as wallpaper

Reading

• HTML & CSS, ch. 11 (color)
• Optional: MDN Color (in CSS units article)

Type hierarchy, details, and layout

Topics

• Type hierarchy and typographic units
• Discuss type handling on example sites: Bunk, Tracksmith, Bloomberg Opinion, and October

Demo files: type details and layout (ZIP)

Projects

• Studio and small group critiques

Reading

• Amy Papelias, Facing Our Fears: Teaching Type on the Web
• “Hierarchy” article on Thinking with Type

Process + sketching/prototyping tools

Projects

• Turn in Image/layout exercise
• Critique Image/layout exercise (upload ZIP-compressed folder to file request page)
• Start Story

Reading

• Mark Boulton, Visual Design is Not a Thing
• The $60 Gadget That’s Changing Electronic Music (on the Pocket Operator synth)

Topics

• Design process
• Introducing Figma

Style tiles in Figma

Information architecture + navigation

Projects

• Story: share summary of two possible Wikipedia articles (2 min. max).
• Work in class on Story (produce two proposed site maps, working on paper and improving presentation in Figma)

Reading

• Should I Use Grid or Flexbox. (Note: for this class, you can probably build every project without using Flexbox.)

In class

• Navigation
• Information architecture; site maps
• Design process and terms for interaction design work

Quiz

On HTML/CSS syntax and semantics.

Flexbox + navigation bars

Projects

• For Story, show three design concepts as style tiles, produced in Figma. (Use fonts from the class font list.) You can start with a copy of the style tiles template. Email a shareable link before class.
• Complete background research into your topic and review comparable sites

Reading

• Start listening to Manoush Zomorodi, The Privacy Paradox (complete the activities, if you’d like)
• Your Apps Know Where You Were Last Night, and They’re Not Keeping It Secret

In class

• Flexbox and navigation bars

Demo files

• Navbar/flexbox demo (ZIP), and completed version (ZIP)

Studio

Projects

• Story: Come to class with well-resolved sketches for design ideas. Be prepared to discuss those ideas. Work on building out your idea in code, in class.

Reading

• Norman doors

Accessibility

Projects

• Some time for troubleshooting and debugging for Story.

Reading

• Allison Arieff, Designing for access
• Tom Graham and André Gonçalves, Stop Designing for Only 85% of Users

In class

• Accessibility example (ZIP)
• Accessibility exercise (ZIP)
• Sina Bahram talk

Studio

Projects

• Story: Have a semifinal design for discussion in small groups. Show a front page and an inside page in live HTML/CSS, but be prepared to modify the design in response to today’s discussion.

Reading

• Josephine Wolff, Losing Our Fourth Amendment Data Protection
• Optional: Anil Dash, The Web We Lost
• Optional: Anil Dash, Rebuilding the Web We Lost

Studio

Projects

• Story: You should be well on your way toward finishing migrating content into your site.

Reading

• Gabriel Weinberg, What if We All Just Sold Non-Creepy Advertising? (by the founder of DuckDuckGo, a search engine that doesn’t track users and still seems to be flourishing)
• Zeynep Tufekci, Facebook’s Ad Scandal Isn’t a ‘Fail,’ It’s a Feature
• Finish listening to the Privacy Paradox for this class

Privacy and ethics

Reading

• Review Privacy Paradox and Ethan Zuckerman

Projects

• Final studio for Story

Mobile/responsive

• Design for mobile devices
• Responsive web design and media queries

Remember: every website is mobile friendly, until your design starts to break it.

In class

• Responsive demo (ZIP)
• See MDN Using Media Queries

Projects

• Possible critique or troubleshooting for Story
• If ready, start Conference

Reading

• Ingrid Burrington, Why Amazon’s Data Centers are Hidden in Spy Country

Mobile/responsive exercise

Projects

• Critique and turn in Story
• Start Conference

In class

• Mobile/responsive exercise w. demo files (ZIP). Tip: make an empty layout first, then flow in your content.
• See MDN Using Media Queries

Reading

• Bodega and backlash/criciticsms plus skepticism about logistics
• Optional: Rachel Andrew, Using Media Queries for Responsive Design in 2018

Critique

Reading

• Responsive layout reading t.b.a.
• Optional: Rachel Andrew, How To Align Things in CSS (see Box Alignment, in particular)

Studio

Projects

• Show concepts and design ideas for Conference

Studio

Studio; JavaScript

JavaScript intro: jQuery documentation,

Basic JavaScript + jQuery demo (ZIP), complete (ZIP)
JavaScript scene demo (ZIP)

Hosting; Professional practice

• Domain registration, the DNS system, and web hosts
• A few words about dynamically generated or content-managed websites
• Professional practice

Critique

Projects

• Semifinal critique for Conference