Websites · Design concept
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.
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.
The website introduces the property through a large room photograph, then places stay dates and featured rooms within the same browsing experience.
The mobile selection screen groups each room photograph with its name, short details and nightly rate.
The review screen brings the selected room, dates and price breakdown together before a booking decision.
Editorial headings and generous photographs establish the setting. Booking controls use simpler text and a restrained olive accent so their purpose stays clear.
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.
Proposed design specimens. These are static examples, not working controls or a production specification.
Warm canvas
#F7F4EC
Booking actions
#454D2D
Primary text
#26291F
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.
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.
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.
