Сайт спортивного комплекса «Лазурный»
Разработка сайта со стильной айдентикой, презентацией услуг и онлайн-покупкой клубных карт
О заказчике
«Лазурный» — это масштабный спортивный комплекс с пятидесятиметровым бассейном олимпийского стандарта в Кемерове. Также пространство центра включает фитнес-зал, тренажерный зал, турецкий хамам, финскую сауну.
В 2019 году «Лазурный» закрылся на реконструкцию, во время которой было отремонтировано здание и все его помещения. Обновился инвентарь, оборудование, улучшены характеристики бассейна и общий интерьер комплекса. Ремонт стал большим событием — так как аналогов бассейна в городе нет, кемеровчане с нетерпением ждали его открытия.
Вместе с внешней трансформацией изменилась и общая концепция — теперь в центре действует клубный формат, как в федеральных спортивных сетях премиум-класса. Управляющие провели полноценный ребрендинг, чтобы представить городу новый комплекс — современный, комфортный и стильный.
Предстояло разработать сайт, демонстрирующий трансформацию комплекса и его новую концепцию, которая отражается как в визуальной составляющей бренда, так и в его внутренних процессах.
Задачи проекта
Волна — основа дизайн-концепции
При разработке мы использовали брендбук спортивного комплекса с системой визуального стиля, которая помогает донести ценности бренда и наладить коммуникацию с аудиторией.
Главное преимущество спортивного комплекса «Лазурный» — это огромный спортивный бассейн. Поэтому в основе концепции лежит простой и понятный каждому образ волны.
Основная версия логотипа соединяет устойчивый знак с лаконичным шрифтовым написанием.
В основу графики легла всё та же метафора волны.
Фирменная палитра включает пять цветов: темно-синий, синий, голубой, приглушенный желто-зеленый и малиновый.
Фирменный стиль был применен при разработке сайта, дизайна визиток, мерча, интерьера и других артефактов, требующих визуального оформления.
Ненавязчивая и лаконичная анимация
Разработанную айдентику мы внедрили в дизайн сайта, придерживаясь минималистичности и развивая ассоциацию с волной и водой.
Волна активна — она всегда находится в движении, и в продолжение этой идеи мы применили анимацию, которая оживляет сайт и создает дополнительные ассоциации с активностью в бассейне. Например, на фоне первого экрана главной страницы мы изобразили воду с переливающимся светом на плавательной дорожке.
Лазурный, первый экран главной страницы.
https://vimeo.com/678025982
Анимированные элементы дизайна являются визуальной подсказкой, которая помогает пользователю ориентироваться на сайте. Мы сделали анимацию ненавязчивой и лаконичной, чтобы она не отвлекала пользователей от целевого действия и при этом создавала дополнительные образы и положительные впечатления от визуала.
Мы анимировали кнопки, фотографии тренеров, ссылки, блоки и другие элементы. При наведении курсора на них, можно увидеть движение, изменение цвета, появления тени или изображения.
Анимация на сайте "Лазурный"
https://vimeo.com/678026402
Презентация услуг
Сразу на первом экране главной страницы мы вовлекаем пользователя в изучение наиболее востребованных услуг комплекса. Так как бассейн является флагманским продуктом, мы визуально выделили его среди других направлений.
При нажатии на кнопку пользователь попадает на страницу выбранной услуги. На ней размещена информация:
Полезный блок «Что взять с собой», который помогает клиенту сориентироваться, как собрать сумку на тренировку.
В конце страницы предлагаем ознакомиться с другими услугами центра или по кнопке «Купить» перейти к оформлению клубной карты.
Также информацию об услугах можно найти, перейдя в соответствующий раздел навигации, которая расположена в верхней части сайта.
Знакомство с тренером
В «Лазурном» предусмотрено как свободное посещение бассейна и тренажерного зала, так и групповые и индивидуальные тренировки. Чтобы клиенты могли заочно познакомиться с тренером и выбрать преподавателя для себя или ребенка, мы разработали раздел «Команда». Фильтрация позволяет сегментировать сотрудников комплекса по нужному направлению.
У каждого сотрудника — своя страница с образованием и опытом работы.
Пространство
Так как центру важно рассказать о новом ремонте, оснащении и стильном интерьере, мы посвятили этому отдельный раздел «Пространство». В галереях пользователи могут ознакомиться с фотографиями локаций и почитать об их модернизации.
Покупка клубной карты
Узнать стоимость занятий и оформить клубную карту пользователь может в разделе «Цены и акции». В блоках размещены предложения с различными комбинациями услуг.
При нажатии разворачивается подробная информация о клубной карте. Внутри — кнопки, которые предлагают завершить покупку и направляют в личный кабинет для оплаты или оформления рассрочки. В личном кабинете реализована интеграция с 1С, которая в том числе используется для вывода расписания в соответствующем разделе.
Быстрый доступ к разделу с клубными картами обеспечивается через кнопку «Купить» — она выделена салатовым цветом и всегда находится в поле зрения пользователя, чтобы он мог в любой момент перейти к покупке.
Версия для слабовидящих
В рамках проекта разработана версия для слабовидящих, чтобы все посетители «Лазурного» могли ознакомиться с услугами и приобрести клубную карту.
Итоги проекта:
