Comm 328 Responsive Web Design

Final

  1. Overview
  2. Process Steps
  3. Requirements
  4. Deadlines
  5. Grading Rubric

Overview

For your final you will redesign the website for a nonprofit organization to make it fully responsive. You should pick a small local nonprofit organization that does not have a functioning responsive website. Your organization should already have a website as well as content and some graphics. Your goal will be to do a responsive overhaul of the website while still maintaining the current graphic identity of the organization.

The final website should be at least five full pages. Your organization likely has an existing website with more than five pages. You will conduct an audit of the current website to find out what types of pages already exist. Usually there are only a handful of page templates with many pages of each template type. In your redesign, attempt to redo five different template types.

Your website should be fully functional on a variety of screen sizes and devices. You should approach it with a mobile first methodology. You should also incorporate a progressive enhancement approach. What break points you use will depend on your site design. Your design should work from a small handset size (iPhone 5) to a large screen desktop size. You should ensure that your design also works on all points in between.

For your testing you should utilize you own phone as well as borrowing your friends phones for testing. This is the "cheap" way to do device testing. You should also make use of the web browser developer tools which also offer a variety of emulation modes. Keep in mind however that there is no substitute for testing on actual devices. You may also check out one of the iPads for testing.

Picking Your Nonprofit

Below is a list of Massachusetts nonprofits, grouped by type, to get you started.

If you have a particular organization in mind that is something else, email me for approval.

Process Steps

Website Audit

Conduct an audit of your organization's current website. The audit should outline the current state of the website and give you targets for what you will need to address in your redesign. It should include a site map, narrative, and interface inventory.

Narrative

Your narrative should outline the current state of the website and provide indications to functionality that needs to be addressed. Imagine that you have been hired as a consultant for the organization and it is your job to evaluate the site. This is your brief to present your findings. The narrative should be between 2-3 pages. In your narrative answer the following questions:

  • What does the website do well?
  • What does it not do well?
  • Is there a clear navigation structure?
  • Is there a coherent branding and overall design?
  • Is the site responsive? If so, explain how. If not, how does it fail?
  • Does the website include relevant content and graphics?

Site Map

As part of your audit, create a site map of the sites current structure.

Your site map should map out each page on the website and how they relate to one another. You may use whatever program you feel most comfortable with for the site map. It should address the following:

  • Give a visual map of all pages in the website
  • Give an idea of how pages are related to one another
  • Give an idea of the navigation structure
Representing Page Types

If your site has many pages that are very similar then it is ok to represent them with a symbol showing multiple pages. An example of this might be a news section. We don't need to see every news item, just the idea of several news pages that are of the same type.

Review Communicating Design — Chapter 5: Site Maps for more information on Site Maps.

Interface Inventory

Create an inventory of the interface components on your site. This can be as simple as a Keynote or Word document. The goal is to create a categorized visual representation of all of the different user interface elements on a page.

For more information, see Conducting an Interface Inventory and Interface Inventory by Brad Frost.

Style Tile

Create two style tiles for your design. The style tiles should be formally arranged in a document and ready to present to a client. The style tiles should be designed to evoke a conversation about different elements and ideas for the site design.

Read more about style tiles at styletil.es.

Design Brief

Create a design brief explaining what you hope to accomplish in your responsive redesign. Your brief should answer the following questions (1-2 pages):

  • What problems are you attempting to solve?
  • What changes in the overall site do you plan to make?
  • How will you modify the site structure or content?
  • What pages will you provide design templates for?

If you plan to make any structural changes to the site, create a site map for those as well.

Concept Sketches

To start the actual design process of your site, you should create a series of rough concept sketches. These sketches should serve to generate ideas about how your site might look and function at various sizes. At this stage, you're simply trying out ideas.

Formal Sketches

Once you have generated several concept sketches, pick your favorite one and prepare formal sketches for at least three sizes of your website. These sketches should be neatly done and annotated.

Review the Sketch Examples page for more information.

Style Guide

Create a simplified style guide for your website. Style guides generally contain all of the user interface elements for a site. For your sites, we'll focus on a smaller set of components and styles.

  • Colors (primary, secondary, highlight, etc)
  • Typography
    • Headings
    • Paragraphs
    • Lists
  • Link Styles
  • Navigation Styles
  • Search Components
  • Buttons
  • Icons
  • Graphic Styles

For more information see week 13 notes.

Mockup

Create a full mockup of each different type of page in your site. For this part, you can choose to either use a graphic editor to create the mockup or create a working HTML and CSS prototype, depending on your comfort level. If doing the prototype, focus on getting the big layout pieces working responsively. Leave finer details to complete later.

Be prepared to present your mockups at your scheduled meeting with me.

Final Site Requirements

  • At least five pages (preferably of different page/template types)
  • Responsive (working from iPhone 5 size to large desktop)
  • Designed to be mobile first
  • Working site navigation at all sizes
  • Accessible content and text
  • Valid HTML
  • All images must have alt tags

Deadlines

Description Due Date
Topic Selected 4/6

Website Audit (narrative, site map and interface inventory)
Design Brief
2 Style Tiles

4/20

Series of rough concept sketches
Formal sketches for at least three sizes
Style Guide

4/27
Mockups (Schedule Individual Meetings to Review) Week of 5/4
Final project due 5.13

Grading Rubric

Rubric Summary

Description Points
Research Phase 15
Initial Design Process 15
Mockup 15
Design 25
Markup and Implementation 20
Project Page & Process 10

Rubric Detail

Description Points
Research Phase
  • Website Audit is complete and includes all of the following components:
    • Narrative
    • Site Map
    • Interface Inventory
  • Audit clearly outlines issues with current website
  • Site Map and Interface Inventory give a clear visual representation of site architecture and existing user interface components.
  • Design Brief clearly articulates vision of project and scope
15
Initial Design Process
  • 2 Style Titles represent design visions
  • Concept sketches show process of ideation
  • Formal sketches articulate changes in design based on 3 different size formats
15
Mockup
  • Mockup shows fully formed concept from sketches
  • There should be a mockup for each substantially different page
  • Mockup should include all user interface elements (navigation, search, etc.)
  • Mockup should in some way model user interaction with navigation
    • What happens when the user hovers over?
    • How does the design indicate what page the user is on?
    • What other points of interaction are there on the site?
15
Design
  • Design works across all screen sizes (iPhone 5 size to large desktop)
  • Breakpoints chosen according what is dictated by actual site design
  • Typographic (Selection of typefaces, sizes, line-height)
  • Appropriate use of graphics to illustrate project
  • Appropriate and aesthetically appealing use of colors. Should also ensure that text is alway legible and there is sufficient contrast between text color and backgrounds
  • Site incorporates user interaction in it's design
25
Markup and Implementation
  • Site works at all required sizes
  • CSS shows a mobile first approach
  • Valid HTML
  • Working Navigation
  • All text in HTML (not images)
  • Some use of responsive image techniques (SVG, CSS Media Queries, srcset, etc)
20
Project Page & Process

Completed project page on your class website that outlines all aspects of your final projects. It should include working links to the following items:

  • Description of your topic (1)
  • Website Audit materials (3)
    • Narrative
    • Site Map
    • Interface Inventory
  • Design Brief (1)
  • Style Tiles (1)
  • Concept Sketches (1)
  • Formal Sketches in 3 Sizes (1)
  • Mockups (1)
  • Link to final version of project (1)
10