GDES-315 fall 2022 / David Ramos, American University Design

Field guide

Redesign the field guide portion of the Chesapeake Bay Program’s site, restructuring this section of the site into a self-contained microsite. This project asks you to explore how structure—the relationships between discrete pieces of content—is itself a significant decision, contributing to user experience and creating meaning.

Design objectives

Phases of work

Analysis and information architecture

Read over the site, look at similar sites, and think about what readers might want. Create:

Initial studies

Explore design approaches, working in broad strokes. Show:

Design systems

We’re taking a systems-first approach to this design. Before you move into issues of page layout and art direction, make design decisions about the pieces you’ll be working with. Update these pieces as the project progresses.


Work using a column grid. (Consider a relatively large number of columns for flexibility—perhaps 8, 12, or 16 columns for desktop.) Generate desktop pages for at least:

Also, create mobile versions of three pages of your choice.


Produce your deliverables within Figma or another prototyping tool. Turn in PDFs and links to clickable prototypes for all pages. Within your prototyping environment, generate a table of contents page that links to all the other deliverables.