Travel booking UI mockup

The 3 screens

Travel booking: Search, Results, Booking. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.

1. Search

   Browser page with 9 paragraphs, 6 headings, 4 cards, 4 images, 4 labels, 4 ratings, 2 buttons, 2 text inputs and 8 more component types.

   Headings

   Find your next stay · Popular destinations · Lisbon, Portugal · Kyoto, Japan · Cape Town, South Africa · Reykjavik, Iceland

   Navigation

   Stays · Flights · Car rentals · Experiences

   Fields

   Where are you going? · Fri, 14 Nov · Sun, 16 Nov · 2 adults, 1 room

   Buttons and actions

   Sign in · Search

   Text and labels

   Search 1.2 million hotels, apartments and villas - free cancellation on most rooms. · Destination · Check-in · Check-out · Guests · I'm travelling for work · See all · 1,284 stays · From EUR 89 / night · 962 stays · From EUR 112 / night · 1,047 stays · From EUR 74 / night · 388 stays

2. Results

   Browser page with 13 paragraphs, 8 headings, 7 checkboxes, 6 buttons, 3 badges, 3 cards, 3 dividers, 3 images and 11 more component types.

   Headings

   Filters · 214 stays in Lisbon · Casa do Largo Boutique Hotel · EUR 142 · Alfama Riverside Suites · EUR 118 · Tejo View Apartments · EUR 96

   Navigation

   Stays · Flights · Car rentals · Experiences

   Fields

   Lisbon, Portugal · Fri 14 Nov - Sun 16 Nov · 2 adults, 1 room · Sort: Recommended

   Buttons and actions

   Sign in · Update · Clear filters · View deal

   Text and labels

   Price per night · EUR 40 - EUR 260 · Star rating · 5 stars · 4 stars · 3 stars · Amenities · Free cancellation · Breakfast included · Pool · Free parking · Only show available · Genius deal · 0.4 km from centre · Baixa

3. Booking

   Browser page with 9 labels, 8 paragraphs, 7 text inputs, 6 headings, 3 radios, 2 buttons, 2 dividers, 2 forms and 11 more component types.

   Headings

   Confirm and pay · Guest details · Payment · Casa do Largo Boutique Hotel · Total · EUR 326

   Navigation

   Stays · Flights · Car rentals · Experiences

   Fields

   e.g. Maria · e.g. Santos · you@example.com · +351 912 345 678 · Portugal · Late check-in, quiet room, cot for a baby… · 1234 5678 9012 3456 · MM / YY · CVC

   Buttons and actions

   Sign in · Pay EUR 326 and book

   Lists and columns

   Price breakdown · Amount

   Text and labels

   Step 2 of 3 - Your details · First name · Last name · Email address · Phone number · Country of residence · Special requests (optional) · Credit or debit card · PayPal · Apple Pay · Card number · Expiry date · Security code · Save this card for future bookings

Open and edit it

The travel booking mockup is free on every Tierslate plan. Opened in the editor it becomes a board of your own: every component is a real shape you can move, resize, retext or recolour, you can add screens from the web, iOS and Android component library, and React code can be generated from the screens. In the editor it is under Templates, on the Mockups tab.

More mockups

• Shopping website UI mockup - An online clothing store - home page, product listing with filters, product detail and checkout.
• Admin dashboard UI mockup - A store back office - KPI cards, revenue chart, top products and recent orders, plus a customer profile page.
• SaaS landing page UI mockup - A full marketing page for a project-management product: hero with two calls to action, features, pricing tiers, a testimonial, FAQ and footer.
• Sign in and sign up flows UI mockup - The three account screens every product needs: sign in with social options, create an account with a password strength meter, and reset a forgotten password.
• Video streaming site UI mockup - A streaming service - browse rows with continue watching and trending titles, a series detail page with episodes, and the video player.
• Project board UI mockup - A kanban project tool - columns of task cards with tags, progress and assignees, and a task detail page with subtasks, activity and properties.