Сайт готелю працює як перша екскурсія: гість має побачити номер, відчути атмосферу й одразу зрозуміти, як забронювати. На прикладі апарт-готелю Cardinal розповідаю, як я зробив сайт із номерами, СПА-комплексом, рестораном, галереєю та формами бронювання в модальних вікнах.
Про готель і завдання
Cardinal — новий п’ятиповерховий апарт-готель з екоремонтом у Трускавці: три хвилини пішки до центрального бювету, поруч прогулянковий парк. Номери мають кухні й облаштовані як окремі квартири, а навколо — повноцінна готельна інфраструктура: СПА-комплекс, ресторан із баром, салон краси, конференц-зал, трансфер і доставка їжі в номер.
Готелю потрібен був сайт, на якому гість може роздивитися номер, дізнатися про СПА і ресторан та одразу надіслати заявку на бронювання. Я зробив цей сайт: зверстав десять сторінок, зібрав слайдери й вкладки, галерею з переглядом у спливному вікні та форми бронювання в модальних вікнах.
Структура сайту
Усе, що пропонує готель, розподілено між сторінками так, щоб гість знаходив потрібне за один-два кліки:
- головна — вітрина всіх напрямів готелю;
- номери — шість категорій із фото, оснащенням і формою бронювання;
- СПА — сім зон комплексу й окрема сторінка фінської сауни;
- ресторан — години роботи, бронювання столика телефоном, дрес-код і меню в PDF;
- галерея з фільтром за розділами й переглядом фото у спливному вікні;
- відгуки, акції, контакти з картою та політика конфіденційності.
Шапка спільна для всіх сторінок: меню розділів ліворуч, логотип у центрі, праворуч телефон, Facebook, Instagram і кнопка «Забронювати». Внутрішні сторінки починаються із заголовка й хлібних крихт, а підвал повторює адресу, телефони, соцмережі, кнопку бронювання та посилання на політику конфіденційності, правила проживання і блог. Хоч би де був гість, до дзвінка чи заявки — один клік.
Головна сторінка: вітрина готелю
Перший екран — фото номера на всю ширину, підпис Apart hotel, велика назва CARDINAL і короткий опис: сучасний п’ятиповерховий готель з екоремонтом. Нижче — абзац про головну перевагу: розташування біля центрального бювету й парку.
Далі головна по черзі розкриває, чому варто вибрати саме цей готель:
- слайдер номерів зі стрілками й карткою з кнопкою «Детальніше»;
- блоки «Розташування і відпочинок» та «Вид з номерів» із фото балкона над містом;
- чотири вертикальні плитки — конференц-зал, СПА, ресторан і салон краси: коли навести курсор, плитка підсвічується й показує кнопку переходу;
- вісім послуг з іконками: щоденне прибирання, Wi-Fi, телебачення, будильник, трансфер, екскурсовод, прання й прасування, доставка їжі з ресторану в номер.
Номери: вкладки, слайдери й бронювання
Сторінка номерів — найважливіша для продажів. Шість категорій — від однокімнатного двомісного номера до трикімнатного суперлюксу й представницького люксу «Кардинал» — перемикаються вкладками, без перезавантаження сторінки. У кожної категорії власний слайдер фотографій, назва, плашка з площею (наприклад, 38 м²) і кілька слів про вид з вікна.
Блок «Кожен номер оснащено» збирає в сітку іконок те, що гість зазвичай уточнює телефоном: міні-кухня, холодильник із морозильною камерою, посуд, чайник і чайний набір, душова кабіна, ліжка 180×200, косметика, Wi-Fi і комплімент від закладу. Додаткові послуги — прання, обслуговування в номері, екскурсії, доставка квітів, косметолог, візажист, масаж — ідуть великим рядком, і коли навести курсор на послугу, поруч з’являється її фото.
Унизу сторінки — форма «Забронювати номер»: дати заїзду й виїзду з вибором у календарі, кількість гостей, ім’я, телефон, пошта й коментар, обов’язкові поля позначено зірочкою. Та сама форма відкривається в модальному вікні після натискання кнопки «Забронювати», тож надіслати заявку можна з будь-якої сторінки, не втрачаючи того, що гість зараз переглядає.
СПА-комплекс і фінська сауна
СПА — сильна сторона готелю, тому в нього своя сторінка: турецька лазня, фінська сауна, джакузі, джакузі просто неба, фітобар, тренажерний зал і косметологія. Кожна зона — великий слайдер із підписом і кнопкою «Детальніше».
Фінську сауну винесено на окрему сторінку, яка показує, як побудовано опис зони. Параметри зібрано в іконки — температура 80–100 °C, вологість 10–20 %, до 8 осіб, натуральне дерево, лави на двох рівнях, напої з фітобару, — поруч розповідь про користь сауни й форма «Зарезервувати онлайн» з ім’ям, телефоном і поштою.
Форми бронювання номера й резерву СПА-зон перевіряють заповнення полів: якщо значення введено неправильно, поле підсвічується з підписом про помилку, і гість одразу бачить, що треба виправити.
Ресторан, галерея, відгуки, акції та контакти
- Ресторан — сторінка з фотографіями й відповідями на практичні запитання: години роботи 08:00–23:00, телефон для бронювання столика, дрес-код, напої фітобару і кнопка «Завантажити меню (PDF)».
- Галерея — вкладки «Територія готелю», «СПА», «Ресторан» і «Відпочинок» перемикають добірки без перезавантаження, а після кліку фото відкривається у спливному вікні зі стрілками для гортання.
- Відгуки — картки з ім’ям, містом, датою й оцінкою зірками, з посторінковою навігацією.
- Акції — картки пропозицій, наприклад на СПА-послуги й трансфер до готелю.
- Контакти — фото фасаду, адреса, телефони, пошта, соцмережі, кнопка «Зв’язатися з нами» і карта на всю ширину.
- Політика конфіденційності — окрема сторінка про те, як готель отримує й використовує дані, які гості вказують у формах.
Зовнішній вигляд і верстка
Сайт витримано в темній графітовій гамі із золотими акцентами: золотом виділено кнопки, активні вкладки, іконки й назви розділів. Заголовки набрано класичною антиквою, текст — спокійним гротеском, а тлом шапки внутрішніх сторінок, підвалу й деяких блоків слугує тонкий лінійний малюнок фасаду готелю.
Під час верстки важливо було зберегти цей характер і не втратити зручності: теплі фото інтер’єрів мають добре читатися на темному тлі, фонова графіка — не заважати текстові, а вкладки, слайдери, спливні вікна й форми — працювати однаково на всіх сторінках. Тому повторювані елементи — шапку, картку зі слайдером, сітку іконок, форму бронювання — зібрано як спільні блоки й використано на всьому сайті.
Яким має бути сайт готелю
Гість вибирає готель очима: фото номера, вид з вікна, СПА і ресторан важать більше, ніж довгі описи. Власний сайт — місце, де готель показує себе повністю й отримує заявки напряму. Створюючи сайт для готелю, я спираюся на кілька принципів:
- справжні фотографії замість стокових — гість має впізнати номер, коли приїде;
- категорії номерів із площею й оснащенням, щоб порівняти їх без дзвінка;
- кнопка бронювання й телефон на кожній сторінці, коротка форма заявки;
- інфраструктура — СПА, ресторан, послуги — як частина пропозиції, а не рядок дрібним шрифтом;
- відгуки, акції та карта, які розвіюють останні сумніви;
- політика конфіденційності — адже сайт збирає імена, телефони й пошту.
Якщо вам потрібен сайт для готелю, гостьового будинку чи СПА-комплексу, я допоможу створити його повністю — від структури сторінок до слайдерів, галереї та форм бронювання.
Деталі проєкту
Тип проєктуновий сайт
КатегоріяКорпоративний сайт
ТехнологіїHTML5, CSS3, JavaScript
Рольрозробка сайту: верстка сторінок, вкладки й слайдери, галерея з попапом, форми бронювання в модальних вікнах
Клієнтапарт-готель Cardinal
КраїнаУкраїна
Що зроблено
- Зверстав 10 сторінок: головна, номери, СПА, сауна, ресторан, галерея, відгуки, акції, контакти, політика конфіденційності
- Зібрав спільну шапку з меню, телефоном, соцмережами й кнопкою «Забронювати»
- Зробив головну зі слайдером номерів, плитками напрямів з ефектом під час наведення курсора і блоком послуг
- Зібрав сторінку номерів: шість категорій у вкладках, слайдери фото, оснащення, додаткові послуги з фото під час наведення
- Зробив форми бронювання номера й резерву СПА-зон у модальних вікнах із перевіркою полів
- Зверстав сторінку СПА на сім зон зі слайдерами й окрему сторінку фінської сауни
- Зробив сторінку ресторану з годинами роботи, дрес-кодом і завантаженням меню в PDF
- Зібрав галерею з фільтром за розділами й переглядом фото у спливному вікні
- Зверстав відгуки з оцінками й пагінацією, акції та контакти з картою
Результат
- Сайт готелю з 10 сторінок із модальними вікнами бронювання
- Вибір номера й заявка на бронювання — на одній сторінці
- Окремі сторінки для СПА-комплексу, фінської сауни й ресторану
- Галерея, відгуки, акції та контакти, які відповідають на запитання гостя ще до дзвінка