Digital and Emerging Media Design I
GDES-220 spring 2016 · American University Design
Instructor: David Ramos (ramos@american.edu)
Schedule
Assignments and reading are listed under the class when they are due. Be ready to present your work in progress for any class.
Useful: resources for IxD students, basic site (ZIP), Dropbox upload
M 11 Jan
Topics
- Introduction
- 📎 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.
Th 14 Jan
Topics
- HTML/CSS typography: capturing meaning
- 📎 First site: Basic site, Kenilworth (text), Text Fixer
Reading
- Frank Chimero, Designers vs Coding
M 18 Jan
Martin Luther King, Jr. Day; no class
Th 21 Jan
Topics
- The Box Model
- HTML/CSS page layout
Reading
- HTML & CSS, ch. 1 (available for download)
- Don't Fear the Internet:
Not a Series of Tubes and HTML (video)
Projects
- Turn in Communicating design ★
- Start Recipe ★
M 25 Jan
Snow; no class
Th 28 Jan
Topics
- HTML/CSS page layout (more on white space and DIVs)
- Classes, IDs, and CSS
- 📎 Layout/typography demo (ZIP), complete (ZIP)
Reading
- HTML & CSS, ch. 2, 3
M 1 Feb
Topics
- Images
- Positioning
- 📎 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
- Turn in Recipe ★
- Start Content and form ★
Th 4 Feb
Topics
- Design considerations for page layout
- Grid exercise (bring tracing paper)
Reading
Projects
- Present ideas for Content and form
M 8 Feb
Topics
- File structure and links
- Sketching and process
- 📎 Links demo: Links files (ZIP)
- Ideation/sketching exercise (bring tracing paper)
Reading
- HTML & CSS, ch. 5
From class
- Stock Photo University
- Rachel: Hungry Harvest
Th 11 Feb
Topics
Reading
- HTML & CSS ch. 16 (layout)
Th 18 Feb
Topics
- Creating emotion with image choice, color, and typography
- Work in class
- 📎 Layout exercise: start (ZIP)
- Quiz: HTML elements and syntax
Th 25 Feb
Topics
- Designing for users
- Information architecture, navigation, and naming
Projects
- Content and Form: present three concepts with sketches, type choices, color, and image examples (on paper)
Reading
- HTML & CSS ch. 18
M 29 Feb
Topics
- Review floats, percentage widths, and layout
- Background images
- 📎 Float demo: start (ZIP), complete (ZIP)
Projects
- Have refined design for front page and inside page
Reading
- Don’t Make Me Think ch. 6
Th 3 Mar
Topics
- CSS child, descendant, and pseudo selectors
- Layout workshop
- 📎 Selector demo (ZIP)
From class
- Descendant selectors (see also enormous list of selectors on MDN.)
Reading
- Don’t Make Me Think ch. 2, 3
M 7 Mar
Spring break
Th 10 Mar
Spring break
M 14 Mar
Topics
- Website hosting demo
Projects
- Large-group critique for Content and form
Reading
- Don’t Make Me Think ch. 4, 5
Th 17 Mar
Reading
- Quiz on reading, Ch. 6: (know this), then download the quiz (PDF). Either upload to Dropbox or put under office door (Katzen 241) by noon Friday.
M 21 Mar
Topics
- Details: backgrounds, shadows, and more
- 📎 CSS details, complete (ZIP)
Projects
- Desk crits and work in class
Th 24 Mar
Topics
- CSS transforms and transitions
- Process and sketching
- Learning InDesign for design documentation
Projects
- Turn in Content and form ★
- Start Narrative ★
- Discuss ideas for Narrative
M 28 Mar
Topics
- A glimpse of JavaScript
- 📎 JavaScript intro: jQuery documentation,
Basic JavaScript + jQuery demo (ZIP),
Basic JavaScript + jQuery demo, complete (ZIP),
JavaScript scene demo (ZIP),
JavaScript slides (PDF)
Projects
- Narrative: studio work; site maps, three versions of low-fi wireframes
From class
- jQuery “AND” filtering (ZIP)
Th 31 Mar
Topics
- JavaScript: evaluating and using an existing script
- 📎 Script: Unslider demo (ZIP),
Unslider demo, complete (ZIP)
Projects
- Narrative: group critique; two versions of style tiles, refined wireframes
M 4 Apr
Topics
- Professional practice in interaction/digital
Projects
- Narrative: hi-fi wireframes, two versions
From class
Th 7 Apr
Topics
- Mapping quick-start; iframes and embedding
Projects
- Narrative: work in class and large group critique; talk through markup/layout strategies
M 11 Apr
Topics
Projects
- Narrative: HTML/CSS for home page and one other key page
From class
- Mobile slides (PDF)
Th 14 Apr
Topics
- Coding accessibile sites
- Design for accessibility
- 📎 Accessibility example (ZIP)
From class
M 18 Apr
Topics
- Content management system concepts
Th 21 Apr
Topics
- Intellectual property for designers
Projects
- Desk crits/work in class
M 25 Apr
Topics
- Learning on your own
Projects
- Group critique of semifinal project
From class
- Suggestions slides (PDF)