Syllabus

This course introduces the practice of interaction design and frontend web development. It proposes that websites must be usable, compelling, interoperable, accessible, and ethical.

Catalog description

Students develop applied creative projects and acquire technical skills to become adept at essential software, design principles and practices for screen-based digital and emerging media. Students also learn foundations of front-end web coding such as HTML and CSS, and develop technical problem solving and organizational skills. Course lectures address the cultural backdrop of the Internet as it applies to design.

Approach

Topics covered include the fundamentals of website structure and navigation; writing HTML and CSS; application programming; 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. The course examines the designer’s ethical obligations to clients, the public, and society as a whole.

“The arts of taking things in—seeing, reading, drawing —assume a central role as do those of communicating what has been seen with power and economy. Rhetoric, the art of organizing the world of words to have maximum effect, re-emerges as fundamental; design, the art of organizing the world of things so that structures are compatible with the purposes they are meant to serve, assumes an equal importance.” (Elizabeth Coleman)

In the interest of gaining a strong command of the medium, the course focuses on writing HTML/CSS code by hand. It takes a typographical, content-centered approach to building sites. The class does not take up JavaScript and programming languages; successful projects will take approaches that do not rely on browser scripting.

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.

“Designers who only focus on “delighting the user” without considering the surrounding system risk putting lipstick on a truncheon.” (Erika Hall)

Critiques, discussions, and lectures generally take place at the beginning of class, with studio/lab time later. Be ready to present your work when class starts, with your files uploaded and documents printed.

Learning objectives

You will learn to:

• Write semantic, well-organized HTML and CSS
• Build interoperable, accessible sites
• Take a systems-based approach to design
• Analyze and critique interfaces from the perspectives of both user and designer
• Think about the social and political environment in which interactive systems operate
• Research questions about technical and design issues

Structure

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.

About code

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

Find a balance between your technical skill and your design ambitions. If you can’t make something work in the browser, consider simplifying your design.

You will learn more in this course if you refrain from borrowing code from outside sources. Never use code that you can’t explain, and always cite any code that you take from elsewhere.

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 (ramos@american.edu); I typically check email on weekday mornings.

Projects and grading

These percentages will change if assignments and schedules change.

• 25% Graded exercises and quizzes (expect quizzes on any material, assigned to date)
• 35% Story
• 40% Conference
• Participation modifies grades as necessary.

Deadlines

Projects are due at the beginning of class. You may resubmit work at any point through the last day of class.

Tools and reading

Textbook

There is one required textbook, along with assigned reading from other sources.

Duckett, Jon. HTML and CSS: Design and Build Websites. Hoboken, N.J.: Wiley, 2012. ISBN-13: 978-1118008188. htmlandcssbook.com

Additional resources

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

The AU Library provides access to LinkedIn Learning, formerly Lynda.com, which are especially useful for technical topics. If you need help logging in, speak with a librarian.

Recommended:

Marcotte, Ethan. Responsive Design: Patterns and Principles. New York, N.Y.: A Book Apart, 2015. (On reserve at the library. An ebook/PDF edition is available for $11.)

Andrew, Rachel. The New CSS Layout. New York, N.Y.: A Book Apart, 2017. (An ebook/PDF edition is available for $11.)

Required software + supplies

• Current versions of Firefox and Safari, with developer tools enabled
• HTML editing software (see below)
• 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 do not keep work on their hard drives.

You are responsible for knowing how to manage files and folders on a Mac, and on whatever machine you use for homework.

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:

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

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 sketches as they progress. Projects not seen in progress during previous classes will receive a failing grade.

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.

You must put your name (at a minimum, firstname and initial) in the readme file for each project. Instructor can’t identify the project? No credit.

Policies

Attendance

Attend scheduled class sessions. Grounds for excused absences are illness, family emergencies, jury or military service, and religious obligations. One unexcused absence will not affect your grade. Each additional unexcused absence will lower the course grade by one step (i.e. from A to A-).

Come to class on time. Lateness over a half hour will be counted as an absence.

Grading scale

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.
• Respect your fellow students. During discussions and demonstrations, stay off email, texts, and IM.
• Do not use computers for anything unrelated to this class. (Exception: if you’ve finished an exercise early.)
• No audio or video recording. If you need a recording of this class, ask me and I will arrange to provide one.

Academic integrity and citations

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: You must provide a citation for any material (including text, images, and source code) from a source outside of the textbook or class demonstrations. See class policy on citations and copyright.

Support services

American University offers an array of support services.