О проекте
Центр отдыха «Байкал 21» — живописное место для семейного и делового отдыха всего в 15 минутах от Иркутска. Расположенный около залива Ангары и окруженный величественным сосновым лесом, отель предлагает своим гостям уникальное сочетание комфорта и природы
«Байкал 21» подходит как для семейного отдыха, так и для деловых мероприятий. Здесь созданы все условия для комфортного времяпрепровождения: просторные номера, детская площадка, зимняя горка и уютные беседки, где можно провести время в кругу близких или отметить торжество.
Также центр предлагает отличные возможности для проведения корпоративов, встреч и конференций
Также центр предлагает отличные возможности для проведения корпоративов, встреч и конференций
Задача
Перед нами стояла задача по редизайну уже существующего сайта центра отдыха. Нужно было не просто освежить дизайн, но и поработать со структурой и удобством интерфейса. Клиенту было важно, чтобы сайт выглядел хорошо как на ПК версии, так и на мобильной, так как в современных реалиях все больше трафика приходит именно с мобильных устройств.
Особое внимание было уделено созданию логичной навигации и оптимизации пользовательского пути, чтобы каждый посетитель сайта мог легко найти информацию о предлагаемых услугах, ценах и возможностях отдыха в отеле.
Особое внимание было уделено созданию логичной навигации и оптимизации пользовательского пути, чтобы каждый посетитель сайта мог легко найти информацию о предлагаемых услугах, ценах и возможностях отдыха в отеле.
Структура и прототипы
На первом этапе нам было важно разработать грамотную структуру сайта, которая была бы интуитивно понятна пользователям и включала в себя все необходимые блоки.
Исходя из анализа конкурентов, пожеланий клиента, пользовательского опыта и SEO-рекомендаций, мы выделили наиболее важные страницы, а также детально продумали их наполнение, чтобы сайт получился логичным, простым, а также хорошо выдавался в поиске.
Исходя из анализа конкурентов, пожеланий клиента, пользовательского опыта и SEO-рекомендаций, мы выделили наиболее важные страницы, а также детально продумали их наполнение, чтобы сайт получился логичным, простым, а также хорошо выдавался в поиске.

После согласования структуры мы приступили к проработке прототипов каждой страницы. Здесь было важно визуализировать блоки сайта и грамотно распределить по ним всю информацию. Также на этом этапе мы протестировали пользовательский опыт, а именно: понятна ли навигация по сайту, правильна ли логика расстановки блоков, легко ли посетителю дойти найти ту или иную информацию и дойти до конечной цели — забронировать номер или услугу.

Референсы, мудборд и фирменный стиль
Параллельно с разработкой прототипов мы приступили к одному из самых творческих этапов разработки сайта, а именно — подбору референсов и составлению мудборда.
Нами было просмотрено около 100 различных сайтов. Мы искали не только удачные визуальные приемы, но и интерфейсные фишки, которые могли бы разнообразить наш сайт, сделать его уникальным, понятным и удобным.
В итоге было отобрано несколько ключевых референсов, на которые мы опирались в тех или иных моментах дальнейшей разработки.
Нами было просмотрено около 100 различных сайтов. Мы искали не только удачные визуальные приемы, но и интерфейсные фишки, которые могли бы разнообразить наш сайт, сделать его уникальным, понятным и удобным.
В итоге было отобрано несколько ключевых референсов, на которые мы опирались в тех или иных моментах дальнейшей разработки.

Для клиента мы составили подробнейший мудборд, где предложили варианты цветовой палитры, шрифтовые пары, описали дизайн-концепцию, а также подобрали референсы для каждого отдельного блока. Такой подход в создании мудбордов позволяет нам лучше понимать желания клиентов и реализовывать именно тот вариант дизайна, который сразу понравится и будет согласован с минимальными правками.

По результатам встречи с клиентом мы определились с направлением дизайна и разработали фирменный стиль, где зафиксировали цветовую палитру, шрифты и визуальные элементы.

Разработка дизайн-концепций
Далее мы разработали две абсолютно разных дизайн-концепции, чтобы окончательно определится с визуальным оформлением сайта


Первая концепция больше связана со свежестью зеленого леса, в окружении которого находится «Байкал 21». Вторая концепция олицетворяет близость центра к реке Ангаре. Клиенту больше понравился первый вариант, который мы впоследствии дорабатывали уже на этапе дизайна.
Дизайн главной страницы
Несмотря на то, что мы легко определились с концепцией, итоговый вариант дизайна главной страницы от нее отличается, например, вместо белого фона, мы сделали бежевый, чтобы сайт визуально смотрелся теплее и уютнее и дарил пользователям ощущение комфорта.
Забавный факт: мы даже разрабатывали темную версию, но данная идея отпала, так как сайт в таком исполнении получался мрачным и больше походил на сайт из сферы диджитал, чем на гостиничный
Забавный факт: мы даже разрабатывали темную версию, но данная идея отпала, так как сайт в таком исполнении получался мрачным и больше походил на сайт из сферы диджитал, чем на гостиничный

В целом готовый дизайн действительно получился очень атмосферным - теплые цвета, качественные фотографии и визуальные элементы в виде сосновых веточек хорошо передают настроение леса, единения с природой, спокойствия и умиротворения. Именно такой атмосферы нам было важно добиться.
Перенос макета и разработка сайта на Тильда
Самым продолжительным и важным этапом разработки сайта является верстка на Тильда. Мы на 100% реализовали весь функционал сайта, адаптировав его под разные разрешения. Он удобен и интуитивно понятен как с компьютера, так и с телефона.
Главными фишками дизайна является динамичное видео на первом экране, которое сразу погружает пользователя в атмосферу "Байкал 21".
Главными фишками дизайна является динамичное видео на первом экране, которое сразу погружает пользователя в атмосферу "Байкал 21".

Интерактивная карта со всеми важными объектами центра отдыха. При клике на определенный объект можно сразу попасть на отдельную страницу с подробной информацией о нем.

Фотогалерея, в которой есть разделы по сезонам: можно посмотреть, как "Байкал 21" выглядит летом и зимой.

Минималистичные и информативные карточки услуг.

Отдельная страница под каждый номер, где также доступно размещена вся необходимая информация.

SEO-оптимизация
Мы всегда проводим базовую SEO-оптимизацию для каждого нашего проекта. Это важно для будущего продвижения сайта и его позиций в поисковой системе. Кроме того, для сайта «Байкал 21» все тексты разрабатывались нашим копирайтером, что также позволило сайту попасть в органическую выдачу, так как контент на нем качественный и релевантный.
Итоги
Команда QWER.agency разработала сайт для центра отдыха «Байкал 21». В итоге у нас получился уютный и атмосферный сайт, который удобен и интуитивно понятен каждому пользователю.
А посетить готовый сайт вы можете по ссылке
А посетить готовый сайт вы можете по ссылке