Doka.guide — open-source онлайн-энциклопедия для разработчиков, где пользователи создают и редактируют статьи, формируя актуальную базу знаний.

На этапе подготовки к запуску у проекта уже была разработана платформа, но не было четкой системы визуального оформления. Графика создавалась авторами статей в разных инструментах, без единого стиля и единых принципов оформления. Это влияло на восприятие контента и усложняло его создание в едином стиле и на одном уровне качества.

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

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

Мы изучили существующий контент, инструменты, которые использовали авторы, и определили основные типы графики:
• Технические схемы — диаграммы, блок-схемы, таблицы, визуализирующие процессы и концепции.
• Иллюстрации — обложки статей, передающие настроение и бренд идентичность.

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

Графический конструктор для технических схем
Для удобства работы авторов был разработан набор готовых компонентов в Figma. Это модульная система элементов для создания диаграмм, блок-схем и таблиц. Комбинируя их, можно быстро собрать схему без необходимости рисовать элементы с нуля.

Дополнительно была подготовлена документация, содержащая инструкции по использованию конструктора: принципы компоновки элементов, допустимые размеры фреймов, рекомендации по оформлению. Это позволило сделать процесс создания графики понятным и доступным.

Система иллюстраций
Для иллюстраций был разработан единый визуальный стиль, основанный на геометрических формах, четкой модульности и ограниченной палитре цветов, консистентной палитре платформы. Это позволило обеспечить целостность графики и платформы.

Одним из важных аспектов стало создание адаптивного подхода для светлой и темной тем. За счет использования прозрачных элементов иллюстрации автоматически адаптируются под цветовую схему интерфейса без необходимости создавать отдельные версии.

За 4 месяца мы подготовили систему визуального оформления контента, которая ускорила создание новых статей и упростила работу авторов.
• Более 10 авторов используют графический конструктор для создания схем без участия дизайнеров.
• Время на создание схем сократилось в 2 раза благодаря готовым компонентам и документации.
• 100+ иллюстраций и схем оформлены в едином стиле перед запуском продукта.
• Одна и та же иллюстрация в обложках статей работает автоматически в светлой и темной темах продукта за счет адаптивного подхода. А значит экономия на создании файлов в два раза.

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