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. Either use responsive design ideas to create a site that adapts itself to different conditions or create designs for the range of screen sizes.

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.

This is a good assignment for exploring a responsive website, but you can produce another kind of project altogether.

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 a mix of three types of deliverables:

design documentation,
process documentation, and
prototypes.

Use design documentation to explain how your design works. Use tools like low-fi wireframes; flowcharts; site maps; and written text. (Low-fi wireframes have much less detail than the real site.) 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 DPS; you could also make static hi-fi wireframes. (A hi-fi wireframe contains all the detail of the real site.) 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.

Example 1: site mockups

Let’s say that you’re building an informational website with one set of layouts for smartphones, one for tablets, and one for a desktop. The site has a home page, section pages, inside pages, a review form, and a registration form. Let’s also say that you don’t want to code this site.

You could produce:

High-fi wireframes for the front page, a section page, and an inside page, for smartphone, desktop and tablet (this is your prototype)
Low-fi wireframes for the registration form (just to complete the picture)
A site map to explain how these things fit together, and text to explain the concept
And process documents for all of the above

Example 2: working HTML/CSS site

Let’s say that you’re building the same site, but you want to make it work in HTML/CSS. You’ll need to turn in a different set of deliverables.

You could produce:

As a prototype, a working version of the front page that responds for all three screen sizes
A low-fi wireframe for the front page, with labels so people know what the parts are
A site map that shows all the page types and text that explains the concept
And process documents for all of the above

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 11 December.