ITMD 362 Human-Computer Interaction and Web Design

Course Calendar

All code written in class available on GitHub.

1. Course Overview; Valid, Semantic HTML Week One

   1. Monday, January 9 Video

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

   2. Wednesday, January 11 Video

      1. Valid, semantic HTML
      2. MDN HTML reference
      3. Forbidden tags/patterns
      4. HTML linting

   Assigned Work

   • To Read

     1. Course policies, calendar, and projects [Online students]
     2. Wroblewski, Mobile First, Introduction & Part 1 (Ch. 1-3)
     3. Get familiar with the contents and organization of the Mozilla Developer Network’s Web technology for developers

   • To Do

     1. Submit ITMD 362 Survey and Contract (link in your @hawk.iit.edu inbox; email instructor at karl.stolley@gmail.com if you did not receive it)
     2. Create Basecamp account (invite will arrive after you submit the Survey and Contract)
     3. Technology setup (Editor; Git, Node.js)

2. Mobile-First, Relative-Unit CSS Week Two

   1. Monday, January 16

      1. No Class; MLK Holiday

   2. Wednesday, January 18 Video

      1. MDN CSS reference
      2. Relative units in CSS
      3. Media queries
      4. CSS linting

   Assigned Work

   • To Read

     1. Marcotte, “Responsive Web Design”
     2. Jehl, Responsible Responsive Design, Introduction; Chapters 1 & 2

   • To Do

     1. Production Problem 01

3. Unobtrusive JavaScript; Responsive Design Week Three

   1. Monday, January 23 Video

      1. Introduce Project One: Onboarding
      2. MDN JavaScript and DOM references
      3. Unobtrusive JavaScript
      4. Events and the event loop
      5. JavaScript hinting and linting

   2. Wednesday, January 25 Video

      1. Responsive Web Design review
      2. Finding (not choosing) breakpoints
      3. Sizing and layouts with form elements

   Assigned Work

   • To Read

     1. MDN, Responsive Design Building Blocks
     2. Wroblewski, Mobile First, Part 2 (Ch. 4-7)
     3. Clark, Designing for Touch, Ch. 1, 2, & 3

   • To Do

     1. Production Problem 02

4. Touchscreen Interfaces, Form Elements, and Responsive Layouts Week Four

   1. Monday, January 30 Video

      1. HCI of touchscreens
      2. Form elements: accessible HTML structures

   2. Wednesday, February 1 Video

      1. Form elements: CSS styling and the road to hell
      2. The form portion of Normalize.css
      3. Useful accessibility article for reference
      4. Form elements within responsive layouts

   Assigned Work

   • To Read

     1. MDN, HTML Forms Guide
     2. Clark, Designing for Touch, Ch. 4 & 5
     3. Winograd & Flores, from Understanding Computers and Cognition (see Basecamp)
     4. Lupton, ed., Type on Screen, Ch. 01

   • To Do

     1. Production Problem 03

5. Typography: Content, User Interface Week Five

   1. Monday, February 6 Video

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

   2. Wednesday, February 8 Video

      1. Working with web fonts
      2. Typekit reference on OpenType features in CSS
      3. Setting type for content readability

   Assigned Work

   • To Read

     1. Lupton, ed., Type on Screen, Ch. 02, 04

   • To Do

     1. Submit Project One drafts to Basecamp by Weds. 2/8 11:59pm CT

6. Interface Typography Week Six

   1. Monday, February 13

      1. No Class

   2. Wednesday, February 15 Video

      1. Typography of user interfaces
      2. HCI of selectable form elements: radio buttons, checkboxes, selects

   Assigned Work

   • To Do

     1. Finish responding to peer drafts

7. Color and Material Design Week Seven

   1. Monday, February 20 Video

      1. Color interaction
      2. Developing palettes
      3. CSS color models

   2. Wednesday, February 22 Video

      1. Material design

   Assigned Work

   • To Read

     1. Creative Bloq, How to master colour theory
     2. Smashing Magazine, Color Theory for Designers: Part I, Part II, Part III
     3. Google, Material Design (all sections)
     4. Lupton, ed., Type on Screen, Ch. 05

   • To Do

     1. Finish Project One
     2. Production Problem 04 & 05

