Обновление сайта · 40 км от МКАД
Усадьба ПочинкиСайт, написанный акварелью
Два бревенчатых коттеджа у собственного озера: баня, купели, бассейн с подогревом, бильярд, камин и мангал — для семьи, друзей и праздников круглый год. Заказчик хотел сайт уютный, семейный и душевный — чтобы туда хотелось приехать. Команда студии вдумчиво пересобрала его целиком: вместо случайных фото и пёстрых блоков — тёплая классическая акварель, а настоящие фото усадьбы — честной галереей по сезонам.
БылоСтало
Лист ещё сухой
- 26 страниц
- разобрали на аудите — на компьютере и телефоне
- 52 страницы
- в новом оформлении одним языком
- 40 акварелей
- для главной и разделов — в одном стиле
- 35 фото
- настоящих — в галерее главной по сезонам
Главная мысль
Сняли дом —
и всё уже ваше
Заказчик сформулировал идею так: семья или компания снимает коттедж, а баня, бильярд, купель, бассейн и камин уже входят в стоимость, шашлык жарится на мангале — люди приезжают и забывают обо всём. Чтобы посетитель почувствовал это раньше, чем доедет, акварели на главной живут: пар поднимается над купелью, в камине горит огонь, лампа над бильярдом дышит светом. Всё это — не видео, а лёгкая анимация поверх рисунка.
-
Купель с подогревомПар над горячей водой поднимается и тает
-
Русская баняИз приоткрытой двери идёт пар и тёплый свет
-
Бассейн с подогревомЛёгкий утренний пар над тёплой водой
-
Камин в гостинойЖивое пламя и отсвет на брёвнах
-
Мангал и беседкиУгли разгораются, дымок уходит вверх
-
Бильярд и караокеЛампа над столом дышит тёплым светом
Было и стало
Ведите кистью —
лист становится новым
Прежний сайт держался на стандартной теме: главная была целиком свёрстана внутри текста раздела, у каждой внутренней страницы — свои встроенные стили и свои цвета, картинки разделов — случайные фото разного качества. Слева — прежний сайт, справа — новый. Сравните главную, цены, свадьбу, баню, фото и контакты.
- Главная — в тексте57 тысяч знаков вёрстки со встроенными стилями внутри одного поля админки.
- Каждая страница — по-своему184 блока стилей в текстах разделов: свои цвета и кнопки у каждой страницы.
- Случайные картинкиФото разделов разного качества и настроения — от кадров с телефона до заставок.
- Пёстрая шапкаГрадиентная полоса меню из одиннадцати пунктов заглавными буквами.
Фирменный язык
Краски —
из герба усадьбы
Палитру мы не придумывали: коралловый, хвойно-зелёный и бирюзовый взяли из герба усадьбы, а к ним добавили тёплую бумагу, цвет брёвен и тёплый свет в окнах. Заголовки — Lora с курсивом, текст — Nunito. Вокруг акварелей — рамки-паспарту, как у картин, под заголовками — веточка. Наведите на краску — увидите, где она на сайте.
- Бумага#fbf6ee · фон всего сайта — тёплый, как акварельный лист
- Хвоя#1f4a35 · из герба: заголовки-курсив, подвал, цифры
- Коралл#ee5f55 · из герба: кнопка «Узнать свободные даты»
- Озеро#2c8f84 · из герба: подписи «до 10–12 гостей», отметки
- Брёвна#a86c3a · номера, подписи над заголовками, веточки
- Тёплый свет#e7a548 · свет в окнах, звёзды рейтинга, линии
Главная
Главная —
двенадцать глав
От первого экрана до призыва. Каждая глава отвечает на вопрос гостя: что входит в аренду, какие дома и сколько стоят, как там на самом деле, чем заняться, что говорят другие и как доехать. Выберите главу — окно сайта прокрутится к ней.
Картинки разделов
Фото разделов —
в одну серию
У двадцати девяти разделов аренды, праздников и развлечений были случайные картинки — разного качества и настроения. Мы нарисовали для них одну серию акварелей, загрузили на сайт и сохранили прежние картинки. Это иллюстрации, созданные нейросетью по нашему описанию, а не фото усадьбы. На пяти первых вариантах нейросеть нарисовала собак — перерисовали: с животными в усадьбу нельзя. Наведите на карточку — увидите, что было.
- Купели на 10 человек
- Русская баня
- Бассейн
- Рыбалка на озере
- Каток
- Бильярд
- Новый год
- Свадьба
- День рождения
- Коттедж зимой
- Коттедж на лето
- Банкетный зал
Без прикрас
Акварель — для настроения,
фото — для правды
Акварели задают тон, но гость должен понимать, куда он реально приедет. Поэтому на главной сразу после коттеджей — галерея настоящих фото: лето, осень, зима, вечер и дом внутри, тридцать пять снимков из фотогалерей сайта. Фото подобраны так, чтобы мозаика каждой вкладки закрывалась ровно. Переключайте сезоны.
Живой сайт
Двенадцать страниц —
одним языком
У каждой внутренней страницы — шапка с акварелью раздела, которая растворяется в бумаге, кнопка «Узнать свободные даты» и телефон, а внизу — «Ещё в разделе» и вечерний дом. Тексты разделов остались прежними и в админке не менялись: их первый экран перенесён в шапку, карточки, номера и вопросы оформлены заново, а простой текст сам собирается в подзаголовки и списки. Наведите на окно — страница прокрутится.
Детали
Меню с картинками —
и окно бронирования
В меню «Аренда», «Праздники» и «Развлечения» раскрываются плитками с акварелями разделов — выбирать проще, чем по списку. Окно бронирования — на бумаге сайта, с подсказкой «Свободные даты, цены и условия — расскажем всё по телефону». На телефоне меню раскрывается кругом из угла, а внизу экрана — панель «Позвонить · Маршрут · Забронировать».
На телефоне
Усадьба —
в кармане
На телефоне акварель первого экрана встаёт над заголовком, кнопки — на всю ширину, галерея — в две колонки, а нижняя панель появляется после первой прокрутки: позвонить или построить маршрут можно с любого места страницы. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над проектом работала команда студии: разбор старого сайта, идея, первая версия и честный отказ от неё, дизайн-система, акварели, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Обновление шло на работающем сайте — гости продолжали бронировать, а прежний вид сохранён снимками до первой правки.
- 01АудитСняли 26 страниц на компьютере и телефоне, сохранили тексты разделов, данные сайта и картинки разделов до первой правки.
- 02ИдеяУютная семейная усадьба: гость снимает дом — и баня, купель, бассейн, бильярд, камин и мангал уже его.
- 03Первая версияПоказали заказчику окно-арку со сменой времён года. Ответ — «аляписто и по-детски». Ушли в классику.
- 04Дизайн-системаБумага, цвета герба, тёплое дерево и свет, Lora и Nunito, рамки-паспарту и веточка-орнамент.
- 05АкварелиОдиннадцать акварелей для главной — коттеджи по их настоящим фото — и двадцать девять для разделов.
- 06Главная, шапка, подвалЖивой пар и огонь, коттеджи с ценами, галерея по сезонам, отзывы, дорога; меню с картинками разделов.
- 07Внутренние страницы52 страницы одним шаблоном: тексты из админки выглядят по-новому, а в самой админке не тронуты.
- 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям заказчика.
Довели на приёмке
- Первую версию главной — окно-арку, полароиды и частицы — заменили спокойной классической акварелью
- Добавили галерею настоящих фото по сезонам — чтобы было видно, куда едешь
- На пяти иллюстрациях были собаки — перерисовали: с животными в усадьбу нельзя
- Меню при ширине экрана около 1200 пикселей наезжало на логотип — теперь там кнопка меню
- В окне бронирования подзаголовок встал сбоку от заголовка — перенесли под него
- Кавычки в перечнях преимуществ выводились кодом — исправили
- Фото коттеджей на странице цен — рядом с таблицей, а не на всю ширину
- У подразделов без картинок вместо пустых рамок — строгие карточки-ссылки
Не трогали — работает как раньше
- Тексты разделов
- Цены
- Адреса страниц
- Отзывы гостей
- Формы заявок
- Фотогалереи
Итог
Краска высохла —
в окнах горит свет
Главная, шапка с меню из картинок, подвал, окно бронирования, аренда, праздники, развлечения, цены, фото, отзывы, новости и статьи, контакты — 52 страницы одним акварельным языком, без остановки бронирований. Тексты, цены, адреса страниц, отзывы и фотогалереи — на месте, а настоящие фото усадьбы теперь видны сразу на главной.