Design
notebook
Start with the shape of the river. Give the index, the map and the fish plate their own space so each can be read at a glance.
01 / Wireframes
Keep the river in view.
The first sketch put the details over the map. Moving them to a side column gives the river room for its full trace. On a phone, the river file sits below the selected section of water.
Map to river file
Tap a river on the map or pick it from the index. The selected river opens below the map, with the index available farther down.
02 / Colour
Paper, water, ink.
Paper and white alternate across the page. Forest anchors the typography and navigation. Lime marks the main action on photography.
- Paper
--paperReading surfaces - White
#fffCards and section breaks - Forest
--forestHeadings, navigation and controls - Ink
--inkReading text - Lime
--limePrimary actions on dark or photographic surfaces - Rust
--rustAtlas emphasis
03 / Shape
Square by default.
Cards, photos, buttons and inputs share square corners. Circles identify map points and small indicators.
- Surfaces
--radius-panel · 0px- Controls
--radius-control · 0px- Map points
--radius-symbol · 50%
04 / Type
Type by purpose.
A book face gives river names and species captions a place in the atlas. The controls and coordinates use simpler shapes for quick scanning.
- Instrument SerifRiver and species names
- Credit River Oncorhynchus mykiss
- DM SansLabels, controls and reading text
- Search for a river
- System monoCoordinates and figure labels
- 43.5890° N / 79.6441° W