Проєктування
Дизайн
Webflow
Багатосторінковий сайт для онлайн-школи іноземних мов Green Languages
Про проєкт
З Даяною ми працювали вже не вперше. Колись ми робили лендінг для одного з її курсів, а за цей час бізнес помітно виріс. З викладачки, яка працювала самостійно, Даяна створила онлайн-школу з вивчення англійської та німецької мов.
Цього разу завдання було набагато масштабнішим. Потрібен був повноцінний багатосторінковий сайт для школи з різними напрямами навчання для кожної з мов: підготовка до іспитів, розмовні клуби та програми від нуля до рівня C1.

Сайт мав дати майбутнім студентам (а тут навчаються абсолютно всі: від 4 до 57 років!) відповіді на основні питання ще до першого зідзвону й зарядити їх позитивною енергією. Щоб шлях від «мені цікаво» до «записуюся» викликав тепле відчуття: «Здається, мені сюди».
( Задача )
Створити багатосторінковий сайт, який не просто познайомить з усіма напрямами, а розповість історію — як можна вивчити мову й не закинути її на півдорозі через брак мотивації
Зідзвон
Над проєктом я працювала самостійно у форматі «під ключ». І насамперед ми зідзвонилися з Даяною, щоб обговорити всі зміни в школі
На зідзвоні ми говорили про викладачів, студентів, підхід до навчання й про те, що результат з’являється лише в роботі 50/50: викладач дає знання та підтримку, а студент — своє бажання та залученість
Аналіз
Щоб розповісти про кожен напрям навчання, спочатку треба було зрозуміти людей, які вже навчаються в школі. Для цього я провела аналіз:
(1) школи
Я дослідила Instagram школи. Дивилася насамперед на те, як Даяна говорить, як пояснює, як показує своїх студентів. Уже на цьому етапі стало зрозуміло, що школа має дуже сильну сторону: реальні результати учнів у вигляді детальних кейсів.
(2) ЦА
Далі я перейшла до аналізу авдиторії. Щоб краще її зрозуміти, я попросила Даяну надіслати студентам анкети, які уважно розібрала й зібрала у велику зведену таблицю:
— що людям подобається,
— що відштовхує,
— які в них цілі, сумніви, очікування.
І ось тут почали з’являтися перші важливі інсайти.
(3) конкурентів
Після цього я перейшла до аналізу конкурентів. Тут моя мета була не «скопіювати, як у них», а ще глибше зрозуміти авдиторію й побачити, які рішення вже працюють.
Текст
Відповіді студентів поступово підказали, які історії мають з’явитися на кожній сторінці сайту
Мені було важливо, щоб тексти звучали максимально созвучно з Даяною. Тому за основу я брала і аналіз авдиторії, і Instagram школи — виписувала відповідні формулювання, підглядала подачу й уловлювала загальну інтонацію.

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

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

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

Тому окремо я підготувала кілька варіантів кольорів і шрифтів. Було одразу зрозуміло, що основним кольором стане зелений. Його підказували і назва школи Green Languages, і Instagram Даяни. Але зелений може виглядати абсолютно по-різному: десь більше затишку й тепла, десь свіжості й легкості, а десь спокою та впевненості.

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

Мені завжди цікаво спостерігати, які рішення зрештою обирає клієнт. Іноді цей вибір виявляється зовсім не таким, як я очікувала)
Дизайн
Далі я збирала цей настрій уже через деталі: шрифти, фотографії, анімації та маленькі візуальні рішення
(1) Фундамент настрою
У підсумку Даяна обрала шрифт Noto Serif. Він був і моїм улюбленцем, бо в ньому водночас є м’якість і відчуття надійності. Серед різних відтінків зеленого зупинилися на м’ятому — він додав сайту легкості та свіжості
(2) Образ розгорнутого блокнота
Ідея блокнота й iPad із мудборду знайшла продовження в дизайні. Я зібрала цей блок як розгорнуту сторінку, з місцем для заголовка, нотаток і акцентів
(3) Атмосфера через фотографії
В Інстаграмі Даяни багато живого спілкування, історій та справжніх моментів. Мені хотілося перенести це відчуття і на сайт. Тому її фотографії були не тільки в блоці «Про викладача», а стали частиною різних сторінок сайту
(4) Тактильне гортання
В блоці з кейсами студентів мені хотілося додати трохи більше живості. Тому картки тут злегка нашаровуються одна на одну, створюючи відчуття гортання сторінок
(5) Метафора каміна в буквах
Для літери «G» у «Green Languages» я використала додатковий шрифт. Ці плавні лінії шрифту так перегукувалися з образом полум’я каміна й допомагали додати в дизайн ще одну маленьку відсилочку до тепла та затишку
(6) Інтерактивне укутування
Для карток із форматами навчання я налаштувала плавну анімацію з невеликою затримкою. Мені хотілося, щоб взаємодія з сайтом відчувалася затишною. Тому колір м’яко огортає картку наче плед і так само плавно повертається назад
Текст
Так поступово з’явився весь дизайн сайту
Одну за одною зробила всі сторінки: головна, програми навчання з 0 до С1, підготовка до іспитів та розмовний клуб. Кожну з них я адаптувала, щоб сайт однаково круто й атмосферно виглядав і на комп’ютері, і на планшеті, і на телефоні.
Передача сайту
Щоб Даяна могла впевнено працювати з сайтом самостійно, я підготувала для неї інструкції відразу у двох форматах: текстовому та відео
Але мені так знайоме відчуття, коли вперше відкриваєш нову систему й боїшся натиснути не туди. Тому ми зідзвонилися й разом потренувалися робити все те, що може знадобитися у звичайній роботі: змінювати викладачів, додавати відгуки, оновлювати інформацію про старт наборів у групи.

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

І це так приємно спостерігати, як зараз зміни на сайт Даяна вносить самостійно
Розвиток проєкту
Школа продовжувала рости, у Даяни з’являлися нові ідеї, і поступово на сайті почали з’являтися нові сторінки
Спочатку на сайті з’явилася сторінка для визначення рівня мови. Потім зробили лендинг для інтенсиву з німецької граматики й налаштували автоматизацію оплати з доступом до закритого Telegram-каналу. На той момент Даяна вже сама надсилала структуру й тексти для нових сторінок — тесту та інтенсиву, а під час розробки я використовувала вже створені блоки, доповнюючи їх новими там, де це було необхідно.

Пізніше з’явилася сторінка для викладачів, де можна ознайомитися з вимогами школи та відгукнутися на вакансії.
Награды
Через кілька місяців після запуску я вперше наважилася відправити сайт на міжнародні нагороди. У підсумку він отримав чотири з них
Guru of the DAY
(Web Guru Awards)
(Design Nominees)
Site of The Day
Featured of the Day
(CSSLights)
(Top Design King)
King Of The Day
( P.S )
Цей проєкт збігся відразу з кількома моїми навчаннями з дизайну, Webflow, AI. Багато ідей, які сьогодні здаються мені звичними, тоді я вперше пробувала саме тут. Даяно, спасибі величезне за довіру та за свободу в реалізації креативних ідей!
Наступний кейс
«Розмовний клуб»
Скоро
certificate