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

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

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

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

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

Тиждень 1 — старт і перші концепти

Ми взяли два проєкти (корпоративні сайти) і одразу працювали над обома. Цей тиждень був про те, щоб зрозуміти естетику клієнта, очікування по стилю та спосіб подачі дизайну. Фактично — це був наш вхідний тест на смак, швидкість і здатність пропонувати різні напрямки візуального рішення.

• Project №1 — wireframe + 3 візуальні концепції
• Project №2 — wireframe + 3 візуальні концепції

25 годин

Коли базовий стиль і формат взаємодії стали зрозумілі, ми перейшли до глибшої роботи. Тут з'явився новий цікавий проєкт (№3), суть якого створювати дизайн монет за допомогою ШІ і потім ці монети користувач мав змогу замовити собі. Наша задача була вивчити конкурентів і розробити інтерфейс кабінету для цього продукту, на базі отриманих знань про ринок і нішу

Тиждень 2

• Project №3 — аналіз конкурентів, 3 варфрейми та 2 дизайн-концепти
• Project №1 — 7 повноцінних сторінок дизайну по обраній концепції

28 годин

Тиждень 3 — адаптиви та системність

На цьому тижні наш фокус був лише на одному проєкті (№1), бо там були стилсі терміни реалізації

• Project №1 — 3 нові сторінки та мобільна адаптація всіх сторінок

31 година

Останній тиждень місяця став найбільш інтенсивним, бо ми підхопили Project №4, у якого була нетипова ситуація. У клієнта вже існував сайт, але з часом він повністю втратив контроль над ним: немає доступів, немає вихідних файлів, немає можливості вносити зміни чи масштабувати сайт.

Щоб повернути керованість проєкту, ми взяли на себе повну реконструкцію дизайну. Через стислі терміни, над проєктом працювало одразу 3 дизайнери:

• Створили у Figma точну систему макетів на основі існуючого сайту
• Покращили де було можливо всі ключові сторінки та адаптували їх під мобільні пристрої
• Підготували структуровані файли для розробників, щоб вони могли стабільно продовжувати роботу без хаосу та пошуку візуальних рішень

Тиждень 4

• Project №4 — переніс 25 сторінок + PDF-документ з фіксацією покращень

38 годин

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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