Яндекс Практикум — онлайн-курсы обучения IT-профессиям от Яндекс.

Аудитория — взрослые люди, обучающиеся программированию.
Продуктовый портфель с несколькими запущенными продуктами и планами на новые запуски в быстром темпе.

Мне и команде нужно было создать гибкую систему стилей иллюстраций, которая:
• Объединит визуально разные продукты в одной линейке, сохранив преемственность.
• Учтёт продуктовый дизайн платформы, на которой будут показываться иллюстрации: тёмную и светлую темы, способы загрузки и показа изображений в десктопной и мобильной версии.
• Будет понятной и доступной для работы разным иллюстраторам.
• Поможет быстрее разрабатывать новые материалы.
• Учтёт обратную связь студентов и будет поддерживать их мотивацию.

Мы начали с исследования:
• Анализ существующих иллюстраций показал, что стили сильно различаются, но есть элементы, которые можно объединить.
• Метрики использования иллюстраций помогли нам спрогнозировать, сколько новых иллюстраций потребуется.
• Отзывы студентов показали, что наибольший отклик вызывают ситуативные иллюстрации с персонажами, а также изображения с легким юмором и жизненными ситуациями, понятными взрослым учащимся.

Мы предположили, что создание универсальной иллюстрационной системы с возможностью гибкой адаптации под разные продукты позволит:
• Ускорить производство иллюстраций за счет единой визуальной рамки и предсказуемого процесса.
• Обеспечить консистентность – продукты будут выглядеть частью одной экосистемы, а не разрозненными решениями.
• Снизить затраты – вместо разработки уникального стиля для каждого продукта мы сможем вносить небольшие изменения в базовую систему.
• Повысить удобство для иллюстраторов – четкие гайдлайны позволят легко передавать задачи разным художникам.
• Создать эмоционально поддерживающий стиль – студенты смогут чувствовать узнавание в новых продуктах и лучше ассоциировать себя с персонажами и ощущать поддержку в процессе обучения.

На основе анализа мы разработали гибкую иллюстрационную систему:
• Создали визуальную рамку – набор стилистических правил, позволяющих легко адаптировать стиль для разных продуктов.
• Перенесли акцент на взрослых студентов, отказавшись от упрощенного «детского» визуального языка.
• Выбрали векторный формат, который проще масштабируется и быстрее создается.
• Разработали гайдлайны – описали цветовую палитру, толщину линий, текстуры, эмоции персонажей.
• Пробовали разные стили и остановились на сочетании элементов инженерных схем, спокойных цветов, легкой иронии и сложных эмоций.

Новая система иллюстраций позволила:
• Создавать подстили для разных продуктов без потери визуальной целостности.
• Сократить время на разработку новых материалов.
• Снизить затраты на создание иллюстраций за счет их взаимозаменяемости.
• Повысить прозрачность процесса – теперь менеджеры и продюсеры лучше понимают, как планировать работу с иллюстрациями.
• Получить положительный отклик от пользователей – студенты лучше воспринимают иллюстрации, чувствуют поддержку и вовлекаются в процесс обучения.

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