Digital and Emerging Media Design I

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

Schedule

Readings are listed under the class when they are due. ¶ See also the resources site.

GitHub classroom

This week

Tu 17 Jan #01

Topics

  • Introduction to design for interaction

Projects

Hey!

There’s reading due for next class! It’s listed under next class’ entry.

F 20 Jan

Inauguration Day (no class)

Tu 24 Jan #02

Topics

  • Capturing meaning with HTML/CSS typography
  • GitHub and workflow for this course

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

Reading

Projects

F 27 Jan #03

Topics

  • The box model
  • Typographic markup (lists and inline elements)
  • A first look at links

Reading

Projects

  • Bring in a recipe
  • Continue work on Communicating design

Tu 31 Jan #04

Topics

  • Classes and IDs
  • Typographic controls in CSS
  • Bring scissors or a craft knife

Reading

Projects

Tu 7 Feb #06

Topics

  • File structure

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

Reading

Projects

  • Complete all HTML and some design/CSS for Recipe; some studio work in class

F 10 Feb #07

Topics

  • Images
  • Recap links

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

Reading

  • HTML & CSS, ch. 5

Projects

Tu 14 Feb #08

Topics

  • Notes on file structure and submitting work

Reading

  • HTML & CSS ch. 16 (layout)

Projects

  • Turn in Recipe
  • Present two or three possible articles for Content and form

F 17 Feb #09

Topics

  • Positioning, DIVs, and boxes
  • Multicolumn pages

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

Projects

  • Content and form: gather material. Bring collections of several dozen items (images, colors, patterns, type, and the like). Please print out your material and pin up.

Reading

Tu 21 Feb #10

Topics

  • Sketching and process
  • GitHub workflow (set up Content and Form)

📎 Sketch templates (PDF)

Projects

  • Content and form: present three options for design concept as style tiles

F 24 Feb #11

Topics

  • Grids and visual relationships
  • Building layouts

📎 Layout exercise: start (ZIP)

Projects

  • Content and form: present refined version of one design concept

Reading

Tu 28 Feb #12

Topics

  • Information architecture, navigation, naming, and site maps
  • Color models
  • Studio

Reading

  • HTML & CSS ch. 18

F 3 Mar #13

Topics

Reading

  • Don’t Make Me Think ch. 6

Tu 7 Mar #14

Topics

  • Studio

Projects

  • Show three or more design concepts (sketches, type samples, color schemes, and image samples) and two or more site maps, printed out for pinning up. After this class, aim to be working on live HTML/CSS.

Reading

  • Don’t Make Me Think ch. 2, 3

F 10 Mar #15

Topics

  • Studio

Reading

Projects

  • Content and form: During class, plan code and move to HTML/CSS.

M 13 Mar

Spring Break

Th 16 Mar

Tu 21 Mar #16

Topics

  • HTML/CSS menus

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

Projects

  • Content and form: add content

F 24 Mar #17

Plan

  • Backgrounds, shadows, and details

📎 CSS details, complete (ZIP)
📎 Selector/background demo (ZIP), complete (ZIP)

Projects

  • Content and form: add remaining content

Tu 28 Mar #18

Projects

F 31 Mar #19

Projects

Tu 4 Apr #20

Topics

  • Mobile/multidevice

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

Projects

  • Conference: present ideas

F 7 Apr #21

Topics

  • Studio

Projects

  • Conference: in second half of class, critique site maps, three style tiles, and rough sketches for internal pages

Tu 11 Apr #22

Topics

  • Studio

Projects

  • Conference: show final style tiles and layouts for internal pages

F 14 Apr #23

Topics

  • Intro to JavaScript

JavaScript intro: jQuery documentation,

📎 Basic JavaScript + jQuery demo (ZIP), complete (ZIP)
📎 JavaScript scene demo (ZIP)
🌄 JavaScript slides (PDF)

Tu 18 Apr #24

Topics

  • JavaScript: evaluating and using an existing script
  • CSS transforms and transitions

📎 Script: Unslider demo (ZIP), complete (ZIP)

F 21 Apr #25

Topics

  • Studio

Projects

  • Conference: critique HTML/CSS work (finished typographic system, navigation system, and one page layout)

Tu 25 Apr #26

Topics

  • Coding accessibile sites
  • Design for accessibility
  • Website hosting and CMS concepts

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

F 28 Apr #27

Topics

  • Studio

Classes

  • Last group critique for projects

M 8 May

Exam period; no class