This course explores ways of telling stories, organizing experiences, and creating meaning through interaction. Using hands-on projects, exercises, and lectures, students learn to design and develop successful projects for the web and interactive media. Subjects include user-centered design, information architecture, design documentation, prototyping and testing, graphic design for screens, and front-end web development.
Students learn how to produce designs that respond to user needs and social context. Interaction design theory provides a foundation for understanding users and their behavior. The class introduces research and usability testing as tools to inform design decisions. Projects take the form of documentation, prototypes, and HTML/CSS.
“People think it’s this veneer – that the designers are handed this box and told ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” (Steve Jobs in the New York Times, 2003)
Topics include graphic design for the web, screen typography, documentation and prototyping, user centered design methods, HTML/CSS development, and responsive/mobile design. Students will test these concepts with several projects that require strong process and independent research.
We discuss how design and technology help shape society, and reflect on the responsibilities that designers and technologists face. The course examines the place of interaction design within the larger design profession.
“We are designing verbs, not nouns.” (Bill Moggridge)
Students will gain fluency in:
- Applying user centered design methods
- Using research and usability testing to inform design decisions
- Communicating design ideas using prototypes and documentation
- Designing meaningful and usable interfaces through the use of typography, color and imagery, page layout, interactivity, and text
- Writing valid, semantically meaningful, maintainable HTML and CSS
Students will also become proficient at:
- Designing and developing responsive, multi-device websites
- Understanding user behavior by applying interaction design concepts
- Discussing the social and ethical obligations of interaction designers
- Researching design and technology topics in support of their own work
This course builds on skills students gain in GDES-220 Digital & Emerging Media Design I.
Class meetings will be a mix of demonstrations, discussion, critiques, and studio working sessions. There will be extensive self-scheduled project work outside of the classroom.
The class schedule and assignments are provisional and subject to change.
Katzen 241. Monday and Thursday, 12:30–2:30 pm, and by appointment.
Please visit my office hours in the first few weeks to go over class progress and to answer any questions about course expectations.
The best way to reach me outside of office hours is through email (email@example.com). Please allow one weekday for an email response. It is also department policy not to do critiques over email. Plan ahead and take advantage of class time and office hours.
Texts and tools
There are two required textbooks, needed by the third week of class:
Norman, Donald A. The Design of Everyday Things. New York, N.Y.: Basic Books, 2013. ISBN-13: 978-0465067107. (Please obtain the 2013 edition, not the 1988/2002 ones.)
Wroblewski, Luke. Mobile First. New York, N.Y.: A Book Apart, 2011. (Available in print and as an ebook.)
Brown, Dan M. Communicating Design: Developing Web Site Documentation for Design and Planning. Berkeley, Calif.: New Riders P., 2011.
The AU Library provides access to Lynda.com online tutorials, which are especially useful for technical topics.
Required software + materials
- Google Chrome (preferably the Canary build)
- HTML editing software
- Prototyping and graphics software
- Paper or sketchbook
- Tracing paper pad
- Pen, pencil, and markers
- Thumb drive, portable hard drive, or laptop (Google Drive and Dropbox accounts will not suffice)
- Backup drive (a separate device)
This class’ technical exercises focus on handcoding, which is the best way to understand how the web works. You will have access to a text editor in the Katzen labs. If you are working on your own machine, you will need your own software. Good editors include:
- Adobe Edge Code (Mac, Win)
- Espresso (Mac; unrestricted demo)
- Sublime (Mac, Win, Linux; unrestricted demo)
- TextWrangler (Mac; free)
- TextMate (Mac; open source)
Do not use a visual editor.
Prototyping and graphics software
Use some combination of prototyping and graphics software to create static wireframes, interactive prototypes, and diagrams. Acceptable tools include Illustrator, InDesign, Keynote, InVision, and Sketch. You may use other programs after obtaining the instructor’s permission.
Loss of data is not an excuse. Back up your work. An adequate backup plan involves duplicating your work across three different storage devices, kept in two separate locations.
Good final projects come as the result of diligent, structured work earlier in the semester. Projects not seen in progress during previous classes will receive a failing grade. Keep versions of your files and paper sketches.
If you are bringing work on paper for critiques – an excellent idea for sketches, wireframes, and design documentation – remember that other people in the class must be able to see your work and size your paper accordingly. You need not mount any work from this course.
In the interest of efficiency and equity, HTML-based projects will be evaluated using a current build of Chrome Canary on a Mac.
When you turn in your work, you’ll need to make sure that your project is identifiable. Send files through the Dropbox upload page, not as email attachments. Your instructor will discard documents that are attached to email.
- Put the files into a folder.
- Put your name on the folder name, along with the project title:
firstname lastname - projectname.
- ZIP-compress the folder.
- Upload the ZIP file to the class Dropbox file request page.
You may submit the following file formats: PDF, HTML/CSS/JS, JPG, PNG, GIF (if you must), Keynote, MOV, MP4, MP3, AAC, MD, and TXT. Do not send Photoshop, InDesign, or Illustrator files.
Late work will be marked down.
Students are expected to attend scheduled class sessions. Grounds for excused absences are illness, family emergencies, jury or military service, and religious obligations. Provide documentation for your absence. One unjustified absence is allowed for the semester. Each additional absence will lower the course grade by one step (i.e. from A to A-).
Come to class on time and do not leave early. Excessive tardiness, early departures, excessive break time, and lack of participation in assigned class activities will count as equivalent to half an absence (2=1 absence). Tardiness over a half hour will be counted as an absence.
10% Quizzes 80% Major projects and Project X 10% Portfolio project
Participation modifies grades as necessary.
This course is modeled on the rigor of the graphic design curriculum at American University, which is in turn based on the standards of the graphic design industry. As such, students often find this to be a challenging course in which a significant amount of work must take place in the studio outside of class time. Your instructor will use the following grade scale when evaluating projects, with plus and minus grades.
- A 100–90 (“Wow”) This grade indicates work which is clearly superior. It does not mean “satisfactory” or “adequate.” Do not expect to receive an “A” without considerable effort.
- B 89–80 (“Good”) This grade indicates work that is more than merely satisfactory, reflecting strong understanding of the material.
- C 79–70 (“Okay”) This grade indicates work which is merely competent, adequate, and satisfactory. Such work reflects understanding of most of the material covered.
- D 69–60 (“Bad”) This grade indicates work which is unsatisfactory, not competent, or inadequate in terms of presentation or fulfilling the assignment.
- F below 60 This grade is assigned for failure to complete an assignment in a timely and competent manner.
In the classroom
- Silence ringers on phones.
- Stay off headphones, email, texts, and IM. Do not use computers for leisure browsing or work on assignments for other courses.
- Food is not allowed in the studio or in the computer labs. Keep drinks in containers with lids, and set them at the front of the lab, away from computers.
Standards of academic conduct are set forth in the University’s Academic Integrity Code. Please see me or consult the student handbook if you have questions about academic violations described in the Code or as they relate to particular requirements for this course.
Image and code citations: If you use any code from a source outside of the textbook and class demonstrations, insert a comment describing the material that you used, along with a URL for the original code. See class policy on citations and copyright.
Academic Support and Access Center MGC 243, 202-885-3360 supports the academic development and educational goals of all AU students while also providing support to students with disabilities. We offer workshops on topics of interest to all students such as time management, note taking, critical thinking, memory skills, and test taking. Additional support includes free private and group tutoring in many subjects, supplemental instruction, The Math Lab and The Writing Lab.
Counseling Center MGC 214, 202-885-3500 is here to help students make the most of their university experience, both personally and academically. We offer individual and group counseling, urgent care, self-help resources, referrals to private care, as well as programming to help you gain the skills and insight needed to overcome adversity and thrive while you are in college. Contact the Counseling Center to make and appointment in person or by telephone, or visit the Counseling Center page on the AU website for additional information.
Center for Diversity & Inclusion MGC 201, 202-885-3651 is dedicated to enhancing LGBTQ, Multicultural, First Generation, and Women’s experiences on campus and to advance AU’s commitment to respecting & valuing diversity by serving as a resource and liaison to students, staff, and faculty on issues of equity through education, outreach, and advocacy.
OASIS: The Office of Advocacy Services for Interpersonal and Sexual Violence 202-885-7070 provides free and confidential advocacy services for anyone in the campus community who experiences sexual assault, dating or domestic violence or stalking.
American University expressly prohibits any form of discriminatory harassment including sexual harassment, dating and domestic violence, sexual assault, and stalking. The university is and equal opportunity, affirmative action institution that operated in compliance with applicable laws and regulations, and does not discriminate on the basis of race, color, national origin, religion, sex (including pregnancy), age, sexual orientation, disability, marital status, personal appearance, gender identity and expression, family responsibilities, political affiliation, source of income, veteran status, an individual’s genetic information or any other bases under federal or local laws in its programs and activities.
If you experience any of the above, you have the option of filing a report with the AU Department of Public Safety 202-885-2527 or the Office of the Dean of Students 202-885-3300 firstname.lastname@example.org. Please keep in mind that all faculty and staff – with exception of counselors in the Counseling Center, victim advocates in the Wellness Center, medical providers in the Student Health Center, and ordained clergy in the Kay Spiritual Life Center – who are aware of or witness this conduct are required to report this information to the university, regardless of the location of the incident.
The Writing Center First floor of Bender Library offers free, individual coaching sessions to all AU students. In your 45-minute session, a student writing consultant can help you address your assignments, understand the conventions of academic writing, and learn how to revise and edit your own work. Hours: 11 a.m. to 9 p.m. Monday through Thursday; 11 a.m. to 6 p.m. Friday. Call 202-885-2991 to arrange a session. Meanwhile find handouts, information, and a weekly writer’s blog at the Writing Center website and on Facebook.
International Student & Scholar Services, Batelle 4th Butler Pavilion, Room 410 has resources to support academic success and participation in campus life including academic counseling, support for second language learners, response to questions about visas, immigration status and employment and intercultural programs, clubs and other campus resources.