Розробка сучасного сайту для найбільшої танцювально-спортивної школи Фінляндії

Танцювально-спортивна школа Master, заснована у 2014 році в Гельсінкі, пройшла шлях від невеликої студії до найбільшої школи танців у Фінляндії. Вона стала місцем, де навчаються як аматори, так і майбутні чемпіони, а її випускники здобули численні нагороди на національних та міжнародних змаганнях.

Однак, попри стрімкий розвиток школи, її онлайн-присутність залишалася незмінною з моменту заснування. Сайт, створений на платформі Wix, мав застарілий дизайн і обмежені можливості для управління контентом. Це не відповідало сучасним потребам школи та її статусу.

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

Клієнт поставив перед нами такі вимоги:

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

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

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

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

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

На кожній ітерації було запропоновано 2 концепції. Ми отримували екологічний, структурований фідбек і робили наступний підхід. Наша основна задача - зробити якісний продукт, щоб замовник залишився на 100% задоволений

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

Тут особливо немає що відокремити. Цей етап - це довга та кропітка робота, враховуючи кількість сторінок. З боку клієнта були затримки по підготовці контенту, тому весь процес був достатньо довготривалий. Але наша команда і команда замовника впорались с задачею на відмінно

Зробивши всі макети, дизайнери підготували UI-kit та затвердили референси по анімації ключових секцій сайту. Далі був спільний дзвінок з командою розробників і замовником, де були передані всі матеріали

Як завжди, розробка починається з визначення архітектури проєкту, методології найменування класів, аналізу технічно складних модулів і нестандартних анімацій. Цим займається тімлід проєкту

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

Робота над версткою статичних сторінок тривала близько 6 тижнів. Як завжди, після завершення цього етапу ми передали проєкт клієнту на рев’ю. За результатами зворотного зв’язку внесли правки.

Далі ми приступили до проєктування Webflow CMS. Якихось складних вимог до системи управління контентом не висувалося, тому робота рухалася швидко. Водночас для нас було важливо забезпечити максимальну зручність експлуатації CMS клієнтом, який не пов’язаний із IT. Тому все мало бути максимально зрозумілим. Кожне поле бази даних ми називали та описували. Усе вторинне або не для клієнтського використання — позначали.

Коли весь проєкт був зверстаний, ми знову відправили його на рев’ю клієнту. Так, ми надаємо перевагу тісній взаємодії з клієнтом, щоб:

• Він був спокійний, бачив динаміку роботи та знав, на якому етапі ми перебуваємо.
• Залишався емоційно залученим у процес

В останню чергу ми приступили до створення анімаційних сценаріїв. Традиційно, ми використовували нативну анімацію Webflow і, звісно, бібліотеку GSAP (для анімації заголовків і головних екранів сторінок). А також SplideJS для реалізації слайдерів.

Слайдерів у проєкті виявилося чимало. І всі вони трохи відрізняються відповідно до функціональності. При цьому кожен слайдер, якщо містить таку кількість слайдів, яка вміщується на сторінці, перетворюється на статичний блок.

Загалом проєкт налічує 27 статичних сторінок і 4 CMS-колекції (відповідно, 4 унікальні динамічні сторінки). Загальна тривалість реалізації - близько 16 місяців, що є рекордним терміном реалізації для нашої команди. Але це було пов’язано з особливою завантаженістю клієнта та відсутністю можливості швидко надавати зворотний зв’язок. Для нас комфорт клієнта — передусім, тому доводилося пристосовуватися.

Якщо вам цікава тема дедлайнів і їхнього впливу на результат, пропонуємо вам прочитати нашу статтю: “Терміни реалізації веб-проєктів: як клієнт і підрядник можуть вплинути на дедлайни”

Ми знову відправили клієнту вже повністю готовий проєкт на ретельне рев’ю. В результаті отримали відповідь із додатковими побажаннями щодо проєкту, на реалізацію яких пішло ще близько 10 днів.

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