Websites · Design concept
Hotel booking experience
A hotel booking design study exploring room discovery, mobile room selection and a clear booking summary, with proposed visual tokens and interface states.
Design concepts, not client projects. Screens are static mockups; names and data are illustrative.
The design brief
Give a small hotel room to express its character while keeping the practical booking decisions close at hand. This concept pairs a photography-led website with focused mobile booking screens.
- Designed for
- Guests comparing rooms and checking the details of a short stay on desktop or mobile.
- Constraints to consider
- Room photographs need space, but dates, occupancy and pricing must remain easy to find. The concept covers selection and review; it does not connect to live availability or take payment.
The proposed journey
- 01
Explore the stay
The website introduces the property through a large room photograph, then places stay dates and featured rooms within the same browsing experience.
- 02
Choose a room
The mobile selection screen groups each room photograph with its name, short details and nightly rate.
- 03
Review the stay
The review screen brings the selected room, dates and price breakdown together before a booking decision.
Why these design choices?
Separate atmosphere from transaction
Editorial headings and generous photographs establish the setting. Booking controls use simpler text and a restrained olive accent so their purpose stays clear.
Keep the selection visible
The summary repeats the room and dates at the point of review. This gives guests a place to check their choices without relying on memory.
A closer look at the visual system
Proposed design specimens. These are static examples, not working controls or a production specification.
Colour roles
Warm canvas
#F7F4EC
Booking actions
#454D2D
Primary text
#26291F
Typography & spacing
Clear information. A considered next step.
Proposed pairing: a serif display face for the property story and a sans-serif face for rates, dates and controls. Booking details should remain readable without the decorative treatment.
Allow broad margins around the main photograph, then tighten the grouping between a room name, its rate and its action. On mobile, keep each room as one clearly bounded unit.
Beyond the ideal state
No availability
No rooms match these dates. Try different dates or adjust the number of guests.
Room selected
Garden Room selected. Review your dates and price before continuing.
Date validation
Choose a check-out date after your check-in date.
Why repeat room and date details in the booking summary?
Guests may compare several rooms before making a choice. Repeating the selected room, stay dates and price breakdown makes that choice available for review. Whether the layout prevents mistakes needs testing with realistic booking tasks.
