Source：vanderhotel.com ↗ Checked 2026.10.19
Editor's note
What this site does
A Ljubljana hotel that keeps a “best price when booking directly” bar pinned to the top, and gives rooms, restaurant and events a booking button each.
Conversion
Notes
What you see
A dark bar across the very top reads "Best price is guaranteed when booking directly! Choosing this option may also include special perks and surprises." It stays on screen as you scroll, above a fixed header with Hotel, Food & Drink, Meetings & Events, Book Now, Journal, Our Story and "Book a room". The first screen is the headline "Where comfort meets culture" with a hand-written "In the heart of the city", a short line of copy and a "Book a room" button circled by a hand-drawn oval, with small photographs scattered around.
Three numbered sections follow: 01 rooms (with "Explore rooms" and "Book a room"), 02 restaurants ("Explore menus" and "Book a table") and 03 meetings and events ("Events we host" and "Send inquiry"). The footer lists phone and email for the hotel, restaurant, events and bar, opening hours for the hotel, breakfast, restaurant, bar and summer pool, and the operating company's registered details. A newsletter pop-up covers the page a few seconds after it opens.
What to take from it
A hotel that also sells through booking platforms has to give people a reason to book on its own site. Stating the price guarantee and the perks in a permanent bar does that before anyone compares.
When a business has several sources of revenue — rooms, tables, events — each one deserves its own button rather than a single "contact us". The pop-up is the part to reconsider: showing it later or smaller would not interrupt someone who came to book.
Typography
Typefaces
| Element | Desktop size / weight | Desktop line height | Mobile size / weight |
|---|---|---|---|
| h1 | 112px / 400 | 1.20 | 61px / 400 |
| h2 | 80px / 400 | 1.00 | 45px / 400 |
| Body (p) | 17px / 400 | 1.40 | 15px / 400 |
Measured values (desktop 1440px, mobile 375px, 2026.10.19). The most frequent setting for each element is shown. Sites that use h1 for a logo or small label will show a small h1.
Download
Download the wireframe
This structure, as a wireframe you can edit in Figma
The page structure above, rebuilt from DevNJ's wireframe parts. It contains none of the original site's copy, images or code.
Using it in Figma
- Download the SVG.
- Drag and drop the file onto a Figma canvas.
- It opens with one layer group per section — start by reordering sections or replacing the copy.
Text comes in as text layers (set in Noto Sans JP).
Screenshots are shown at reduced size as quotations supporting the commentary. All rights in the design, copy and images belong to Vander Hotel and their respective owners. The wireframes are not copies of the original site; they rebuild its structure from DevNJ's parts. Owners or designers who would like this entry removed or corrected can contact us; we respond within two business days. Featured on: Awwwards — Honorable Mention
