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.
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.
“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.
- 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
Artists and designers often write instructions that other people interpret. Experiment with what happens when two people share different parts of the design process.
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.
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.
Organize a website for high usability and understandability. Produce print-based design documentation to explain your ideas.
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.
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.
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.
30% Event 35% Narrative 15% Other projects 10% Weblog 10% Participation
Tools + resources
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
- Google Chrome (preferably the Canary build)
- HTML editing software (free options)
- Paper or sketchbook; pen or pencil
- Scissors or X-Acto knife
- Gluestick or tape
- Espresso (Mac HTML/CSS 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).
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. Never delete the files for anything you show in a critique.
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.
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.
Follow these steps to submit files. If your instructor cannot readily identify or review your projects, you will not receive a grade.
- Put the files into a folder.
- Name the folder with your first and last names and the project title.
- ZIP compress the folder.
- 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.
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 Outstanding B Good C Adequate D Poor F Unacceptable
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.
- Please silence ringers on phones
- No cellphone conversations in the room
- No headphones, email, texting, IM, or web browsing during critiques, discussions, and presentations
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.
Please consult the Student Handbook for policies on disablities, and see the Corcoran’s Disability Support Services.