Багатосторінковий сайт для школи з Webflow-девелопменту

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

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

Завдяки цьому ми змогли створити унікальну екосистему для навчання Webflow-розробці, яка відповідає сучасним вимогам ринку. Однак, разом із зростанням школи, стало очевидним, що наш попередній веб-сайт, який виконував функцію простого лендингу, більше не відповідає нашим потребам. Він не відображає масштабу нашої діяльності, преміальності наших продуктів та високого рівня сервісу, який ми пропонуємо.

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

Коли ти навчаєш створенню веб-сайтів, твій власний сайт має бути не просто вітриною, а доказом твоєї експертизи, майстерності та лідерства у своїй галузі. Саме тому ми поставили перед собою амбітні завдання, які мали забезпечити не лише естетичну досконалість, а й функціональну ефективність нашого нового веб-проєкту. Ось ключові вимоги, які ми визначили:

• Витончений дизайн. Результати попереднього опитування серед наших студентів підтвердили, що наші клієнти приділяють значну увагу зовнішньому вигляду ресурсу школи, де вони планують навчатися. Тому ми поставили перед собою завдання створити дизайн, який би випромінював стриману впевненість, демонстрував нашу експертизу та лідерство на ринку Webflow-освіти. Кожна деталь мала підкреслювати преміальність нашого продукту, залишаючи незабутнє враження
• Планшетна та мобільна адаптація. У сучасному світі більшість користувачів заходять на сайти з мобільних пристроїв. Тому ми приділили особливу увагу повній оптимізації сайту для всіх типів гаджетів. Незалежно від того, чи це смартфон, планшет або ноутбук, наш сайт мав виглядати ідеально та працювати бездоганно
• Підтримка та масштабування. Оскільки наша школа постійно розвивається, ми часто змінюємо контент, додаємо нові курси та створюємо продуктові сторінки. Тому сайт мав бути гнучким і легко масштабованим. Ми передбачили можливість швидкого редагування та додавання нових елементів без необхідності залучення розробників
• CMS та фільтрація контенту. Наша освітня діяльність передбачає регулярне написання статей, які є важливою частиною нашого контенту. Ми мали створити зручний інтерфейс для фільтрації статей за категоріями, темами чи іншими параметрами. Крім того, архітектура динамічної сторінки окремої статті мала бути продуманою до дрібниць, включаючи можливість поділитися матеріалом у соціальних мережах
• Вишукані анімації. Ми прагнули створити досконалі сценарії анімацій, які б підкреслювали витонченість нашого сайту. Інтерактив мав бути ненав’язливим, але водночас незабутнім. Анімації мали гармонійно доповнювати користувацький досвід, не перевантажуючи його, але додаючи елемент "вау-ефекту" у моменти взаємодії
• Автоматизація. Школа регулярно отримує запити на зворотній зв’язок, питання від потенційних студентів або пропозиції співпраці. Тому ми передбачили автоматизацію процесу обробки цих запитів. Зокрема, ми реалізували функцію автоматичної публікації сабмішнів у месенджери, що значно спрощує комунікацію та економить час нашої команди

Ці завдання стали основою для створення сайту, який не лише відповідає нашим високим стандартам, але й перевершує очікування наших клієнтів.

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

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

Протягом тижня ми провели 6 інтерв’ю з людьми, які за останні пів року проходили онлайн-навчання. Цей етап дав нам кілька важливих інсайтів, що допомогли створити максимально релевантну структуру сайту та правильно розставити акценти на ключових сенсах, які ми прагнули донести.

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

Окрім цього була створена кастомна графіка з логотипу Webflow. Це був хоч і довгий, але цікавий процес

• Генерація зображень. За допомогою Adobe Firefly ми створили унікальні зображення за базі логотипу Webflow.
• Генерація відео. За допомогою Runway ми перетворили ці зображення на відео. Після цього створені відео збільшили (upscale), щоб вони вдповідали вимогам для лейауту сайту
• Lottie із PNG-сіквенцій. Після цього кожне відео ми перетворили на ПНГ-секвенції, щоб створити з них lottie (json) файли. Завдяки цьому формату в подальшому ми змогли керувати файлом за будь-яким тригером. В нашому випадку тригером був скрол сторінки

Нижче можете подивитись приклади етапів роботи над створенням цієї графіки

Протягом певного часу ми шукали оптимальний стиль. До команди приєдналася дизайнерка Алекса, яка привнесла свіжі ідеї. У результаті нам вдалося знайти саме те, що потрібно.

Наступним кроком стало масштабування концепції на всі сторінки сайту та створення style guide для системного й зручного впровадження дизайну. Деякі сторінки мали складні layout, тому дизайнери тісно співпрацювали з розробниками, щоб уникнути рішень, які неможливо реалізувати. Окрему увагу приділили великим масивам повторюваних даних (відгуки, кейси, випускники), щоб забезпечити зручність користування й візуальну цілісність сайту.

Після створення всіх сторінок десктоп версії сайту ми перейшло до адаптації макетів під планшет та мобільні пристрої.

Перед початком роботи ми ретельно підійшли до вибору технологічного стеку та розробки методології найменування класів, щоб забезпечити структурованість і зручність у процесі розробки. Було створено детальний style guide, який включав усі базові стилі для заголовків, текстових блоків, кнопок, зображень та інших елементів. Це дозволило стандартизувати дизайн-систему та забезпечити цілісність і узгодженість усього проєкту.

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

Особливу увагу ми приділили адаптивності сайту. Було визначено ключові брейкпоінти для різних роздільних здатностей екранів (1366, 1440, 1920, 2560 пікселів), а також обрано гумову верстку з адаптивами на ключових брейкпоінтах і фіксацією контейнера від 1460 пікселів. Такий підхід забезпечив гнучкість дизайну та комфортний користувацький досвід на будь-яких пристроях.

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

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

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

Структура та контентна складова

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

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

Незважаючи на вражаючі можливості Webflow у створенні анімацій, більшість інтерактивних сценаріїв на нашому сайті була реалізована за допомогою GSAP. До речі, як стало відомо з останніх новин 2024 року, GSAP тепер офіційно інтегрований в екосистему Webflow, що відкриє ще більше можливостей для розробників вже в 2025-му.

Для зручності роботи з кодом, контролю змін та деплойменту всі скрипти були винесені на сторонній CDN, що забезпечило стабільність і легкість у підтримці проєкту.

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

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

Проте, як і будь-яке візуальне мистецтво, анімації краще бачити. А ще краще — взаємодіяти з ними, ніж просто читати про них.

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

Ми досягли підвищення конверсії, а найголовніше — отримали ще одного задоволеного клієнта нашої студії. І цим клієнтом стали ми самі.