Detailed schedule

GDES-220 fall 2019 (David Ramos, American University Design)
ramos@american.edu · office hours · interaction design resources

27 August

Tuesday

Class 01

« summary view

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

  • Introduction

Demo files: Intro demo (ZIP)

Projects

Start Recipe.

30 August

Friday

Class 02

« summary view

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

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

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.

3 September

Tuesday

Class 03

« summary view

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

6 September

Friday

Class 04

« summary view

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

Reading

In class

10 September

Tuesday

Class 05

« summary view

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

13 September

Friday

Class 06

« summary view

Studio

Reading

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.

17 September

Tuesday

Class 07

« summary view

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

Reading: CSS Grid and layout videos

4 October

Friday

Class 12

« summary view

Navigation systems; flexbox + navbars

Projects

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

Reading

In class

Quiz: setting type in HTML/CSS; know CSS type features from HTML & CSS ch. 12. (Not typeface terminology; not pp. 271, 272, 275, 278, 291, or 292.)

15 October

Tuesday

Class 14

« summary view

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

29 October

Tuesday

Class 18

« summary view

Privacy and ethics

Reading

  • Review Privacy Paradox and Ethan Zuckerman

Projects

1 November

Friday

Class 19

« summary view

Mobile and responsive

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

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

Reading

  • Mobile design reading t.b.a.

In class

8 November

Friday

Class 21

« summary view

Mobile/responsive exercise

Projects

  • In-progress design critique for Conference

In class

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

Reading

12 November

Tuesday

Class 22

« summary view

Critique

Projects

  • Show design options for Conference

Reading

19 November

Tuesday

Class 24

« summary view

Interactive prototypes + usability testing

  • Prototying and usability testing exercise

Reading

26 November

Tuesday

Class 26

« summary view

Hosting; Professional practice

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

6 December

Friday

Class 28

« summary view

Critique

Projects

  • Semifinal critique for Conference