Responsive

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

In this project, you will create a website or app that flourishes under different screen sizes and variable contexts. Use responsive design ideas to create a site that adapts itself to different conditions.

Choose a content-rich website, publication, or app to design. You might redesign an existing piece, or you might envision something new. Create working prototypes or thorough documentation, using the tools and methods taught in this course.

Question the contexts that we usually define. It might suffice to create desktop and smartphone versions. Perhaps your content demands one single infinitely-adaptable view, or maybe tablets need special consideration. A website could even want one interface for use while a passenger waits for a train, and another interface for after the passenger has boarded. Let the content, purpose, and audience help you decide.

Objectives

Evaluate different ways of approaching design for mobile computing. Practice techniques for explaining and documenting projects. Study usability, navigation, and user experience. For HTML/CSS projects, explore the relationship between design and development.

Specifications

Necessary deliverables will vary from project to project – discuss details with your instructor. You will need to create three types of deliverables:

  1. design documentation,
  2. process documentation, and
  3. prototypes.

Use design documentation to explain how your design works. Use tools like high-fi and low-fi wireframes; flowcharts; site maps; and written text. Show how the design works on large screens and on small screens. Remember to provide labels that describe the parts and how they interact.

Process is an important part of this project. Include a record of your design process, showing in-progress and alternative versions.

Create prototypes that people can use or pretend to use. Choose your own method for creating prototypes. You might produce working prototypes built in HTML/CSS, JavaScript, PDF, or Adobe Digital Publishing Suite; you could also provide static prototypes on paper or as screen-sized PDFs. You might even create video to show the workings of your design.

Package your documentation into a PDF of an appropriate size. (You will probably want to print the PDF for reviews.) Turn in working prototypes as files.

Evaluation criteria

10% Concept	
20% Process	
25% Usability, navigation, and visual design
20% Craft (details; does it work?)
25% Documentation

Due

Plan on presenting final work on 12 December.

Published 2012-10-07. Updated 2012-12-05.