DM2280B spring 2014 · Corcoran School of Art + Design
Instructor: David Ramos (firstname.lastname@example.org)
A website is a living thing – not an artifact – 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.
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.
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 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 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.
- Build websites using handcoded, standards-compliant HTML/CSS
- Apply fundamental design principles to the web
- Examine the differences between print and interactive media
- Study usability, accessibility, and user-centered design methods
- Develop a web design process that involves iteration and experimentation
- Examine the role that interactive media and networks play in society
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.
10% Communicating design 10% Recipe 35% Event 35% Narrative 10% Participation
This course uses 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
Required software + tools
- Google Chrome (preferably the Canary build)
- HTML editing software (see below)
- Paper or sketchbook; pen or pencil
- Scissors or X-Acto knife
- Gluestick or tape
- GitHub account (free)
- Mac or Win GitHub client (free)
This class focuses on handcoding, which is the best way to understand how the web works. Use the text editor of your choice for writing HTML. (Stay away from visual layout tools, which will limit your progress.) Good editors include:
- Adobe Edge Code (Mac, Win)
- Espresso (Mac; unlimited demo)
- Sublime (Mac, Win, Linux; unlimited demo)
- TextWrangler (Mac; free)
- TextMate (Mac; open source)
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.
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.
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 and size your paper accordingly. You need not mount any work from this course.
In the interest of efficiency and equity, HTML-based projects will be evaluated using a current build of Chrome Canary on a Mac.
You’ll turn in most of your work through GitHub. You’ll need to send along some design documentation and process files, though.
- Put the files into a folder.
- Put your name on the folder, along with the project title.
- ZIP compress the folder.
- Share the files on Dropbox or another filesharing tool. (Please don’t send email attachments over 2 MB.)
You may send the following file formats: PDF, HTML/CSS/JS, JPG, PNG, GIF (if you must), MOV, MP4, MP3, AAC, MD, and TXT. Do not send Photoshop, InDesign, or Illustrator files.
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.
A 4.0 Outstanding work A- 3.7 B+ 3.3 B 3.0 High-quality work B- 2.7 C+ 2.3 C 2.0 Acceptable work; meets expectations C- 1.7 D+ 1.3 D 1.0 Seriously deficient work D- 0.7 F 0.0 Failure (no credit)
Students may revise and resubmit projects for a new grade before the end of the semester. Late work will be marked down.
In the classroom
- Please silence ringers on phones.
- Got an emergency phone call? That’s actually fine. Just leave the room.
- Keep yourself off headphones, email, texts, and IM during critiques, discussions, and presentations.
The Corcoran Honor Code applies in this course. Please 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.
For more information on how to cite sources – code and images in particular – see the class guide to citing work.
If you have specific learning, attentional, psychological, or physical disabilities and require accommodations, please let me know early in the semester so that your learning needs can be appropriately met. All discussions will remain confidential.
If you have not already registered with Amanda Kleinman, the Learning Specialist in Student Affairs, you will need to register and provide documentation of your disability. Please contact Amanda to request an appointment at email@example.com or 202-639-1865. You can also stop by Amanda’s office in Student Affairs, at the downtown campus.