Digital and Emerging Media Design I
GDES-220 fall 2015 · American University Design
Instructor: David Ramos (ramos@american.edu)
Schedule
Assignments and reading are listed under the class when they are due.
Use the basic site files as the starting point for projects.
Tu 1 Sep
Topics
- Introduction
In-class
- 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 3 Sep
Topics
- HTML/CSS typography: capturing meaning
Reading
- Frank Chimero, Designers vs Coding
In class
- Basic site
- Kenilworth (text)
- Text Fixer
Tu 8 Sep
Topics
- The Box Model
- HTML/CSS page layout
Reading
- HTML & CSS, ch. 1 (available for download)
- Suggested: Don't Fear the Internet:
Not a Series of Tubes and HTML (video)
Projects
- Present Communicating design
- Start Recipe
In class
- Adobe Color (a well-designed color picker)
F 11 Sep
Topics
- HTML/CSS page layout (white space and DIVs)
- Classes and CSS
Reading
- HTML & CSS, ch. 2, 3
In class
- Layout demo (ZIP)
- Layout demo, complete (ZIP)
Tu 15 Sep
Topics
- Images
- Studio work on Recipe
Reading
- HTML & CSS, ch. 12
- How to Survive a Critique: A Guide to Giving and Receiving Feedback
In class
- Example vector images (ZIP)
Tu 22 Sep
Topics
- Thinking about page layout
- Basic InDesign for design documentation
Projects
- Present Recipe Markup
Reading
- HTML & CSS, ch. 16
F 25 Sep
Topics
- HTML/CSS page layout
- Sketching and process
Projects
- Choose three Wikipedia articles. They should be long articles (roughly, at least twelve screens of text). Be prepared to spend one or two minutes telling the class about your choices.
- Start Content and form ★
Reading
- HTML & CSS ch. 16 (layout)
- Multipage sites and links
In class
Tu 29 Sep
Topics
- Creating emotion with image choice, color, and typography
Reading
In class
- Layout exercise (ZIP)
F 2 Oct
Topics
- Designing for users
- Work in class
- Small group critique for Content and form
Reading
Tu 6 Oct
Topics
- Information architecture, navigation, and naming
Reading
- HTML & CSS ch. 18
F 9 Oct
Fall break; no class
F 16 Oct
Topics
- Review floats, percentage widths, and layout
- Links: external, anchors, images, borders/backgrounds
Reading
- Don’t Make Me Think ch. 6
In class
- Float demo (ZIP)
- Float demo, complete (ZIP)
Tu 20 Oct
Topics
- Website hosting
Projects
- Desk crits/work in class
Reading
- Don’t Make Me Think ch. 2, 3
F 23 Oct
Projects
- Large-group critique for Content and form
Reading
- Don’t Make Me Think ch. 4, 5
Tu 27 Oct
Topics
- Website hosting demo
- Layout from sketch to HTML
Projects
- Large-group critique for Content and form
F 30 Oct
Topics
- Details: backgrounds, shadows, and more
Tu 3 Nov
Projects
- Last critique for Content and form; last work in class w. questions
- Start thinking about Narrative ★
F 6 Nov
Topics
- CSS transforms and transitions
- Process and sketching
Projects
- Turn in Content and form ★ (upload to Dropbox—please upload a single ZIP file, not many individual files)
- Discuss ideas for Narrative ★
Upcoming Events
- Saturday 7 November, 6 pm: Gallery talk with Marc Pekala and Michael Graham at the AU Museum
- Monday 9 November, 8 pm: Talk by Nathan Hill, sponsored by the AU Design Club, in Katzen 204
Tu 10 Nov
Topics
- A glimpse of JavaScript
Projects
- Narrative: site maps; three versions of low-fi wireframes
In class
- jQuery documentation
- Basic JavaScript + jQuery demo (ZIP)
- Basic JavaScript + jQuery demo, complete (ZIP)
- JavaScript scene demo (ZIP)
- JavaScript scene demo, complete (ZIP)
- To reiterate, jQuery is a library (a set of tools) for JavaScript. They are not the same.
F 13 Nov
Topics
- JavaScript: evaluating and using an existing script
In class
- Unslider demo, complete (ZIP)
Projects
- Narrative: style tiles, two versions; refined wireframes
- Small group critiques and work in class
Tu 17 Nov
Topics
- Professional practice in interaction/digital
- Guest Speaker, Willie Shubert, Earth Journalism Network on networks and geojournalism
Projects
- Narrative: hi-fi wireframes, two versions
F 20 Nov
Topics
- Professional practice in interaction/digital
- Guest speaker, Bernard Yu
Projects
- Narrative: work in class and small group critiques; talk through markup/layout strategies
In class
- Professional practice slides (PDF)
- Bernard’s presentation and the path we didn’t take
Tu 24 Nov
Topics
- Mobile/multidevice design and code
Projects
- Narrative: HTML/CSS for home page and one other key page
- Desk crits/work in class
In class
- Responsive demo (ZIP)
- Responsive demo, complete (ZIP)
- Mobile slides (PDF)
F 27 Nov
Thanksgiving break; no class
Tu 1 Dec
Topics
- Coding accessibile sites
- Design for accessibility
- Guest speaker, Liz Calka re user experience design
Projects
- Desk crits/work in class
In class
- Accessibility example (ZIP)
- What is web accessibility and WebAIM
- Liz: AIGA Design Salaries
F 4 Dec
Topics
- Intellectual property for designers
- Content management system concepts
- Learning on your own
Projects
- Group critique
- Work in class