Дизайн-система для освітнього проєкту «Мовники»

Задача проєкту
Матеріали курсу (робочі зошити, гайди, тестові завдання) мали унікальний контент, але візуально виглядали хаотично та створювалися викладачами вручну «на коліні».
Головне завдання: Розробити концептуальний візуальний стиль та створити гнучку, автоматизовану систему шаблонів у Figma для навчальних PDF-конспектів (на базі матеріалів «ТИПИ ОДНОСКЛАДНИХ РЕЧЕНЬ .docx», «РЕДАГУВАННЯ ПОТРЕБУЄ.pdf» та «ВСЕ ПРО ЧИСЛІВНИК.pdf») та соціальних мереж (Instagram, Telegram).
Основна технічна вимога: Система має бути інтуїтивно зрозумілою та зручною, щоб клієнти могли самостійно змінювати тексти в шаблонах без допомоги дизайнера, а блоки автоматично підлаштовувалися під обсяг інформації.
Візуальна концепція: «Експертний панк / Зумерський мінімалізм»
Щоб поєднати непоєднуване — академічні правила та жорстку іронію, було обрано стиль Acid Grunge / Modern Retro з елементами цифрового мінімалізму.
Колірна палітра: Стерильний білий фон замінено на комфортний для тривалого читання з екранів брудно-кремовий та світло-сірий відтінки. Для бази використано глибокий графітовий (експертність), а для головних акцентів та емоційного виділення — фірмовий неоновий рожевий («пукаю до вашого серця») та кислотно-зелений.
Типографіка: Контрастна пара шрифтів. Акцизний, злегка грубий гротеск без засічок для хайпових заголовків («ШИЗА», «ПРАВИЛО ЛОХА», «ГРЬОБАНИЙ КЛОП») та максимально чистий, геометричний шрифт із високою читабельністю для великих масивів правил, тестів та таблиць.
Графічні елементи: Текстури пом'ятого паперу, діалогові вікна (speech bubbles) для інтеграції мемів, стрілочки та обведення, що імітують малюнки маркером вручну. Інтеграція ілюстрованих аватарів Єгора та Валерії як фірмових маскотів бренду.
Технічна реалізація у Figma (Основа кейсу)
Замість набору статичних картинок клієнт отримав повноцінну дизайн-систему:
Auto Layout 5.0 (Розумні блоки): Усі таблиці, картки правил та тестові варіанти налаштовані так, що при додаванні або видаленні тексту рамки, відступи та сусідні блоки автоматично адаптуються. Клієнту не потрібно нічого рухати руками.
Figma Components (Компоненти): Створено базові майстер-компоненти для плашок, варіантів відповідей у тестах та декоративних елементів. Зміна стилю в одному місці миттєво оновлює всі конспекти курсу.
Color & Text Styles: Усі кольори та шрифти зафіксовані в системі, що виключає появу випадкових відтінків у майбутніх матеріалах.
Склад пакета розроблених шаблонів
Навчальні матеріали (Формат А4 під PDF-гайди та друк):
Обкладинка теоретичного блоку.
Шаблон інформаційної сторінки (теоретичне правило + приклад).
Шаблон порівняльної таблиці (наприклад, для відмінювання числівників від 200 до 900).
Шаблон інтерактивного тесту на відповідність (класичний формат НМТ).
Шаблони для Social Media (Instagram / Telegram):
Карусель-шаблон для постів-карток (Зачіпка/Мем $\rightarrow$ Суть правила $\rightarrow$ Заклик до дії).
Рекламні макети для інтенсивів, сторіз-анонси («встигай забронювати місце») та плашки для відгуків учнів.
Результат проєкту
Проєкт «Мовники» отримав візуально дорогий, впізнаваній та унікальний концептуальний стиль, який повністю виділяє їх серед конкурентів на ринку онлайн-освіти. Хаотичні напрацювання перетворилися на професійну систему конспектів, які учням «хочеться гортати». При цьому викладачі повністю закрили питання дизайну — вони самостійно та швидко збирають нові методички у Figma, фокусуючись виключно на контенті та методології.
Ви можете скопіювати цей каркас і спробувати зібрати за ним свій перший екран у Figma, щоб протестувати шрифти та палітру.