⌂ ◅ Classes + teaching

GDES-220 fall 2023 / David Ramos, American University Design

Digital and Emerging Media Design I

Week 01

◅ 📅

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

Monday

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

  • About this course
  • Early days of the web

Projects

Thursday

  • Intro to HTML and CSS

Demo 1 files: Intro demo (ZIP)

Demo 2 files: Basic site (ZIP), Shape of Design excerpt (text)

Reading

Complete this reading by Thursday.

Week 02

◅ 📅

Capturing meaning with HTML/CSS typography

Monday

No class for Labor Day.

Thursday

  • Typography and CSS
  • Demo files: Basic site (ZIP)
  • Finish parts 1 and 2 of Recipe before the start of class on Thursday. (No need to turn it in yet.)
  • Continue working on Recipe, moving on to part 3 (CSS). The final version is due next week.

Reading (for Thursday)

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

Follow-ups from class

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

  • Complete Recipe for Thursday
  • On Thursday, start work on Typography. (We’ll always have a project underway, and you should always be making steady progress on it.)

Reading

Complete this reading for Thursday. 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.

Week 04

◅ 📅

Introducing layout methods

Monday

  • Comparing layout methods
  • One-column layouts, vertical space, and the box model
  • Work on Typography

Demo files: Introducing layout demo (ZIP)

Thursday

Reading

Note: your textbook covers an older approach to layout, 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.

Week 07

◅ 📅

Color / Parts of a page

Monday

Topics

  • Color models and transparency
  • Parts of a page
  • Process for Story

From class

Projects

Thursday

Projects

Reading

Week 10

◅ 📅

Accessibility

Monday

In class

  • Accessibility
  • Small group critiques

Demo materials

From class

Thursday

Projects

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

Reading

Week 11

◅ 📅

CSS details

Monday

In class

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

Thursday

Projects

  • Debugging/problem-solving for Story

Reading

From previous weeks:

Week 13

◅ 📅

CSS details

Optional critiques online on Monday. No class Thrusday.

Monday

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

Week 14

◅ 📅

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. Move on to code this week, after you’ve resolved design questions.

Reading