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

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