Веб-сайт для крупнейшей школы танцев и спорта в Финляндии

Школа танцев и спорта Master, основанная в 2014 году в Хельсинки, прошла путь от небольшой студии до крупнейшей танцевальной школы Финляндии. Здесь тренируются как любители, так и будущие чемпионы, а выпускники школы завоевали множество наград на национальных и международных конкурсах.

Однако, несмотря на быстрое развитие школы, ее присутствие в Интернете осталось неизменным с момента основания. Сайт, созданный на платформе Wix, имел устаревший дизайн и ограниченные возможности управления контентом. Это не соответствовало современным потребностям школы и ее статусу.

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

Клиент предъявил нам следующие требования к реализации сайта:

• Простота использования: интуитивно понятный интерфейс для посетителей.
• Современный дизайн: стильный, эстетичный внешний вид, соответствующий духу творчества.
• Мобильная адаптация: полная оптимизация для смартфонов.
• Безопасная миграция: необходимо было максимально безопасно обновить сайт для позиций в поисковых системах
• Редактирование контента: возможность легко обновлять информацию без привлечения разработчиков
• Масштабируемость: предусмотреть возможность расширения предложений в будущем.
• Анимации: интерактивные сценарии, добавляющие динамику.
• Многоязычие: поддержка нескольких языков для разных аудиторий.

Мы начали работу со знакомства с текущим сайтом школы. Необходимо было тщательно изучить информационную архитектуру, чтобы обеспечить плавный переход на новый сайт. Параллельно изучались технические характеристики и пожелания клиента по обновлению структуры

Не обошли стороной мы и изучение сайтов конкурентов. Основное внимание было уделено именно структуре. Мы стремились найти лучшие решения в отрасли. Конкуренты были разделены на 3 категории: прямые (из Хельсинки), косвенные (компании, предлагающие аналогичные услуги, но для другой аудитории или с другим подходом), лидеры рынка из разных стран

На основе всех изученных материалов была создана карта нового сайта. Все наши идеи по оптимизации структуры были приняты, и мы перешли к варферейму основной страницы

Этот проект во многом уникален для нас, и одной из уникальных вещей является именно стадия создания концепции дизайна. Наш клиент — очень творческая личность, но в то же время имеет системный подход к работе. Впервые за время существования нашей студии мы подготовили целых 6 дизайн-концепций

Для каждой итерации было предложено 2 концепции. Мы получали экологическую, структурированную обратную связь и делали следующий подход. Наша главная задача — сделать качественный продукт, чтобы клиент был доволен на 100%

Когда мы определились с концепцией, было проведено еще несколько итераций поиска цветовой гаммы и шрифтов. Как и в 90% случаев, в итоге цвет и шрифт, предложенные дизайнером с самого начала, были одобрены. Но клиент был очень вовлечен в процесс и остался доволен этим поиском. После окончательного утверждения концепции дизайнеры выпили бокал вина и приступили к воспроизведению концепции на всех страницах сайта

Тут особенно нечего выделить. Этот этап — долгая и кропотливая работа, учитывая количество страниц. Со стороны клиента возникали задержки с подготовкой контента, поэтому весь процесс оказался довольно долгим. Но наша команда и команда заказчика отлично справились с задачей

Сделав все макеты, дизайнеры подготовили UI-kit и утвердили референсы для анимации ключевых разделов сайта. Затем состоялся совместный звонок с командой разработчиков и заказчиком, где были переданы все материалы

Как обычно, разработка начинается с определения архитектуры проекта, методологии наименования классов, анализа технически сложных модулей и нестандартных анимаций. Этим занимается тимлид проекта

Перед началом верстки для удобства и монументальности проекта мы создаем руководство по стилю, в котором определяем все сервисные классы для заголовков, текстовых блоков, кнопок, изображений и т. д. Также перед началом работы важно определить тип верстки и поведение сайта на разных расширениях пк (1440, 1920, 2560 и т.д.). Наш вариант — резиновая верстка с адаптивами на ключевых брейкпоинтах. Максимальная ширина контейнера — 1380 пикселей.

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

Затем мы приступили к разработке Webflow CMS. Сложных требований к системе управления контентом выдвинуто не было, поэтому работа шла быстро. В то же время для нас было важно обеспечить максимальное удобство использования CMS клиентом, не связанным с ИТ. Поэтому все должно быть максимально понятно. Мы назвали и описали каждое поле базы данных.

Когда весь проект был завершен, мы снова отправили его на рассмотрение клиенту. Да, мы предпочитаем тесное взаимодействие с клиентом, чтобы:

• Он был спокоен, видел динамику работы и знал, на каком этапе мы находимся.
• Оставался эмоционально вовлеченным в процесс

И последнее, но не менее важное: мы начали создавать сценарии анимации. Традиционно мы использовали нативную Webflow анимацию и, конечно же, библиотекe GSAP (для анимации заголовков и экранов главной страницы). А также SplideJS для реализации слайдеров.

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

Всего в проекте 27 статических страниц и 4 CMS коллекции (4 уникальные динамические страницы). Общее время разработки составило около 16 месяцев, что является рекордным сроком реализации для нашей команды. Но это было связано с особой загруженностью клиента и отсутствием возможности быстро предоставлять обратную связь. Для нас комфорт клиента — прежде всего, поэтому нам пришлось адаптироваться.

Если вас интересует тема сроков и их влияние на результат, предлагаем вам прочитать нашу статью: «Сроки веб-проектов: как заказчик и подрядчик могут повлиять на сроки»

Мы снова отправили клиенту полностью готовый проект на тщательное рассмотрение. В результате мы получили ответ с дополнительными пожеланиями по проекту, реализация которого заняла около 10 дней.

Клиент остался доволен нашей работой. Мы гордимся тем, что можем быть такими полезными