Travel & Booking · Boarding Pass Editorial
Flight Booking App UI Design
Skylark is a flight booking app design with a boarding-pass editorial look, built for founders and designers shipping a travel or airline product.



プレビュー
画面を探索
flight bookingモバイルアプリデザインをプレビュー。Sleekで完全に編集可能です。
Flight Booking Appについて
Skylark is a flight booking app UI design that treats the whole product like a well-made airline ticket. It sits on warm paper-white with deep aviation navy text, a jet-stream teal reserved for selected fares and the primary book action, and a coral flag used only for layovers and alerts. City codes and prices are set in a tall condensed grotesque like a departure board, while flight times stay large and tabular for instant scanning.
The template includes seven connected screens that form a complete booking flow: a Search home with trip-type toggle and route fields, a sortable Results list of boarding-pass-stub cards, a Flight Review timeline with terminals and fare breakdown, a Seat selection cabin map, a Passenger and payment form, a My Journeys trips view with a departure countdown, and a full-screen Boarding Pass with a scannable QR code. The signature flight strip, an origin code on the left, a dotted arc with a small plane, and the destination code on the right, recurs across search, results, and the pass to tie the experience together.
Use it in Sleek and make it your own: restyle the palette, edit any screen by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma with no plugin, or hand a prompt to an AI agent to build it for real, all far faster than starting from a blank canvas.
中身
含まれる画面
Search
A trip-type toggle (Round trip, One way, Multi-city), JFK to LHR route fields with takeoff and landing glyphs, date strip, passenger stepper, class selector, and a teal "Search Flights" button above featured route cards.
Results
A sortable list (Cheapest, Best, Fastest) of boarding-pass-stub flight cards, each a flight strip showing airline, times, duration, stops, and economy and business fares with a teal "Select" button.
Flight Review
The route expanded into a vertical timeline with departure and arrival terminals, duration, baggage and wifi chips, and a fare breakdown ending in a total price and "Continue" action.
Select Seat
A cabin map with available seats as outlined squares, the chosen seat in teal, taken seats crossed out, and an emergency exit row flagged in coral, with a sticky selected-seat bar and "Confirm".
Passenger Details
Form fields for the primary traveler's passport name, date of birth, nationality, and passport number, a saved Visa card with an add-card option, and a teal "Pay" button with the total.
My Journeys
Upcoming and past trips as boarding-pass cards, with a destination photo, a "Departs in 3 days" countdown, gate and seat, and a "View Pass" action.
Boarding Pass
A full-screen ticket stub with passenger, flight number, the JFK to LHR flight strip, date, boarding time, seat, a scannable QR code, and the gate.
デザインと機能
主な機能
- Boarding Pass Editorial aesthetic on warm paper-white with aviation navy
- Jet-stream teal reserved for selected fares and the book action
- Signature flight strip with dotted arc and plane glyph
- Boarding-pass-stub cards with notched edges and a navy keyline
- Departure-board condensed type for city codes and prices
- Sortable results by Cheapest, Best, and Fastest
- Cabin map seat selection with exit-row and taken-seat states
- Full-screen boarding pass with scannable QR code
対象ユーザー
誰向けか
ユースケース
何が作れるか
- Launch an MVP for a flight booking product
- Mock up an airline app for an investor pitch
- Hand a consistent travel UI off to developers
- Explore a redesign of an existing booking app
このテンプレートの使い方
- 1
テンプレートを開く
画面をブラウズし、フルデザインをプレビューして、アイデアに合うか確認しましょう。
- 2
このテンプレートを使う
ワンクリックで、完全に編集可能な自分用のコピーをSleekで開けます。
- 3
AIで編集
パレットの変更、レイアウトの調整、画面の追加や削除も、欲しいものを説明するだけでできます。
- 4
エクスポートして公開へ
デザインをエクスポートするか開発者に渡し、ローンチに向けて作り続けましょう。








