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

Зачем это необходимо?

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

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

Пример стиля иллюстрации
Пример стиля иллюстрации
Нельзя просто взять и…

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

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

Цели

Зачем вы хотите добавить иллюстрации? Каким образом вы будете оценивать проект?

Существующий гид по стилю

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

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

Ценности

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

Мудборды

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

При создании мудборда не стоит вдаваться в детали. Мудборды больше служат для того, чтобы задать вектор направления для дальнейшей работы. Для исследования в данной области существует масса ресурсов таких, как Behance, Dribbble, Pinterest, iStock или тот же старый добрый поиск изображений в Google. Это все делается для того, чтобы собрать как можно больше информации прежде, чем приступить к созданию первого артборда.

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

Время засучить рукава

К счастью, я создавал такие гайдлайны ранее. Попав в команду Globoforce, мне поступила задача создать иллюстрированный стиль для использования на нашей white-label платформе.

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

Пробуйте, пробуйте и еще раз пробуйте

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

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

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

Язык иллюстраций

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

Наши иконки

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

Иконографика
Иконографика

Наши текстовые иллюстрации

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

Текстовые иллюстрации
Текстовые иллюстрации

Наши иллюстрации незанятого состояния

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

Наши иллюстрации незанятого состояния
Иллюстрации незанятого состояния

Иллюстрации сцен

Иллюстрации сцен размещаются на большем пространстве и выполняют функцию объяснения пользователю фичи или сценария более детально.

Иллюстрации сцен
Иллюстрации сцен

Наш подход

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

Радуют взгляд пользователя в заведомо «пустых» областях

Иллюстрации информирования

Придерживайтесь простоты

Так как наш продукт, относится к white-label, иллюстрации будут использоваться в расчете на самые разнообразные категории клиентов. Именно поэтому мы решили придерживаться максимально простого и пассивного стиля.

Просты иллюстрации

Использование персонажей

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

Использование персонажей

Цветовая схема

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

Цветовая схема иллюстрций

Баланс цвета

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

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

Причины:

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

Иллюстрации должны быть пассивными и не привлекать слишком много внимания

Цветовая схема для иллюстраций неактивных состояний

Для опции неактивных состояний мы использовали наш «призрачный белый» цвет и обводку. В этих опциях используется тень и никаких цветов. Для того, чтобы снизить визуальную нагрузку, мы использовали прозрачность в 50%.

Иллюстрация пустого состояния
Иллюстрация пустого состояния

Обводка

Обычно, мы используем 6-ти пиксельную обводку. При наличии мелких деталей, мы используем обводку в 3 пикселя. Также, мы везде используем скругления на углах. В качестве цвета обводки, мы всегда используем #8A8EA0.

Создание руководства по стилю для иллюстраций

Обводка илююстраций

В конце дня…

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

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

Вы можете посмотреть полное исследование здесь: https://www.behance.net/gallery/46 062 029/Illustration-Guideline