⌂ ◅ 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 / 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

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

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

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

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

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: