Peak Hotel

Peak Hotel

Web designUI/UXInteraction designResponsive
Website

Website for Peak Hotel, one of the highest hotels in Dragobrat, a ski resort in the Ukrainian Carpathians.

My role

Freelance designer.

  • Site structure and page layouts
  • UI design and the style guide
  • Interactions: preloader, sliders, menu and hover states
  • Tablet and phone layouts

Team

I worked directly with the hotel. The hotel's engineering team built the site.

Idea

The views come first

The hotel

Peak Hotel stands in the highest part of Dragobrat, and the Carpathian peaks are right outside the windows. That's why the look of the site mattered so much on this project.

The approach

Every page opens with a full-screen photo. Text sits on dark panels over the photos, and copper is kept for buttons, icons and other UI elements.

Pages

Main page

The main page works like a short tour of the hotel. Every block leads to its own page.

  1. Photo slider

    The hotel name over a full-screen photo slider, with the booking bar on top.

  2. About

    A short line about the individually furnished rooms.

  3. European service

    A photo with a dark text panel and a link to guest reviews.

  4. Rooms

    A slider that shows one room type at a time, with a counter and a button to view the room.

  5. Restaurant

    The café-bar on the ground floor, with views of the mountains.

  6. More services

    A newsletter sign-up and the latest guest review.

  7. Footer

    Social links, contacts and the current weather at the resort.

Full Peak Hotel home page: sunset photo slider with booking bar, intro line, European service, rooms slider, restaurant, more services and footer with weather

Pages

Inner pages

Rooms page: header photo, then Luxury and Standard room cards with photos and amenity lists

Rooms

Each room type with photos and a list of what's in the room.

Testimonials page: review form on a dark panel, then a list of guest reviews with dates

Reviews

Guests can leave a review right on the page. All reviews are listed under the form.

Contact page: photo of the hotel in snow, then a map with a contact form beside it

Contact

A map showing where the hotel is, with a contact form next to it.

Services

The restaurant page header
The restaurant
Equipment rental page header with a snowboarder
Equipment rental
Safari page header with snow vehicles
Safari

Interaction

Navigation

The menu opens on top of the page. Each section shows a photo and its sub-pages. The language switch for English, Ukrainian and Russian is right next to it.

Responsive

Tablet and phone

On smaller screens the menu turns into a full-screen list. The booking bar is still at the top, right under the logo.

Rooms, Testimonials and Contact pages on tablets, and the home, Rooms and footer screens on phones

Components

UI elements

In the booking bar, arrival date opens a calendar and nights opens a short list. A booking card shows the room, the number of guests and the price.

Header with booking bar, date picker calendar, nights selector, room booking card, news dropdown, open menu with Services dropdown, room slider and service card
Animated hover on the copper Reviews button
Button hover state

Style guide

Warm dark tones and an italic serif

Colour

  • UI elements#C66F21
  • Text#3B3736
  • Background, dark#302C2B
  • Background, light#FFFFFF

Typography

Playfair Display · headings

Italic

In the highest part of Dragobrat

Bold

European service

Lato · body and buttons

Regular

The spacious rooms are equipped with comfortable furnishings.

Black

Book your stay

Icons

One icon above each section title. The last one is the mountain from the logo.

Six line icons in copper: hotel building, news, porter with luggage, quill, weather and the Peak mountain mark

Grid

Rooms slider shown over the layout grid columns
Website