![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/xDW8mpiDP0kFRlYYYcwbBk9QzBRYxLOVPyuAdBw2.png)
О заказчике
«Лазурный» — это масштабный спортивный комплекс с пятидесятиметровым бассейном олимпийского стандарта в Кемерове. Также пространство центра включает фитнес-зал, тренажерный зал, турецкий хамам, финскую сауну.
В 2019 году «Лазурный» закрылся на реконструкцию, во время которой было отремонтировано здание и все его помещения. Обновился инвентарь, оборудование, улучшены характеристики бассейна и общий интерьер комплекса. Ремонт стал большим событием — так как аналогов бассейна в городе нет, кемеровчане с нетерпением ждали его открытия.
Вместе с внешней трансформацией изменилась и общая концепция — теперь в центре действует клубный формат, как в федеральных спортивных сетях премиум-класса. Управляющие провели полноценный ребрендинг, чтобы представить городу новый комплекс — современный, комфортный и стильный.
Предстояло разработать сайт, демонстрирующий трансформацию комплекса и его новую концепцию, которая отражается как в визуальной составляющей бренда, так и в его внутренних процессах.
Задачи проекта
- презентация услуг комплекса
- разработка стильного дизайна сайта в рамках общего ребрендинга
- демонстрация обновленного пространства комплекса
- реализация покупки клубных карт онлайн через личный кабинет
Волна — основа дизайн-концепции
При разработке мы использовали брендбук спортивного комплекса с системой визуального стиля, которая помогает донести ценности бренда и наладить коммуникацию с аудиторией.
Главное преимущество спортивного комплекса «Лазурный» — это огромный спортивный бассейн. Поэтому в основе концепции лежит простой и понятный каждому образ волны.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/uEjHmnGfZgCxPDv931AP7GPSdDjx0gTCHYMGeg7H.png)
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/Nh9QKnyRIHLyoiiw4KtsLe7irIw22UiSOSQcYXcg.png)
Фирменная палитра включает пять цветов: темно-синий, синий, голубой, приглушенный желто-зеленый и малиновый.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/zc0GKW0mWQVJcOZmED3mygz3aXFzn83qZoQq7tTa.png)
Фирменный стиль был применен при разработке сайта, дизайна визиток, мерча, интерьера и других артефактов, требующих визуального оформления.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/qnQyMilYOcv2ZmCa1Nciil0ymG31GZYuxK649NAB.png)
Ненавязчивая и лаконичная анимация
Разработанную айдентику мы внедрили в дизайн сайта, придерживаясь минималистичности и развивая ассоциацию с волной и водой.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/BUQCpwoSOjzmuGzsmx2CMEzEBTG7aBdIDdxV4p6E.png)
Волна активна — она всегда находится в движении, и в продолжение этой идеи мы применили анимацию, которая оживляет сайт и создает дополнительные ассоциации с активностью в бассейне. Например, на фоне первого экрана главной страницы мы изобразили воду с переливающимся светом на плавательной дорожке.
Анимированные элементы дизайна являются визуальной подсказкой, которая помогает пользователю ориентироваться на сайте. Мы сделали анимацию ненавязчивой и лаконичной, чтобы она не отвлекала пользователей от целевого действия и при этом создавала дополнительные образы и положительные впечатления от визуала.
Мы анимировали кнопки, фотографии тренеров, ссылки, блоки и другие элементы. При наведении курсора на них, можно увидеть движение, изменение цвета, появления тени или изображения.
Презентация услуг
Сразу на первом экране главной страницы мы вовлекаем пользователя в изучение наиболее востребованных услуг комплекса. Так как бассейн является флагманским продуктом, мы визуально выделили его среди других направлений.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/cDYtpz2XtnGTpezIWZYNf5AEtxrFd8Z2rnPKTmqr.png)
При нажатии на кнопку пользователь попадает на страницу выбранной услуги. На ней размещена информация:
- о локации и ее оборудовании
- о спортивном направлении и его эффективности
- фотографии пространства, в котором проходят тренировки
- правила и график посещения
Полезный блок «Что взять с собой», который помогает клиенту сориентироваться, как собрать сумку на тренировку.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/KbT47F4eI8KYApep7jVLu7nnrzRQJ49hTVCjYUcM.png)
В конце страницы предлагаем ознакомиться с другими услугами центра или по кнопке «Купить» перейти к оформлению клубной карты.
Также информацию об услугах можно найти, перейдя в соответствующий раздел навигации, которая расположена в верхней части сайта.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/uTU5ydvH9MYj3v1aJNFl8C2KrRbvjpFsZgpdbnoy.png)
Знакомство с тренером
В «Лазурном» предусмотрено как свободное посещение бассейна и тренажерного зала, так и групповые и индивидуальные тренировки. Чтобы клиенты могли заочно познакомиться с тренером и выбрать преподавателя для себя или ребенка, мы разработали раздел «Команда». Фильтрация позволяет сегментировать сотрудников комплекса по нужному направлению.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/VEI6v7yoOPZNDRQD4VArL1nt8Sda6L6jEq8IuzJg.png)
У каждого сотрудника — своя страница с образованием и опытом работы.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/HovkHuqgSljIamWv2hASA3l0qx3NKGJ4giKoikWg.png)
Пространство
Так как центру важно рассказать о новом ремонте, оснащении и стильном интерьере, мы посвятили этому отдельный раздел «Пространство». В галереях пользователи могут ознакомиться с фотографиями локаций и почитать об их модернизации.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/9DydzL34FVoOwTieCjdAGLiQoTUQHbpoVda7raGF.png)
Покупка клубной карты
Узнать стоимость занятий и оформить клубную карту пользователь может в разделе «Цены и акции». В блоках размещены предложения с различными комбинациями услуг.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/H3mv0Zr1ErLatZ3oX67WpnAaYFhQZjuCrtJM6oOd.png)
При нажатии разворачивается подробная информация о клубной карте. Внутри — кнопки, которые предлагают завершить покупку и направляют в личный кабинет для оплаты или оформления рассрочки. В личном кабинете реализована интеграция с 1С, которая в том числе используется для вывода расписания в соответствующем разделе.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/RasSlkYe8XPysZTYM4rBbIyO5d5E0cWCuXOtc5yo.png)
Быстрый доступ к разделу с клубными картами обеспечивается через кнопку «Купить» — она выделена салатовым цветом и всегда находится в поле зрения пользователя, чтобы он мог в любой момент перейти к покупке.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/gutuSupLjB53goV2N2v3zl4E595dvv8pElJFhI1i.png)
Версия для слабовидящих
В рамках проекта разработана версия для слабовидящих, чтобы все посетители «Лазурного» могли ознакомиться с услугами и приобрести клубную карту.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/large/Cy0Bhx2PWovgOEL7BfdUhhWu0wrKO8l2ANnbtUGp.png)
Итоги проекта:
- Создан сайт, дизайн которого соответствует общей визуальной концепции бренда
- Новый сайт в удобном формате презентует услуги комплекса — структура сайта и визуальное оформление помогают пользователю быстро найти интересующую его информацию
- Реализована онлайн-покупка клубных карт
- Разработана версия сайта для слабовидящих
Новый сайт демонстрирует изменения, которые произошли в «Лазурном» после ремонта, отражает образ современного и комфортного спортивного комплекса, помогает пользователям узнать о его услугах и оформить клубную карту. Что немаловажно, сайт очень управляемый со стороны заказчика — практически каждый элемент можно редактировать из административной панели.
![](https://atwinta3.dev.atwinta.ru/api/v1/images/medium/MXoP8BrQcvxhtwJz6KR0lBTjDLxNNRYMuvxElj2Y.jpeg)
Мария Серафимова
менеджер проекта