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.
M 29 Aug #01
Topics
- Introduction to design for interaction
- HTML/CSS concepts
📎 HTML/typography intro: Kenilworth (text), Hello world (ZIP)
Projects
- Start Communicating design ★
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
- Frank Chimero, Designers vs Coding
- HTML & CSS, ch. 1 (available for download)
Projects
- Start Recipe ★
M 5 Sep
Labor Day; no class
W 7 Sep #03
Topics
- The box model
Reading
- Don't Fear the Internet:
Not a Series of Tubes and HTML (video) - HTML & CSS, ch. 2, 3
Projects
- Present Communicating design ★
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
- HTML & CSS, ch. 12
- How to Survive a Critique: A Guide to Giving and Receiving Feedback
Projects
- Complete all HTML and some design/CSS for Recipe; some studio work in class
M 19 Sep #06
Topics
- Watch Objectified
- DIVs and boxes
Reading
Projects
- Start Content and form ★
- Some studio work on Recipe
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)
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
- Frank Chimero, What Screens Want
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
- Don’t Make Me Think ch. 4, 5
- Optional: Descendant selectors (see also enormous list of selectors on MDN.)
M 24 Oct #16
Topics
- CSS selectors
- Backgrounds, shadows, and details
- 📎 CSS details, complete (ZIP)
Projects
- Content and form: add content
W 26 Oct #17
Plan
- Studio
Projects
- Content and form: add remaining content
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
W 7 Dec #28
Topics
- Intellectual property for designers
- Future
- Group critique of semifinal project
Reading
- Optional: look at AIGA Standard Contract
F 16 Dec
Exam period; no class
- Turn in Narrative ★ (upload to Dropbox by 5:00 p.m.)