home ◅ Classes + teaching ◅ Digital and Emerging Media Design I

Syllabus

GDES-220 fall 2018 (David Ramos, American University Design)
ramos@american.edu · office hours · interaction design resources

Websites, software, and user-driven systems are living things–not fixed artifacts, but arrangements of parts that change under every person’s touch. Interaction design offers ways of making sense of this unruly, flowing, evolving environment. It gives designers the means to advocate for technology that truly serves users and advances the public interest.

Approach

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 proposes that designers have an ethical responsibility to their 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)

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.

“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 code by hand. It takes a typographical, content-centered approach to building sites. There is a minimum of coverage of 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.

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:

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.

You should budget at least 3–4 hours/week for homework and reading, in addition to class time.

About code

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). It is department policy not to do critiques over email; plan ahead and take advantage of class time and office hours.

Projects and grading

5% Recipe
35% Story
35% Conference
5% Attention
5% Type + image
15% Quizzes

Projects are due at the beginning of class. You may turn in projects at any point up to one week after the due date, without penalty. Grades will drop by one letter (i.e., A- to B-) for every additional week that the project is late.

Tools and sources

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 Lynda.com online tutorials, which are especially useful for technical topics.

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 + tools

If you work on a laptop for lab/studio time, the computer must be able to run a text editor, Safari or Firefox, and an SFTP client.

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:

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

Hosted services

The graphic design program provides free project hosting for the duration of this class.

Backup strategy

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

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 Safari on a Mac and, sometimes, 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

Your instructor will use the following grade scale when evaluating projects, with plusses and minuses.

In the classroom

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.