Сайт для крупнейшего тренировочного центра России
Сайт – неотъемлемая часть платформы бренда
Учебно-тренировочный центр «Новогорск» – крупнейший международный комплекс подготовки спортсменов – обратился к нам за построением платформы бренда. Новый сайт спортивной организации стал логичным шагом после создания общего позиционирования Центра, разработки ключевых сообщений, фирменного стиля, обновления логотипа и отрисовки на его основе двух новых логотипов филиалов.
У Центра уже был информационный сайт, но он устарел и с визуальной, и с функциональной точки зрения, и уже не отвечал новым задачам. За последние годы у Центра появилось два филиала и кроме работы с профессиональными командами и спортсменами он стал ориентироваться на корпоративный спорт и спортивный отдых для всех.
Особенности нашей задачи
Сайт спортивной организации, и в особенности, сайт государственной организации в обязательном порядке должен отвечать современным принципам цифровой доступности. Цифровая доступность предполагает легкое считывание информации как в визуальном, так и в смысловом плане, она обеспечивает комфортную работу с сайтом для всех, в т.ч. для людей с особыми физическими потребностями и иностранцев. Кстати, для иностранцев требовалось предусмотреть перевод информации на английский и китайский языки.
В итоге наша задача по созданию сайта была объемной и сложной. Сайт спортивной организации должен быть действительно доступным, с легким поиском информации, но одновременно и быть ярким, современным и динамичным. При этом содержать большое количество разноплановой информации – от новостей инфраструктуры Центра до бронирования гостиниц и заказа корпоративных мероприятий.
С результатами своей работы мы вас сейчас и познакомим.
Дизайн тоже требует исследований
Мы понимали, что сайт будет с очень сложной архитектурой, большим количеством информации и задач. К тому же он должен быть в тренде современных сайтов спортивных центров международного уровня и доступных сайтов в целом.
Поэтому мы начали разработку дизайна с изучения референсов. Мы смотрели сайты международных спортивных организаций типа ФИФА и Олимпийского движения Изучали сайты аналогичных олимпийских международных баз, а также сайты крупнейших спортивных брендов и известных сетей отелей.
Мы искали референсы как в целом по стилю, так и по отдельным элементам сайта. Например, как устроены многоуровневые меню крупных порталов, какие есть варианты отображения большого количества фотографий, новостей, услуг и сооружений.
Для стиля оказались характерны минимализм, светлый, практически белый фон, много «воздуха», хорошие крупные шрифты, простая структура страницы. Цветовые акценты зачастую в стиле государственной символики, геометричные «украшения», создающие эффект динамики пространства.
Стилистические и эмоциональные референсы
Чтобы соответствовать позиционированию бренда, сайт спортивной организации должен транслировать уверенность, силу, динамику, современность и при этом внимание и заботу. Мотивирующий и яркий и при этом не перегруженный визуальной информацией и соблюдающий принципы цифровой доступности. Мы хотели сохранить баланс официальности и открытости, читабельности и маркетинговой привлекательности.
На страницах для корпоративных клиентов сайт должен быть близок по стилю к ресурсам топовых отелей, т.е. использовать крупные, чуть затемненные фото, модные шрифты и одновременно продолжать выполнять, в первую очередь, смысловые информационные функции. Большие фотографии реальных спортсооружений и объектов, добавляющие динамики элементы, при этом хорошая структура как каждой отдельной страницы, так и четкая и понятная навигация по всему сайту.
Фирменные цвета и типографика
Стилистика должна отвечать не только задачам сайта, но укладываться в позиционирование бренда и использовать ключевые сообщения и фирменный стиль. Фирменный стиль, который мы разработали, включал в себя корпоративные цвета, шрифты, многофункциональный паттерн. Его базовые цвета – сине-фиолетовый и теплый красный, визуальные отголоски триколора.
Основным шрифтом был выбран популярный Montserrat, его отличает хорошая считываемость, «мягкая» округлость и большое количество начертаний, что важно для использования в разных задачах.
Общая структура и открывающие страницы
Мы проанализировали информацию, которая должна быть размещена на сайте, структурировали ее, изучили визуальные референсы и разработали интересный вариант двухуровневого меню – стандартные карточки с раскрывающимися списками и дополнительные ссылки-кнопки на самих страницах.
Такое меню решает несколько задач: позволяет человеку сразу видеть, какую еще интересующую его информацию в текущем блоке, например, в Мероприятиях, он может найти; делает более удобным физическое использование сайта, что важно и для слабовидящих, и для людей с проблемами с опорно-двигательной системой? и, главное, позволяет создать для филиалов практически отдельные небольшие сайты с удобной навигацией.
Мы также предусмотрели для филиалов особое оформление верхней части страниц, что визуально отличает их от основного сайта и помогает навигации.
Страницы-шаблоны
В большом сайте спортивной организации, безусловно, есть страницы, которые используют единый шаблон структуры – это и ускоряет процесс дизайна, верстки и программирования, и создает ощущение гармонии при просмотре сайта и упрощает считывание информации. Пользователь видит знакомую уже структуру и быстрее понимает, как найти на странице нужную ему сейчас информацию.
На сайте Центра достаточно много страниц посвящено различным объектам и услугам – спортивным сооружениям, лечебным процедурам, местам, где можно поесть, программам пребывания. Все они должны сначала быть показаны на одной странице, а потом быть подробно описаны на отдельных.
Кроме того, у центра в Новогорске большая история и поэтому страница с рассказом о спортивных победах, о развитии комплекса, о разных периодах есть и у главной территории, и у филиалов.
Необычные страницы
Кроме часто повторяющихся и похожих по своей структуре страниц есть и более специфические страницы. Они разработаны для других задач – привлекать внимание, выделяться, создавать настроение и при этом оставаться информационно насыщенными.
Например, у каждого сайта есть страница, которая появляется только в случае внутренней ошибки – если страница переехала на другой адрес или с ней возникли какие-то технические проблемы. Это страница «Ошибка 404», и мы всегда стараемся оформить ее необычно, ярко или с юмором, чтобы человек меньше переживал из-за отсутствия страницы. При этом обязательно и на такой странице есть и удобная навигация, и сохранены все принципы удобства, поэтому расписаны все возможности быстро продолжить навигацию по сайту и найти нужную информацию.
Адаптивные версии для мобильных телефонов
При разработке сайта мы обязательно отрисовываем не только версии для десктопа, но и версии для мобильных телефонов, так называемые адаптивы. В современном мире сайт обязан хорошо выглядеть на дейвайсах всех размеров, иначе люди просто не станут его смотреть и утруждать себя поиском информации в неудобном формате.
У адаптивных версий есть свои особенности – нельзя просто уменьшить все элементы десктопной версии и разместить их в границах экрана. В мобильной версии совершенно иное построение меню, мы сохранили двойной уровень, спрятав верхний уровень в раскрывающееся меню типа «гамбургер». Мы убрали часть украшений, т.к. они на небольших экрана уже просто мешают восприятию информации. Для крупных баннеров мы предусмотрели загрузку на сайт разных версий – горизонтальных для десктопа и вертикальных для мобильных телефонов, чтобы сохранить акценты и эмоциональный посыл страниц.
Стандартно также в мобильной версии используется крупный размер кнопок, чтобы их было удобно нажимать, отсутствуют ховеры и часть анимации, которая невозможна без мышки, иначе структурированы картинки – где-то мы размещаем их «каруселью» друг за другом, где-то скроллом по вертикали.
Благодаря отдельной отрисовке мобильных версий использование сайта остается удобным на экранах любого размера, а, значит, люди чаще будут заходить на сайт спортивной организации и смогут проводить там больше времени, т.к. им будет комфортно и приятно работать с информацией с телефона или планшета.
Над проектом работали:
Арт-директор – Юрий Косаговский
Дизайнер – Анастасия Мокроусова
