A website is a living thing–not an artifact–an arrangement of parts that changes under every person’s touch. Each user arrives with a unique combination of browser, interests, and circumstances. Sites grow and contract as editors add new stories and reorganize old ones. Interaction design offers a way of making sense of this unruly, flowing, evolving environment.
During this course we will learn to speak a new language–that of screen-based craft. This course aims to:
- Introduce students to writing hand-coded HTML and CSS as it applies to the practice of web design
- Empower students to analyze and critique interfaces from the perspectives of both user and designer
- Develop the student’s ability to use essential design software to create interfaces and assets
- Illuminate the thought process of the user by discussing and applying fundamental concepts of usability design
This course provides an overview of interaction design and web development, as background for future projects and further study. The course emphasizes process, including sketching, decision-making off of the computer, and the refinement of design concepts. It provides students with exposure to the tools that would help in the building and maintenance of a much larger site.
“It is very much about designing and prototyping and making. When you separate those, I think the final result suffers.” (Jonathan Ive, March 2012)
Topics covered include the fundamentals of website structure and navigation; writing HTML and CSS; working with images; accessibility and usability; web typography, and graphic design for the web. Students will experiment with self-publishing, creating projects driven by their own responses to class materials.
“A special thing happens when designers open up to code, or when coders gain a deeper grasp of design. Suddenly function and beauty starts to blend naturally. This is where interaction design shines both as a creative pursuit and a craft.” (Amit Pitaru)
In the interest of gaining a strong command of the medium, the course focuses on writing HTML and CSS code by hand, avoiding WYSYWIG editors. It takes a typographical, content-centered approach to building sites.
Students need not have any coding background. This class will be a mix of demonstrations, discussion, critiques, and studio working sessions. It requires extensive self-scheduled project work outside of the classroom.
After completing this course, students will be able to:
- Understand fundamental technologies of the web and how they work together to create a website
- Use HTML and CSS to create basic websites with single and multi-column layouts
- Use key tools of interactive design with basic proficiency, including Photoshop, Illustrator, and CSS
- Create hierarchy in an interactive layout in a way that promotes clarity and usability
- Understand the disposition of web users as it applies to creating usable interactive experiences
- Troubleshoot design and technical problems using online and printed resources
This class will be a mix of demonstrations, discussion, critiques, and studio working sessions. It requires extensive self-scheduled project work outside of the classroom. Projects are student-driven, using prompts as the starting points for more extensive research, asking students to create their own content and to supply their own point of view.
The class schedule and assignments are provisional and subject to change.
Office hours and contact
An office hours schedule is published elsewhere on your instructor’s site. The best way to reach me outside of office hours is through email (firstname.lastname@example.org). Please allow one weekday for an email response. It is department policy not to do critiques over email; plan ahead and take advantage of class time and office hours.
Projects and grading
30% Small projects and quizzes 70% Major projects
Expect quizzes on any reading material at any time; if you do the reading, you should do well on the quizzes. Participation modifies grade as necessary. These percentages will change if assignments and schedules change.
Tools and sources
This course uses assigned readings and two required textbooks, which are on a two-hour reserve at the library.
Duckett, Jon. HTML and CSS: Design and Build Websites. Hoboken, N.J.: Wiley, 2012. ISBN-13: 978-1118008188. htmlandcssbook.com
Krug, Steve. Don’t Make Me Think: A Common Sense Approach to Web Usability. 3rd ed. Berkeley, Calif.: New Riders, 2014. (The second edition is acceptable, though not ideal.)
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.
Required software + tools
- Google Chrome (preferably the Canary build)
- HTML editing software (see below)
- Paper or sketchbook
- Tracing paper pad
- Pen, pencil, and markers
- USB flash drive or portable hard drive (Google Drive and Dropbox accounts will not suffice)
- Backup drive (a separate device)
If you work on a laptop for lab/studio time, the computer must be able to run a text editor, Google Chrome, and GitHub Desktop.
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)
- Espresso (Mac; unrestricted demo)
- TextWrangler (Mac; free)
- TextMate (Mac; open source)
- Brackets (Mac, Win, Linux; open source)
Do not use a visual editor (notably, no Dreamweaver).
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.
Process and submitting work
This course seeks to help students to develop their own working processes. Good final projects come as the result of diligent, structured work earlier in the semester. Do not leave work for the last few weeks. You will need to turn in your process work as part of your projects, 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.
In the interest of efficiency and equity, HTML-based projects will be evaluated using a current build of Chrome Canary on a Mac.
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.
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 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 (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.
American University offers an array of support services.