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

Привет! Меня зовут Валерия Царькова, я продуктовый дизайнер в Artsofte. В этом кейсе я расскажу о том, как мы переработали и расширили гайд по стилю иллюстраций для наших продуктов. Сохраните его, если у вас тоже растет продукт и команда, и вы активно используете иллюстрации в своей работе.

Изначально у нас был один продукт — Abanking, а упор в работе команды при создании интерфейсов был на UX. Иллюстрации в интерфейсах использовались очень редко и потребности в создании и поддержке своего уникального стиля еще не было. Позже, когда с ростом и развитием продукта мы стали активнее использовать иллюстрации в пользовательских интерфейсах и маркетинговых материалах, появился общий файл с иллюстрациями, отрисованными в едином стиле, а затем и первый небольшой гайд по нему.

Сейчас у нас появился новый продукт — Nocode, и идет разработка новых решений. Это не просто кратно увеличило количество иллюстраций, но и повысило требования к качеству и универсальности векторных исходников. Помимо этого, наши продукты вышли на международный рынок и вырос объем маркетинговых материалов — появилась необходимость усилить эмоциональную привлекательность продуктов и актуализировать графику.

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

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

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

Лучше всего в гайде работали и реально помогли улучшить качество иллюстративного материала три составляющие:

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

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

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

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

Вводный блок

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

Кратко о новом стиле

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

Базовые элементы

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

Было важно подробнее описать использование паттернов — эти правила существенно изменились. Раннее паттерн помогал заполнить пространство, теперь он поддерживает композицию только при необходимости.

Предметы

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

Привожу пример обновления стиля. Во-первых, он дает общее представление, из чего этот стиль формируется и чем отличается от других. Во-вторых — подсказывает, как рисовать объект самым простым путем. Тут же приложена ссылка на более подробный туториал (далее в гайде).

Пример создания иллюстрации с фотографии. Основной акцент я делаю на то, как она упрощается и лишается всех возможных лишних деталей. Это одна из самых важных вещей в новом стиле — минимализм, и его очень просто исказить лишними деталями. Поэтому, сопровождая человека по пути создании новой иллюстрации, я акцентирую на этом внимание в нескольких ключевых местах гайда.

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

Затем я добавила более подробную подсказку, как приблизить формы к нужным характеристикам стиля. Когда проверяешь готовую иллюстрацию и видишь ее свежим взглядом, сразу видно, что хочется «выпрямить» и «подровнять», но в процессе глаз замыливается и такие моменты часто упускаются из внимания.

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

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

Персонажи

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

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

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

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

Если в прошлом гайде я специально отрисовывала по нескольку вариаций частей тела, причесок и одежды, то в этом я лишь собрала то, что уже было. Как показала практика, множить эти сущности ни к чему — используются всего по 1-2 варианта, и это дает больше однородности в общей картине.

Советы по процессу работы

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

Отправка на ревью

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

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

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

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

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

Есть планы и на доработку, которые не были приоритетны сейчас, но потребность в них уже назревает в ближайшей перспективе. Например, это раздел про правила отображения интерфейсов в иллюстрациях. Будет прорабатываться система компонентов: мы планируем вывести и ограничить определенный набор фреймов, в которых иллюстрации будут применятся в интерфейсах. В соответствии с этим иллюстрации сразу будут заноситься в стилевую во всех необходимых вариантах размеров для использования в макетах и верстке.

Кроме того, нужно решить, как контролировать размещение готового материала в библиотеку. Ребята часто забывают при завершении задачи добавить свою иллюстрацию в общий файл, и поэтому в дальнейшем кто-то другой может тратить время на рисование сюжета, который уже был отрисован. Пока я планирую мониторить новые файлы в ручном режиме раз в две недели — насколько это будет эффективно, будет видно позже.

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