Calendar

Course Overview; Valid, Semantic HTML

Week One

  1. Monday, January 14 Video

    1. Welcome & introductions
    2. Course policies & calendar
    3. Course technologies

  2. Wednesday, January 16 Video

    1. Valid, semantic HTML
    2. MDN HTML reference
    3. Ugly, smelly tags and patterns
    4. ARIA roles and attributes in HTML
    5. HTML linting

Form Elements

Week Three

  1. Monday, January 28 Video

    1. Introduce Project One: Onboarding
    2. Form elements: accessible HTML structures
    3. CSS layout modules (Flexbox)

  2. Wednesday, January 30

    1. No class. University closed for extreme cold

Unobtrusive JavaScript; Design from Accessibility, Usability

Week Four

  1. Monday, February 4 Video

    1. Design from accessibility
    2. MDN JavaScript and DOM references
    3. Unobtrusive JavaScript
    4. Regular expressions

  2. Wednesday, February 6 Video

    1. Design from usability
    2. CSS layout modules (Flexbox and Grid)
    3. Form elements: data and events
    4. Events and the event loop
    5. More regular expresssions
    6. The pattern attribute and JavaScript regular expressions
    7. JavaScript hinting and linting

Typography: Content, User Interface

Week Five

  1. Monday, February 11 Video

    1. Type classification and anatomy
    2. Resources at fonts.com

  2. Wednesday, February 13 Video

    1. Working with web fonts
    2. Setting type for content readability (vs. legibility)

JavaScript & Form-Element Processing

Week Six

  1. Monday, February 18

    1. No class; Stolley finalizing and posting Project One draft comments

  2. Wednesday, February 20 Video

    1. Multipurpose form elements and JavaScript detection
    2. Messages to aid users in correcting errors

Color and Color Theory

Week Seven

  1. Monday, February 25 Video

    1. Color models and representation
    2. Color interaction
    3. Developing palettes
    4. CSS color models

  2. Wednesday, February 27 Video

    1. Color and typography
    2. Typekit reference on OpenType features in CSS

Git in Team Settings; Design for Touch

Week Eight

  1. Monday, March 4 Video

    1. Introduce Project Two
    2. Git and GitHub in team settings
    3. Walk through Production Problem 03

  2. Wednesday, March 6 Video Postmortem

    1. Grips, fingers, thumbs, and screens
    2. Discoverability and the geography of screens
    3. Form controls and touch
    4. Progressively-enhanced form controls

Prototyping Data-Driven Interfaces with JavaScript; Motion and Animation

Week Nine

  1. Monday, March 11 Video

    1. Enhancing user interactions with API data
    2. Accessing data APIs from the browser; CORS restrictions
    3. Understanding and parsing JSON API responses
    4. Structuring sample data
    5. Basic JavaScript data manipulation
    6. Manipulating the DOM from sample data

  2. Wednesday, March 13 Video

    1. Assisting users without getting in their way
    2. Enhanced touch-friendly select

Spring Break; No Class

Week Ten

Deeper into Usability: Guiding Principles, HCI Guidelines

Week Eleven

  1. Monday, March 25 Video

    1. Stolley walks through an example task analysis
    2. Scoping and planning a full-scale site
    3. HCI guidelines
    4. Example design systems: Google, Apple (color)
    5. Developing custom style guides and systems

  2. Wednesday, March 27

    1. No class. Stolley available for assistance on Basecamp.

Review and Refresh

Week Twelve

  1. Monday, April 1 Video

    1. Open Q&A and review
    2. Adaptive vs. responsive design
    3. Unobtrusive JavaScript

  2. Wednesday, April 3 Video

    1. Open Q&A and review
    2. Form elements: CSS styling and the road to hell
    3. The form portion of Normalize.css
    4. CSS3 transition and animation properties
    5. Working with time
    6. JavaScript’s limited role

Enhanced JavaScript-Backed Prototyping

Week Thirteen

  1. Monday, April 8 Video

    1. Maintaining state, user data
    2. Cookies
    3. LocalStorage
    4. Paul Irish on detecting LocalStorage support

  2. Wednesday, April 10 Video

    1. Greater abstraction in JavaScript functions
    2. Collecting all data inputs from forms
    3. Storing and retrieving prefixed localStorage items
    4. Storing and retrieving and parsing JSON strings in localStorage

More on Local Storage and State; Ethics and Dark Patterns

Week Fourteen

  1. Monday, April 15 Video

    1. Enhancing prototypes with LocalStorage: preserving data form to form/page to page

  2. Wednesday, April 17 Video

    1. Ethics, interface design, and users
    2. The role of emotions in design
    3. More on localStorage and state
    4. Form elements within responsive layouts
    5. Revisiting the grid

Traditional Usability Testing Methods; Remote Testing, Experimental Builds

Week Fifteen

  1. Monday, April 22 Video

    1. Special remote class meeting. Participation instructions posted on Basecamp
    2. Introduce Project 3
    3. Usability: testing your project, not users
    4. Fundamental testing methods

  2. Wednesday, April 24 Video

    1. Testing at a distance
    2. Experimental builds
    3. A/B testing

Parting Material: Assessing Front-End Libraries and Frameworks

Week Sixteen

  1. Monday, April 29 Video

    1. The semester/year in review
    2. Assessing front-end libraries and frameworks
    3. If time/interest: Service workers and progressive web apps

  2. Wednesday, May 1

    1. NO CLASS MEETING. Stolley available electronically to provide help on final projects.