GDES-315 fall 2023 / 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
- Redesign the Field Guide section of this site, converting it into a microsite that has a semi-independent existence. (A separate microsite is a reasonable choice but possibly is 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. Think about mobile.
- 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.
- You may retain the Chesapeake Bay Program logo, but you should probably remove the “4” from the 40th anniversary logo. Other identity and brand elements can change.
Marshes at Jug Bay and Mt. Calvert house, near Croom, Md.
Phases of work
A. Analysis and information architecture
Start here. Read over the site, look at similar sites, and think about what readers might want. Create:
- Rough site maps for two distinct organizational structures.
Work within the template file.
B. Initial conceptual studies
Explore design approaches, working in broad strokes. Show:
- Sketches, style tiles, mood boards, rough layouts, or other documentation for two or more concepts.
C. 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 components you’ll be working with. Update these items 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 final site map!
- Design element sample sheets. Show designs for buttons, search boxes, and filter controls.
D. 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 13 pages:
- The microsite home page.
- 3 section home pages or results pages—lists of critters/organisms—within the field guide.
- 6 organisms.
- The History section home page and a subpage.
- The Estuary section home page.
Deliverables
Produce your deliverables within Figma, another prototyping tool or, with instructor permission, as live HTML/CSS. Provide PDFs for design systems materials (everything under the “C. Design systems” section). Turn in PDFs and links to interactive prototypes for all pages (everything under the “D. Pages” section).
Template file
If you are working in Figma, start with a Figma template file. You are welcome to customize it.
Sources
Images
Use freely licensed images, images that you created yourself, or images for which you have obtained a license. This project is about the Chesapeake Bay region, so you should use images of the Chesapeake Bay region, not pretty pictures of random places.
Start with the Chesapeake Bay Program’s Flickr account.
Other options:
- Google image search (search for a term, look under search tools, and filter by usage rights)
- Flickr Advanced Search (check the “Search within Creative Commons” and “Find content to modify, adapt, or build upon” boxes)
- Unsplash publishes free, high-quality, relatively less generic stock images. Less relevant to this site but possibly useful for backgrounds.
- Wikimedia Commons
- Public Domain Review
- New York Public Library Digital Collections includes public-domain images
- Internet Archive (esp. for texts and audio)
- Work created by a US Government employee, for the government, is almost always in the public domain.
Icons
Suggested icon sources:
- Noun Project (icons)
- Iconic (icons)
- Fontello (font icon creator)
- Maki (map icons from MapBox)
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