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

• Redesign the field guide section of this site into a microsite that has a semi-independent existence. (A separate microsite is a reasonable choice but probably not the optimal approach—we’re pursuing it to keep down this project’s scope.)
• Reorganize the content so that the field guide material sits at the center of the microsite. The other content should play a supporting role.
• Redesign the habitat pages so that readers can more readily use them to identify organisms they’ve seen in the wild.
• Bring organism photos to the foreground, with an eye toward the photos that would help a reader identify something they’ve seen in the wild.
• Reduce dependence on slideshows, which tend to reduce visitor interaction.
• Improve the filtering/sorting behavior.
• Improve layout, type handling, and other graphic design elements, with an eye toward improving credibility and visual appeal.
• Maintain legibility and readability.
• Retain the Chesapeake Bay Program logo. Other design elements can change.

Phases of work

Analysis and information architecture

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

• Site maps for two distinct organizational structures.

Initial studies

Explore design approaches, working in broad strokes. Show:

• Sketches, style tiles, mood boards, rough layouts, or other documentation for two or more concepts.

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.

• Type sample sheets. Include examples of each important typographic style, including headlines, body copy, captions, and sidebars/asides.
• A sheet showing navigation bars, including global and local navigation.
• A site map!

Pages

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

• The microsite home page.
• 3 section home pages within the field guide.
• 6 organisms.
• The History section home page or equivalent.
• The Estuary page.

Deliverables

Produce your deliverables within Figma or another prototyping tool. Turn in PDFs and links to clickable prototypes for all pages.

Fonts

You may use fonts from this list, and fonts in the same families/superfamilies. Obtain instructor permission for using a font that doesn’t appear on this list.

• Lato (Łukasz Dziedzic)
• Source Sans/Source Serif/Source Code superfamily (Paul D. Hunt)
• Merriweather superfamily (Sorkin Type)
• Playfair Disolay (Claus Eggers Sørensen)
• Fira Sans (Carrois Apostrophe)
• Barlow family (Jeremy Tribby)
• PT Sans/PT Serif superfamily (ParaType)
• Libre Franklin (Impallari Type)
• Martel superfamily (Dan Reynolds, Mathieu Réguer)
• Ultra (Astigmatic)
• Neutron (Brian Zick)
• Merienda (Eduardo Tunni)
• Lusitania (Ana Paula Megda)
• Literata (TypeTogether)
• IBM Plex superfamily (Mike Abbink, Bold Monday)
• Libre Baskerville (Impallari Type)
• Cormorant Garamond (Christian Thalmann)
• EB Garamond (Georg Duffner, Octavio Pardo)
• Noto superfamily (Google)
• Alegreya (Juan Pablo del Peral, Huerta Tipográfica)
• Crimson Text (Sebastian Kosch)
• Arvo (Anton Koovit)
• Public Sans (USWDS, Dan Williams, Pablo Impallari, Rodrigo Fuenzalida)
• Overpass (Delve Withrington, Dave Bailey, Thomas Jockin)
• Zilla Slab (Typotheque)

From class

• Field guide evaluation