⌂ ◅ Classes + teaching ◅ Digital and Emerging Media Design I

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

◅ 📅

Color / Process

In class

Projects

  • Finish the “Content and discovery” phase of Story, and part 1 (and possibly part 2) of the “Design” phase
  • Crits for Story

Reading

Tue, Oct 13

Week 08

◅ 📅

Information architecture / Typography

In class

  • Information architecture
  • Navigation
  • Type hierarchy

Projects

  • Show refined sketches and site map for Story, and have refined your color and type choices from last week. You can present colors and type using style tiles, if you like.

Reading

Tue, Oct 20

Week 09

◅ 📅

Navigation bars / Flexbox

In class

  • Navigation bars
  • Flexbox
  • Psuedoproperties, and CSS transitions/transforms

Demo files

Projects

  • Start building pages for Story. Add screenshots to Miro. (Include sketches and any style tiles or moodboards, if you haven’t yet shown them.)

Reading

Tue, Oct 27

Week 10

◅ 📅

Accessibility

In class

Demo materials

Mentioned in class

Projects

  • Debugging/problem-solving for Story. You should be wrapping up initial development and starting to create additional pages, with content.

Reading

Tue, Nov 17

Week 13

◅ 📅

CSS details

In class

  • :hover and psuedo-classes
  • CSS transitions and transforms
  • border-radius
  • box-shadow
  • filters

Projects

  • For Conference, finish Phase 1 and Phase 2, and possibly start on Phase 3. Post to Miro: a sentence or two about your topic, type/color/image samples or moodboards, and possibly sketches.

Reading

Tue, Nov 24

Week 14

◅ 📅

Optional critiques

Projects

  • Crits for Conference. Have a solid idea for the conference and progress on design. Show two versions if you haven’t already; otherwise, one well-developed design direction. We’ll move on to code next week.

Reading

Reminder

We’ll be talking about privacy, surveillance, and design ethics this week. Make sure you’ve had a close look at three articles from earlier in the semester: