Travel & Booking · Sunlit Cartography
Trip Planner App UI Template
Waymark is a trip planner app UI with a warm, map-on-the-table feel, made for founders and designers building travel and itinerary products.



미리보기
화면 살펴보기
Sleek에서 완전히 편집 가능한 trip planner 모바일 앱 디자인을 미리 보세요.
Trip Planner App 소개
Waymark is a trip planner app UI built on a "Sunlit Cartography" look: warm paper-cream backgrounds, deep ink-navy text and route lines, a topographic sage for map detail, and a single sunset-coral accent reserved for the active day pin and primary actions. Itinerary stops sit as inset cards pressed into the paper with a thin coral left rule, stitched together by the signature Route Thread, a continuous dotted hairline that runs down every day and snaps onto the live map.
The template includes six connected screens that form a complete travel-planning flow: a Trips home with hero-photo trip cards and a route-thread preview, a day-by-day Itinerary timeline, a topographic Map with numbered coral pins and a draggable stops sheet, a Place detail with rating, hours and an "Add to Day 02" action, an Explore feed filtered by Eat, See and Stay, and a Budget screen with spend-by-category bars and a remaining-balance hero number.
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Export it to code, copy it into Figma with no plugin, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.
구성 내용
포함된 화면
Trips
The home screen stacks trip cards like Portugal and Tokyo Spring, each with a hero photo, date range, day and stop counts, and a small route-thread preview of the stops. A green add button starts a new trip.
Itinerary
A day-by-day vertical timeline for Lisbon with a DAY 02 eyebrow, stops threaded together by time (Time Out Market, Tram 28, Belém Tower) each with walk distance and an inset photo. The day-tab row across the top makes switching days quick.
Map
A sage topographic map with coral numbered pins connected by the live Route Thread, plus a draggable bottom sheet listing today's stops, times, and an Optimize Route action. It turns the plan into a walkable path.
Place detail
A photo hero for a spot like Jerónimos Monastery with rating, time-spent and distance stats, opening hours, location and description. The coral "Add to Day 02" button drops it straight into the itinerary.
Explore
A discovery feed filtered by All Spots, Eat, See and Stay, with photo cards showing distance-from-route badges, ratings and price. A curated guide block surfaces themed local picks.
Budget
A trip budget summary with a remaining-balance hero number, Add Expense and Adjust Budget actions, spend-by-category tonal bars for Flights, Stays and Food, and a recent-activity list. It keeps trip costs visible at a glance.
디자인 & 기능
주요 기능
- Sunlit Cartography palette: paper cream, ink navy, sage, one coral accent
- Signature Route Thread stitching stops across every screen
- Day-by-day itinerary timeline with times and walk distances
- Topographic map with numbered coral pins and a draggable stops sheet
- Inset field-journal cards with a thin coral left rule and 1px keylines
- Place detail with rating, hours, and add-to-day action
- Explore feed filtered by Eat, See, and Stay with distance badges
- Budget tracker with spend-by-category bars and balance hero
오디언스
이런 분께 맞습니다
활용 사례
이런 것을 만들 수 있습니다
- Launch an MVP for a trip-planning product
- Mock up screens for a travel-app pitch deck
- Hand a complete, consistent travel UI off to developers
- Explore a redesign of an existing itinerary app
이 템플릿 사용 방법
- 1
템플릿 열기
화면을 둘러보고 전체 디자인을 미리 보며 아이디어에 맞는지 확인해 보세요.
- 2
이 템플릿 사용
한 번의 클릭으로 Sleek에서 완전히 편집 가능한 사본을 엽니다.
- 3
AI로 편집
원하는 것을 설명하기만 하면 팔레트 재스타일, 레이아웃 변경, 화면 추가·삭제가 가능합니다.
- 4
내보내고 출시
디자인을 내보내거나 개발자에게 넘기고, 출시를 향해 계속 만들어가세요.
자주 묻는 질문
trip planner 앱 디자인 시작하기
Sleek에서 사용해 내 것으로 만드세요. 팔레트를 다시 스타일링하고, AI로 어떤 화면이든 편집한 뒤 코드나 Figma로 내보내세요.
이 템플릿 사용







