Syllabus

This course explores ways of conveying information, organizing experiences, and creating meaning in interactive systems.

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 ideas in projects that require strong process and independent research, producing design solutions that respond to project requirements and to their own technical ability.

Interaction design theory provides a foundation for understanding users and their behavior. We discuss the relationship between design, technology, and society, and reflect on the responsibilities that designers and technologists face.

Catalog description

This course prepares students for the world of professional web design. Through creative hands-on projects, exercises, and lectures, students learn to conceptualize, design, and deploy successful web sites for clients. Course topics include intermediate web design concepts such as interface design, usability principles, web typography, information architecture, compliant front-end HTML, CSS, and JavaScript code. Usually Offered: fall and spring. Prerequisite: GDES-200, GDES-210, GDES-220, and COMM-330.

Learning objectives

“We are designing verbs, not nouns.” (Bill Moggridge)

Students will gain fluency in:

• Designing meaningful and usable interfaces through the use of typography, color and imagery, page layout, interactivity, and text
• Understanding user behavior by applying interaction design concepts
• Discussing the social and ethical obligations of interaction designers
• Communicating design ideas using prototypes and documentation
• Working within and benefitting from constraints

Students will also become proficient at:

• Writing valid, semantically meaningful, maintainable HTML and CSS
• Using research and usability testing to inform design decisions

Structure

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.

Contact and office hours

An office hours schedule is published elsewhere on my site. The best way to reach me outside of office hours is through email (ramos@american.edu). Please allow one weekday for an email response. It is department policy not to do critiques over email.

Projects and grading

Evaluation is based on project work as completed, the process that leads up to the final versions, and participation and attendance.

• 10% Typographic processes
• 20% Resource conservation
• 30% Information architecture
• 40% Publishing systems
• Participation modifies grade as necessary.

These percentages will change if assignments and schedules change.

The graphic design program asks that all graphic design majors have an online portfolio by the conclusion of this class. We will discuss portfolios, but the portfolio is not a graded project.

Tools and reading

Books

There are two required textbooks (on reserve in the library).

Santa Maria, Jason. On Web Typography. New York, N.Y.: A Book Apart, 2011. (Available in print and as an ebook.)

Andrew, Rachel. The New CSS Layout. New York, N.Y.: A Book Apart, 2017. (Available in print and as an ebook.)

Additional resources

See a compilation of reference material on the separate Resources for IxD students site.

The AU Library provides access to Lynda.com online tutorials, which are especially useful for technical topics.

Other books that you might find helpful:

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.)

Brown, Dan M. Communicating Design: Developing Web Site Documentation for Design and Planning. Berkeley, Calif.: New Riders P., 2011.

Marcotte, Ethan. Responsive Design: Patterns and Principles. New York, N.Y.: A Book Apart, 2015. (Available in print and as an ebook.)

Required software and supplies

• Current versions of Firefox and Safari, with developer tools enabled
• HTML editing software (see below)
• Free GitHub account, and access to GitHub Desktop (available on lab machines)
• Figma (free)
• Access to Photoshop (available in labs)
• Paper or sketchbook
• Tracing paper pad
• Pen, pencil, and markers
• USB thumb drive or portable hard drive
• A separate hard drive or flash drive for backup

Lab machines are available, but you must not expect to save work on their hard drives. If you work on a laptop for lab/studio time, the computer must be able to run a text editor and Firefox.

Text editor for HTML/CSS

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:

• Sublime (Mac, Win, Linux; unrestricted demo)
• Atom (Mac, Win, Linux; open source)
• TextMate (Mac; open source)
• Brackets (Mac, Win, Linux; open source)

Do not use a visual editor (i.e., no Dreamweaver).

Keep backups and save versions

Back up your work! and save versions of your projects as you make progress. (More advice on backups and versioning.) Loss of data is not an excuse.

Process and submitting work

Projects in this class build through iterations; start early and work consistently. You will need to turn in evidence of your process, so keep versions of your files and paper sketches as they progress. Projects not seen in progress during previous classes will receive a failing grade.

Late work will be marked down.

See instructions for submitting work.

In the interest of efficiency and equity, HTML-based projects will be evaluated using a current build of Firefox on a Mac and, sometimes, Safari on an iPhone.

Policies

Attendance

Students are expected to attend scheduled class sessions. Grounds for excused absences are illness, family emergencies, jury or military service, and religious obligations. 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.

Grading scale

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 plusses and minuses.

• 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 investing considerable effort, time, and discipline.
• 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. No work on assignments for other courses.

Academic integrity

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 (including images and source 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.

Support services

American University offers an array of support services.