Audience
Readers switching between a desk, tablet and phone.
FICTIONAL CASE STUDY / Responsive website
Fieldnote
A reading room that travels well.
Help readers find short essays and field guides between longer reading sessions.
Try the design ↓
Constraints
Titles vary in length and the collection must reflow with enlarged text.
My contribution
Content taxonomy, responsive rules and an article preview.
FICTIONAL CONCEPT DESIGN
Design outputs
Three views of the Fieldnote interface.
Editorial landing page · desktop
A featured essay sets the reading pace. Topic links and the latest entries provide clear routes into the collection.
Open full size ↗
Topic collection · tablet
The selected Field guides filter stays visible above a two-column list, with the matching item count close by.
Open full size ↗
Article reading view · mobile
A single reading column gives the title and article room to breathe. A return link leads back to the collection.
Open full size ↗TRY THE DESIGN
A small task to try.
Filter to Field guides, open an article preview and compare the three widths.
Fictional design prototype with sample data. Changes stay on this page.
THE TRADE-OFF
What else could work?
A masonry layout gives images more drama. A reflowing grid gives readers a predictable sequence.
DESIGN NOTE 01
The decision in view.
Preview controls resize the collection itself while preserving the source order.
NEXT TEST
What I’d check next.
Compare how easily readers find a guide at narrow widths and with enlarged text.
KEEP EXPLORING
