Voice

GDES-315 spring 2018 (David Ramos American University Design)
ramos@american.edu · office hours · interaction design resources

Design a digital/web presence for an existing publication, creating an interface that flourishes under different screen sizes and variable contexts. You are designing not just layouts for single screens, but a system that can adapt to change.

Photo of person hanging on to airplane

A few guidelines:

Tasks

See the class schedule for due dates.

Phase I: Research

Identify a publication. Choose a daily newspaper, a monthly magazine, a blog of exceptionally high editorial standards, or a news organization website. Quality, volume of stories, and format should be similar to that of leading newspapers of record. Secure instructor approval of any publication.

Do some background research: find circulation and reader data, enough that you can talk about the publication’s audience and likely changes to it. (The GW Library does not have subscriptions to newspaper/magazine audit bureaus, so you will have to look for articles.) Learn about the publication’s recent redesigns and any shifts in editorial policies.

Prepare a ten-minute presentation. Tell the class about the publication, its readers, and its recent history. Analyze the publication’s website, and offer recommendations for what a new website should accomplish.

Phase II: Design

Create a new design for your publication. At a minimum, you should show us:

Describe the design for at least three screen sizes and contexts.

Phase III: Design Development

We will introduce one new design requirement every week, and your project will need to react.

Deliverables

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

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

Use design documentation to explain how your design works. Use tools like hi-fi and low-fi wireframes; flowcharts; site maps; and written text. (Low-fi wireframes have much less detail than the real site; hi-fi wireframes look like the real product.) 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 and JavaScript, or you could use an interactive/graphical prototyping tool like InVision or XD. You could even create video to show the workings of your design. As a rule of thumb, you’ll need to show clickable versions of at least four screens, or video prototypes showing a user interacting with at least six screens, with narration.

Evaluation criteria

Templates

Examples

Worth studying as models

Examples of redesign subjects