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

General principles


See the class schedule for due dates.

Phase 0: Getting to know publications

Look through the example publications on this assignment sheet. Observe how they use images, how many types of pages there are, how design elements carry over from page to page, and how many different types of type are present.

drawing of this design phase

Phase 1: Research

Identify a publication that you’d like to redesign. 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.

Do some background research. Learn about the publication’s recent redesigns and any shifts in editorial policies. Look at competing publications. If you wish to be thorough, find circulation and reader data, enough that you can talk about the publication’s audience and likely changes to it. (Look on the publication’s pages aimed at prospective advertisers.)

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. Address priorities for your redesign.

drawing of this design phase

Phase 2: Visual systems and components

Start creating a new design for your publication. Show us two (2) different concepts. Explain these concepts using:

Documentation packet template in InDesign (ZIP), if you would like to use it.

drawing of this design phase

Phase 3: Pages

Refine your design direction, then prepare layouts for pages. At this stage, pursue two concepts. Think about how readers move on, once they finish reading a story, and how people can find stories about particular topics. Show your designs by preparing hi-fi wireframes.

At a minimum, you should show us:

drawing of this design phase

Phase 4: Refined designs

Choose one design direction, improve it, and produce final hi-fi wireframes.

drawing of this design phase

Phase 5: HTML/CSS prototype

Produce live prototypes, in HTML/CSS, for one page. Your prototype must work in both desktops and mobile devices. Do not use CSS frameworks or prebuilt templates.

drawing of this design phase

Documentation packet

When you’ve completed the project, gather all of your design documentation into a packet. (If you’ve been following the format guidelines, this should require no work other than exporting a PDF.) You’ll turn this packet in as a PDF, but you should also print it for final critique.

Evaluation criteria


Worth studying as models

Examples of redesign subjects