Syllabus

Interactive Web Design I · DM2280B spring 2013 · Corcoran College of Art + Design
Instructor: David Ramos alberto_ramos@corcoran.edu

A website is a living thing. Not an artifact, but an arrangement of parts that changes under every person’s touch. Every 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. Design’s power lies in building systems that can respond to unknowable needs.

Description

This course offers a technical and conceptual introduction to design for the web. Topics covered include visual design; the fundamentals of website structure and navigation; accessibility and usability; and writing HTML and CSS. Projects examine the web as a platform for both client-driven and self-published work.

Approach

“It is very much about designing and prototyping and making. When you separate those, I think the final result suffers.” (Jonathan Ive, March 2012)

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. Topics covered include the fundamentals of website structure and navigation; writing HTML and CSS; working with images; accessibility and usability; web typography, and visual design. Students will experiment with self-publishing, creating projects driven by their own responses to class materials. On a conceptual level, this course interests itself in networked media as a key to understanding the larger world.

“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 with limited software assistance, 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. This introductory course leaves some subjects aside in the interest of time and clarity. It discusses JavaScript only briefy, and does not cover Flash or back-end coding.

Objectives

Students will:

Projects

Instructions

Artists and designers often write instructions that other people interpret. Experiment with what happens when two people share different parts of the design process.

Recipe markup

Websites are made up of many pieces that come together in the browser. This assignment takes a first look at web technologies, examining ways of using HTML to describe structure, and of laying out pages with CSS.

Event ★

Build a small website for an event that interests you. The project will be easiest if you choose a real event, and one that is not too large. Begin by framing your question: define, for yourself, what the site needs to convey, and to whom it needs to speak. Consider the nature of the event, and the site’s audiences and their expectations. Move into a research phase, gathering information about your event, related events, and websites that might inform your decisions. Begin to design the site, starting with offline sketches and studies for concepts, and moving to static wireframes/comps. Finally, produce the site in HTML/CSS, testing for browser rendering.

System

Organize a website for high usability and understandability. Produce print-based design documentation to explain your ideas.

Narrative ★

Build a website that tells users a story. Consider navigation, user experience, typography, image choice, and the value of templates and shared stylesheets in web development. Think of this website as a single system, built from many smaller and reusable parts.

Weblog

Keep a weblog for this class. Use it to set down, in writing, your thoughts about your projects and the reading. The writing need not be particularly formal – it is most important that you take the opportunity to reflect. Freewriting would be entirely fine. Aim for at least a paragraph for each weeks’ reading assignments, and a paragraph each week for your projects.

Process book

As you work over the semester, save your files, sketches, notes, and raw material. Assemble these clippings into a process book that records your progress over the term. The book can be rough. Deliver your process book in PDF form.

Grading

30%	Event
35%	Narrative
15%	Other projects
10%	Weblog
10%	Participation

Tools + resources

Texts

This course draws on assigned readings and one required textbook.

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

Additional references will be linked from the course website. (Advice: start with the suggested references. Do not rely on low-quality sources, especially not W3Schools.)

Required software + tools

Text editor

This class focuses on handcoding. Students may use the text editor of their choice for writing HTML. In-class demonstrations will use Espresso (Mac; installed on lab machines).

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.

Work

Process

This course seeks to help students to develop their own working processes. Good final projects invariably 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 grade. Keep versions of your files and paper sketches as they progress. Never delete the files for anything you show in a critique.

Presenting work

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. You need not mount any work from this course.

Browser compatibility

Your work will be evaluated in the current version of Google Chrome Canary on the Mac, and you should code your projects for correct rendering and behavior in that environment. Projects must render correctly in this browser, with no fonts installed beyond system defaults, and no plugins (that is, no Flash). Browser debugging, beyond good coding practices and standards compliance, is not a focus of this course.

Submitting work

Follow these steps to submit files. If your instructor cannot readily identify or review your projects, you will not receive a grade.

  1. Put the files into a folder.
  2. Name the folder with your first and last names and the project title.
  3. ZIP compress the folder.
  4. Make sure that the name of the ZIP file contains your first and last names, and the project title.

You may send the following file formats: PDF, .folio, HTML/CSS/JS, JPG, PNG, MOV, MP4, MP3, AAC, and TXT. Your instructor will not grade InDesign, Illustrator, or Word files.

Policies

Attendance

Students are expected to attend scheduled class sessions and course-related activities. Two unexcused absences will reduce a student’s semester grade by one letter grade. A third unexcused absence is cause for failure of the course. Grounds for excused absences are illness, family emergencies, jury or military service, and religious obligations.

Grading scale

A	Outstanding 
B	Good
C	Adequate 	
D	Poor 	
F	Unacceptable

Resubmitting work

Overdue work will be marked down by 5 points for every week that it is late. Students may revise and resubmit projects for a new grade at the end of the semester.

Classroom rules

Intellectual honesty

Cite the work of others. Do not borrow projects from other students or reuse work from other classes without permission. Plagiarism or cheating are grounds for failure on an assignment; repeated plagiarism or cheating results in failure of the course. If in doubt about how and when to cite, please ask the instructor or a librarian.

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.

College policies

The Corcoran Honor Code and Attendance Policy apply in this class.

Please consult the Student Handbook for policies on disablities, and see the Corcoran’s Disability Support Services.

-30-

Published 2013-01-29.