Detailed schedule

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

Tue, Aug 25

Week 01

📅

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

In class

Here’s what we’ll cover in Tuesday’s class:

  • Intros (via Miro board)
  • About this course
  • Early days of the web
  • A first look at HTML and CSS

Demo materials (we’ll use these in class):

A PDF of the slides is on Blackboard.

Reading

Usually, you should finish each week’s reading by Tuesday, but that’s not possible for this first two weeks of class. Aim to complete this reading by Friday. You’ll need the HTML/CSS information in order to do the homework project.

Projects

  • Start Recipe. Begin work during the week so that you can bring any questions to our (optional) help session on Friday.

Friday help/advice sessions

If we were meeting in-person, Fridays would usually be studio/lab sessions. Since we’re online, you’re welcome to work by yourself, on your own time—Friday attendance is not required. We’ll use Friday studio sessions as space for help and advice.

This week, we’ll have optional help sessions on Friday, with the instructor and 1–3 students at a time. Sign up on Doodle.

Tue, Sept 1

Week 02

📅

Capturing meaning with HTML/CSS typography

In class

  • Looking more closely at HTML and CSS
  • Typography and CSS
  • Thinking about usability

Demo files:

Projects

  • Finish parts 1 and 2 of Recipe before the start of class on Tuesday. (No need to turn it in yet.)
  • Continue working on Recipe, moving on to part 3 (CSS). The final version is due on Sunday at 5 p.m.

Other tasks

Reading (for Friday)

Finish this week’s reading by Friday. As with Week 01, you’ll need the reading to finish your project work.

Follow-ups from class

Tue, Sept 8

Week 03

📅

The box model / Classes and IDs

In class

  • The box model
  • Classes and IDs
  • DIVs and sectioning content

Demo files: Layout/typography demo (ZIP)

Projects

  • Start work on Typography. (We’ll always have a project underway, and you should always be making steady progress on it.)

Reading (for Tuesday)

Complete this reading for Tuesday. (From here on, reading will always be due on Tuesdays.) This week’s reading teaches you how to control space within and around elements on the page.

Are you having trouble working with files and folders? Finding that you make changes to a file but can’t get those changes to show up in the browser? Watch a file management tutorial on LinkedIn Learning, “Understanding files, folders, and directories” for Mac or “Navigating folders and their contents” for Windows.

You can sign in to LinkedIn Learning using your AU credentials.

Tue, Sept 15

Week 04

📅

Layout / CSS Grid

In class

  • Layout methods
  • CSS Grid

Demo files: DIVs/Grid demo (ZIP)

In-class exercise: layout examples (ZIP), target layout (JPG)

Projects

Reading

We’re taking a relatively new approach to layout, built around CSS Grid. Some of the best, approachable, intro material comes from Jen Simmons and Rachel Andrew. The reading this week is a series of videos, which introduce Grid-based layouts. You’ll use these techniques to build the rest of the projects for this class.

Your textbook covers an older approach, which we won’t use. For our class, please ignore Duckett’s layout methods. Most layout tutorials floating around the Internet are also using these older techniques.

Tue, Oct 6

Week 07

📅

Type / Color / Process

In class

  • Type hierarchy
  • Color models and transparency
  • Process and sketching

Projects

Reading

Tue, Nov 10

Week 12

📅

Mobile/responsive

In class

  • Designing for small screens and mobile devices
  • Media queries

Projects

Reading

Tue, Nov 24

Week 14

📅

CSS interactivity

In class

  • :hover and psuedo-classes
  • CSS transitions and transforms

Projects

Reading

Sat, Dec 12

📅

Exams end

Projects

  • Conference is due by Thursday, December 10, by 11 p.m.