Digital and Emerging Media Design I

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

Schedule

§1 M-Th Topics Reading Projects

#01

M 27 Aug

#02

Th 30 Aug

  • Capturing meaning with HTML
  • CSS typography
  • Typographic markup (headers, paragraphs, lists, and inline elements)

📎 First site: Basic site (ZIP), Shape of Design excerpt (TXT), Text Fixer

  • Bring in a possible recipe

M 3 Sep

Labor Day

#03

Th 6 Sep

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

📎 Layout/typography demo (ZIP), complete (ZIP)

  • Complete HTML for Recipe

#04

M 10 Sep

#05

Th 13 Sep

  • Links, paths, and URLs

📎 Links demo: Links files (ZIP)

  • Critique Recipe ✭
  • Story: give a three-minute presentation about two possible Wikipedia articles.

#06

M 17 Sep

  • Citing code sources
  • Process
  • Sketching for multiple screens

📎 Sketch templates (PDF)

  • Story: show color swatches, type samples, and image samples. Have this material printed at the start of class. (See example sheets (PDF).)
  • Studio
  • Create site map during class

#07

Th 20 Sep

  • Images
  • Backgrounds
  • Finding images

📎 Positioning and image demo: Example vector images (ZIP); Complete image demo (ZIP);
Image exercise (ZIP)

  • HTML & CSS, ch. 5 (images)
  • Start listening to Manoush Zomorodi, The Privacy Paradox (complete the activities, if you’d like)
  • Look at site maps

#08

M 24 Sep

  • Comparing CSS layout methods
  • CSS Grid

📎 Sketch templates (PDF); Grid example (ZIP)

  • Critique/studio

#09

Th 27 Sep

  • Type hierarchy and grids
  • Web hosting and publishing sites

🌄 Grids (PDF)

#10

M 1 Oct

  • CSS Grid exercise

📎 Layout exercise (ZIP)

#11

Th 4 Oct

#12

M 8 Oct

  • Flexbox
  • Color models and transparency

#13

Th 11 Oct

  • Studio

#14

M 15 Oct

#15

Th 18 Oct

  • Final critique for Story ✭

#16

M 22 Oct

#17

Th 25 Oct

  • Privacy and agency on the Internet
  • Present two conference ideas

#18

M 29 Oct

  • Mobile, multidevice, and media queries

📎 Responsive demo + exercises (ZIP)

  • Give five-minute presentation of two conference ideas

#19

Th 1 Nov

  • Visit to digital agency 🏢

#20

M 5 Nov

  • Navigation
  • HTML/CSS menus

📎 Navigation demo: start (ZIP), complete (ZIP)

  • Studio
  • Critique design concepts for Conference

#21

Th 8 Nov

  • Studio
  • Presentations for Attention ✭

#22

M 12 Nov

  • Accessibility

📎 Accessibility example (ZIP)

#23

Th 15 Nov

  • Studio

#24

M 19 Nov

  • Wireframes, mockups, and prototypes

Th 22 Nov

Thanksgiving Break

#25

M 26 Nov

  • Studio

#26

Th 29 Nov

  • Website hosting

🌄 Hosting slides (PDF)
Responsive demo + exercises (ZIP)

#27

M 3 Dec

  • Studio

#28

Th 6 Dec

  • Last group critique for projects ✭

Th 13 Dec

Exam period; no class