8. Motion Week Eight

   1. Monday, February 27 Video

      1. CSS3 motion and animation properties
      2. JavaScript’s limited role

   2. Wednesday, March 1 Video

      1. Keeping motion accessible
      2. Working with time
      3. Project One due Friday, March 3, 11:59pm

   Assigned Work

   • To Read

     1. Amin Al Hazmani, Motion with Meaning
     2. Craig Dehner, Motion Design is the Future of UI
     3. Val Head, Designing Safer Web Animation for Motion Sensitivity
     4. Lupton, ed., Type on Screen, Ch. 06

9. Accessibility: ARIA Roles and Attributes Week Nine

   1. Monday, March 6

      1. No class

   2. Wednesday, March 8 Video

      1. Introduce Project Two
      2. Git and GitHub in team settings
      3. ARIA roles and attributes in HTML

   Assigned Work

   • To Read

     1. Cheung, Styling Forms Accessibly

   Spring Break; No Class Week Ten

10. HCI Guidelines; Ethics, Activity Theory, and Project Scoping Week Eleven

    1. Monday, March 20 Video

       1. Taking stock of where we’ve been, and where we’re going
       2. Activity theory and RWD
       3. HCI guidelines

    2. Wednesday, March 22 Video

       1. Ethics and users
       2. Scoping and planning a full-scale site

    Assigned Work

    • To Read

      1. Jehl, Responsible Responsive Design, Ch. 3 & 4
      2. Kaptelinin and Nardi, “Activity Theory in a Nutshell” (see Basecamp)
      3. Apple, iOS Design Principles
      4. Windows, Design applications for the Windows desktop
      5. GNOME Desktop, Human Interface Guidelines

    • To Do

      1. Production Problem 06

11. Usability: Guiding Principles Week Twelve

    1. Monday, March 27 Video

       1. Designing usable content

    2. Wednesday, March 29 Video

       1. Designing usable interfaces

    Assigned Work

    • To Read

      1. Krug, Don’t Make Me Think, Introduction; Ch. 1-5
      2. Lupton, ed., Type on Screen, Ch. 03

    • To Do

      1. Production Problem 07

12. Emotional Design; Responsive Media Week Thirteen

    1. Monday, April 3 Video

       1. Designing for emotion

    2. Wednesday, April 5

       1. Open Q&A on Basecamp (no in-person class)

    Assigned Work

    • To Read

      1. Krug, Don’t Make Me Think, Ch. 6-7, 10-11
      2. Norman, from Emotional Design (see Basecamp)

13. JavaScript Prototyping Week Fourteen

    1. Monday, April 10 Video

       1. Prototyping interfaces with JavaScript (no back end)
       2. Project Two draft due at 11:59pm

    2. Wednesday, April 12 Video

       1. Introduce Project 3
       2. Finish up JavaScript prototyping stuff

    Assigned Work

    • To Read

      1. Krug, Don’t Make Me Think, Ch. 8-9, 12-13

    • To Do

      1. Production Problem 08 & 09
      2. Finish Project 3 testing script, site plan, and A/V release; due 11:59pm on Wednesday, 4/19

14. Usability Testing Methods; Remote User-Testing, and Experimental Builds Week Fifteen

    1. Monday, April 17 Video

       1. Usability: testing your project, not users
       2. Fundamental testing methods
       3. Testing at a distance
       4. Project Two Due, 11:59pm

    2. Wednesday, April 19 Video

       1. Experimental builds
       2. A/B testing
       3. Project 3 testing script, site plan, and A/V release due 11:59pm

    Assigned Work

    • To Do

      1. Production Problem 10

15. Parting Material: Assessing Front-End Libraries and Frameworks Week Sixteen

    1. Monday, April 24 Video

       1. Assessing libraries and frameworks

    2. Wednesday, April 26

       1. Building your own libraries and frameworks

    Assigned Work

    • To Do

      1. Finish Final Projects, Due Wednesday, May 3 at 11:59pm