Wayfarer
A walking journey in three connected views.
Wayfarer makes choosing a walking journey feel close to the ground. Its first view brings three unequal surfaces together: a tall photograph of walkers, a mineral-blue illustrated atlas and a charcoal trip planner. Destination pills change the photograph, route line, four stops and practical facts in one place. Travelers can compare alpine and countryside journeys, choose a departure and add a local plan without losing their bearings. Filled controls, compact trail quantities and warm yellow actions keep the next step clear. Walking notes continue below in rounded disclosures. The winding-trail symbol expresses a journey that leaves room for discovery, with the landscape always part of the decision.
- Role
- Brand identity and frontend design
- Year
- 2026
- Platform
- Responsive website
- Status
- live
The problem
A traveler needs to compare distance, ascent and itinerary without losing the landscape. Route facts and destination photographs should belong to the same selected journey.
What I built
An interactive travel atlas with linked route drawings, itinerary facts, destination photography and a local departure plan.
Inside the product.
Screens from the working product, with demonstration data.
Desktop website
A tall walking photograph, mineral-blue contour atlas and charcoal itinerary each serve a different part of the choice. Bricolage Grotesque headings and Manrope route facts hold the three views together.
Scroll sideways to inspect the interface.
The choices behind it.
Brand identity and frontend design
Read the walk in three surfaces
A tall walking photograph, mineral-blue contour atlas and charcoal itinerary each serve a different part of the choice. Bricolage Grotesque headings and Manrope route facts hold the three views together.
Keep the plan tied to the trail
Choosing a destination updates the map, stops, photograph and route facts together. The departure plan records the selected journey and date.
A winding trail toward an open horizon
Two winding trail lines rise toward a sun, expressing exploration and an open destination.
From start to finish.
- Choose a walking route
- Compare its four stops, distance and ascent
- Prepare the departure plan
Build details Stack, scope, and implementation
Built with
- React 19
- TypeScript
- Vite
- CSS
Areas
- Web design
- Brand identity
- Guided walking
- Map
- Outdoors
- Travel