Digital and Emerging Media Design I

GDES-220 fall 2017 · American University Design
Instructor: David Ramos ( ramos@american.edu · office hours )

Schedule

Topics Reading Projects

M 28 Aug #01

  • Introduction to design for interaction
  • Fill out class survey

Th 31 Aug #02

  • Capturing meaning with HTML/CSS typography
  • Typographic markup (lists and inline elements)

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

  • Bring in a possible recipe

M 4 Sep

Labor Day (no class)

Th 7 Sep #03

  • The box model
  • Typographic controls in CSS
  • Classes and IDs
  • Some studio

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

M 11 Sep #04

  • DIVs and sectioning elements
  • A first look at links
  • Some studio
  • Questions in class for Recipe

Th 14 Sep #05

  • Finding, compressing, and inserting images
  • Backgrounds
  • Recap links

📎 Links demo: Links files (ZIP)
📎 Positioning and image demo: Example vector images (ZIP); Complete image demo (ZIP)

M 18 Sep #06

  • Images
  • GitHub and workflow for this course
  • Citing code sources

Th 21 Sep #07

  • Multicolumn layouts and floats

📎 Multicolumn layout demo: start (ZIP), complete (ZIP)
🌄 Grid slides (PDF)

  • HTML & CSS, ch. 15

M 25 Sep #08

  • Information architecture, navigation, naming, and site maps
  • Process and sketching

📎 Sketch templates (PDF)

  • HTML & CSS ch. 16 (layout)

Th 28 Sep #09

  • Color models and transparency
  • Grids and visual relationships
  • Building layouts

📎 Layout exercise: start (ZIP)

  • HTML & CSS, ch. 11

M 2 Oct #10

  • HTML/CSS menus

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

Th 5 Oct #11

  • Studio
  • HTML & CSS ch. 18

M 9 Oct #12

  • Mobile/multidevice

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

Th 12 Oct #13

  • Studio
  • Turn in Sitemap + Wireframe ✭
  • Semifinal critique for Content + Form

M 16 Oct #14

Th 19 Oct #15

  • Creative code: syntax

M 23 Oct #16

  • Conditionals, variables

Th 26 Oct #17

  • Loops

M 30 Oct #18

Th 2 Nov #19

  • Grids and visual relationships

M 6 Nov #20

  • Studio

Th 9 Nov #21

  • Watch Objectified

M 13 Nov #22

  • Studio
  • Critique

Th 16 Nov #23

  • Accessibility
  • Website hosting and CMS concepts

📎 Accessibility example (ZIP)
🌄 Hosting slides (PDF)
🌄 CMS slides (PDF)

M 20 Nov #24

  • Studio

Th 23 Nov

Thanksgiving Break

M 27 Nov #25

  • Usability testing

Th 30 Nov #26

  • Studio

M 4 Dec #27

  • Studio

Th 7 Dec #28

  • Last group critique for projects

Th 14 Dec

Exam period; no class