Обновление сайта · Дубинино, рядом с Зеленоградом
Синий котСайт, который проступает сквозь пар
Приватный банный лофт: тёплый бассейн, купель, хаммам, сауна с гималайской солью, бильярд и караоке — для одной компании. У лофта уже были свой характер и свои синие коты. Команда студии вдумчиво пересобрала сайт целиком и сохранила всё, что заказчик просил не трогать, — а новый сайт сделала тёплым, ясным и живым, как стекло, с которого стёрли пар.
Было — под паромСтало
Стекло запотело
- 19 страниц
- разобрали на аудите — на компьютере и телефоне
- 17 видов
- страниц и окон в новом оформлении
- 4 условия
- заказчика — сохранены на каждом экране
- 848 → 1920
- пикселей в ширину у видео первого экрана
Что нельзя было трогать
Четыре бирки —
четыре условия
Перед работой заказчик назвал то, что должно остаться: гости к этому привыкли. Мы повесили эти условия как бирки от шкафчиков в раздевалке и проверяли по ним каждый экран. Наведите на бирку или нажмите — она повернётся и покажет, где условие на новом сайте.
Было и стало
Ведите скребок —
пар уходит со стекла
Прежний сайт держался на стандартной теме: главная была собрана целиком внутри текста раздела, со своими стилями и скриптом, который подменял первый экран; внутренние страницы — мелким шрифтом по умолчанию. Слева — прежний сайт под паром, справа — новый. Сравните главную, меню, тарифы, отзывы, контакты и страницу дня рождения.
- Главная — в тексте130 КБ вёрстки со своими стилями внутри одного поля админки.
- Скрипты-переносчикиБлоки темы переставлялись скриптами уже после загрузки страницы.
- Мелкие страницыТарифы, правила и меню — стандартным шрифтом, без единого стиля.
- Мыльное видеоРолик первого экрана — 848 пикселей в ширину на весь экран.
Фирменный язык
От купели —
до жара сауны
Баня — это смена температур, и мы сделали из неё палитру: холодная бирюза купели и синий бассейна для действий, ночная вода для шапок и подвала, тёплая соль и жар — для цен выходных и всего, что про сауну. Заголовки — округлый Unbounded, текст — Manrope. Котов мы не придумывали: синий кот — логотип лофта, а коты на листах меню нравятся заказчику. Ведите по шкале — увидите, где какой цвет.
- Купель#46d6ff · бирюза: блики, ссылки на тёмном
- Бассейн#1f7bff · синий: кнопки и главные действия
- Ночная вода#0d2b45 · шапки страниц и подвал
- Глубина#050f1a · первый экран и тёмные блоки
- Соль#ffc78a · цены выходных, тёплые акценты
- Жар#ff9a52 · сауна, «жар» в сравнении
Главная
Главная —
одиннадцать глав
От первого экрана до подвала. Каждая глава отвечает на вопрос гостя: что внутри, сколько стоит вечер, под какой повод, что поесть, как это выглядит и что говорят другие. Выберите главу — окно сайта прокрутится к ней.
Живые блоки
Попробуйте —
как на сайте
Два блока главной, повторённые здесь вживую. Слева — «Жар и прохлада»: ползунок между сауной с экранами из гималайской соли и бассейном с купелью, на настоящих фото лофта. Справа — расчёт вечера: дни, число гостей и часы, с доплатой за гостей сверх двенадцати — по тем же условиям, что на сайте.
Те же условия, что на сайте: 3 500 ₽ в час Пн–Чт, 4 000 ₽ Пт–Вс для компании до 12 человек, +200 ₽ в час за гостя сверх 12.
Иллюстрации
Четыре повода —
четыре кота
У страниц-поводов не было картинок. Мы нарисовали для них котов в том же стиле, что и картинки меню, — синих, лохматых, на синей акварели. Это иллюстрации, созданные нейросетью по нашему описанию, а не фото лофта. Интерьеры не генерировали: на сайте — только настоящие фото. Наведите — кот поплывёт.
А это картинки меню заказчика — их не трогали:
Видео первого экрана
Камни сауны —
резкие, как вживую
Ролик первого экрана был снят в 848 пикселей в ширину и на большом мониторе расплывался. Мы не стали менять его на чужое видео: увеличили каждый кадр нейросетью до 1920 пикселей, проверили, что камни не стали «пластиковыми», и отдельно собрали лёгкую версию для телефонов. Тяните линию — слева прежний кадр, справа новый.
Живой сайт
Двенадцать страниц —
одним языком
У каждой внутренней страницы — «водная» шапка с бликами и пузырьками, хлебные крошки, цена и кнопка бронирования, а сбоку — карточка с ценами и тремя телефонами. Тексты из админки остались прежними, но выглядят по-новому: таблицы, правила, вопросы и заметки. Наведите на окно — страница прокрутится.
На телефоне
Лофт —
в кармане
Шапка-капсула с тремя телефонами столбиком, обе цены сразу под заголовком, меню раскрывается кругом из угла. Зоны лофта листаются пальцем, а надпись в подвале подстраивается под ширину экрана. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над проектом работала команда студии: разбор старого сайта, условия заказчика, концепция, дизайн-система, страницы, иллюстрации и приёмка с проверкой каждого экрана на компьютере и телефоне. Обновление шло на работающем сайте — гости продолжали бронировать, а прежний вид сохранён снимками до первой правки.
- 01АудитСняли 19 страниц на компьютере и телефоне, сохранили тексты разделов из админки, данные сайта и картинки разделов до первой правки.
- 02Условия заказчикаЗаписали, что трогать нельзя: три телефона и их порядок, цену на первом экране, отзывы Яндекса, картинки меню.
- 03Концепция«Вода и пар»: ночная вода, бирюза купели и тёплый свет солевой сауны — и синие коты, которые уже были у лофта.
- 04Дизайн-системаШкала «прохлада — жар», Unbounded и Manrope, кнопки, карточки, «водные» шапки страниц.
- 05Главная, шапка, подвалВидео первого экрана, жар и прохлада, зоны, поводы, расчёт, меню, фото, отзывы; шапка с тремя телефонами.
- 06Иллюстрации и видеоЧетыре кота для поводов в стиле картинок меню; видео первого экрана сделали чётким для больших экранов.
- 07Внутренние страницыМеню, тарифы, правила, отзывы, блог и статьи, контакты, поводы, 404 и правовые страницы — одним языком.
- 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям — от шапки до надписи в подвале.
Довели на приёмке
- Три телефона вернулись и в мобильную шапку — столбиком, в прежнем порядке
- Цены на первом экране — сразу точные, без «набегающих» цифр
- Над шапками страниц больше нет белой полосы
- Фото на телефоне — ровной кладкой, без пустых мест
- Карточки зон открывают фото, а не ведут обратно на главную
- Надпись «Синий кот» в подвале — без лишних контуров букв
- В подвале — настоящий значок MAX вместо надписи
- Пункт «Меню» в шапке не переносится на вторую строку
Не трогали — работает как раньше
- Тексты разделов
- Картинки меню
- Адреса страниц
- Отзывы гостей
- Формы заявок
- Статьи блога
Итог
Пар сошёл —
лофт виден целиком
Главная, шапка, подвал, окно бронирования, меню и пять его разделов, тарифы, правила, отзывы, блог и статьи, контакты, четыре страницы-повода, 404 и правовые страницы — единым языком, без остановки бронирований. Всё, что просил сохранить заказчик, на месте: три телефона, цена на первом экране, отзывы Яндекса и картинки меню.