Monday/Wednesday

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

Schedule

This schedule will change during the semester. Readings are listed under the class when they are due. Be ready to present your work in progress for any class.

This week

M 29 Aug #01

Topics

  • Introduction to design for interaction
  • HTML/CSS concepts

📎 HTML/typography intro: Kenilworth (text), Hello world (ZIP)

Projects

Hey!

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

W 31 Aug #02

Topics

  • Capturing meaning with HTML/CSS typography

📎 First site: Basic site, Text Fixer

Reading

Projects

M 5 Sep

Labor Day; no class

W 7 Sep #03

Topics

  • The box model

Reading

Projects

M 12 Sep #04

Topics

  • HTML/CSS box model (more on white space and DIVs)
  • Classes and IDs
  • Type

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

W 14 Sep #05

Topics

  • File structure
  • Images

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

Reading

Projects

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

M 19 Sep #06

Topics

Reading

Projects

W 21 Sep #07

Topics

  • Positioning
  • Links

📎 Links demo: Links files (ZIP)

Reading

  • HTML & CSS, ch. 5

Projects

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

M 26 Sep #08

Topics

  • Multicolumn pages
  • Grids and visual relationships

📎 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); three or more style tiles; or a combination of the two.

Reading

  • HTML & CSS ch. 16 (layout)

W 28 Sep #09

Topics

  • Sketching and process
  • Studio

Reading

M 3 Oct #10

Topics

  • Color models
  • Building layouts

📎 Layout exercise: start (ZIP)

Projects

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

W 5 Oct #11

Topics

  • Studio

Projects

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

Reading

M 10 Oct #12

Topics

  • Information architecture, navigation, naming, and site maps

Projects

  • Content and form: show working template for one page

Reading

  • HTML & CSS ch. 18

W 12 Oct #13

Topics

  • HTML/CSS menus

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

Projects

  • Have refined design for front page and inside page

Reading

  • Don’t Make Me Think ch. 6

M 17 Oct #14

Topics

  • Background images
  • Selectors; reviewing floats

📎 Float demo: start (ZIP)
📎 Selector/background demo (ZIP), complete (ZIP)

Projects

  • Content and form: show working templates for all pages

Reading

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

W 19 Oct #15

Topics

  • Studio

Reading

M 24 Oct #16

Topics

Projects

  • Content and form: add content

W 26 Oct #17

Plan

  • Studio

Projects

  • Content and form: add remaining content

M 31 Oct #18

Topics

  • Mobile/multidevice
  • Studio

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

W 2 Nov #19

Topics

  • Studio

Projects

M 7 Nov #20

W 9 Nov #21

M 14 Nov #22

Topics

  • Studio

Projects

  • Conference: critique site maps and three style tiles

W 16 Nov #23

Topics

  • Intro to JavaScript
  • Studio

📎 JavaScript intro: jQuery documentation,
Basic JavaScript + jQuery demo (ZIP),
Basic JavaScript + jQuery demo, complete (ZIP),
JavaScript scene demo (ZIP),
JavaScript slides (PDF)

Projects

  • Conference: critique final style tile and rough sketches for page layout

M 21 Nov #24

Topics

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

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

Projects

  • Conference: critique refined sketches for every page type

W 23 Nov

Thanksgiving Break

M 28 Nov #25

Topics

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

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

Projects

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

W 30 Nov #26

Topics

  • Studio

M 5 Dec #27

Topics

W 7 Dec #28

Topics

  • Intellectual property for designers
  • Future
  • Group critique of semifinal project

Reading

F 16 Dec

Exam period; no class

  • Turn in Narrative ★ (upload to Dropbox by 5:00 p.m.)