Руководство по созданию иллюстраций: как сделать стиль своего бренда узнаваемым31.01.2017 14:38

Дизайнерское сообщество Sketchapp подготовило перевод материала от дизайн-студии Al Power о том, почему любому бренду важно разработать свой стиль иллюстраций и как создать по ним доступный гайдлайн.

В избранное

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

Для чего это нужно

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

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

Нельзя просто взять и нарисовать

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

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

Цели

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

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

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

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

Ценности

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

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

Мудборды

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

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

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

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

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

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

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

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

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

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

Наши иконки

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

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

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

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

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

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

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

Наш подход

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

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

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

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

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

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

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

Баланс цвета

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

Причины

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

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

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

Обводка

Обычно мы используем шестипиксельную обводку. При наличии мелких деталей выбираем обводку в три пикселя. Также везде используем скругления на углах. Цвет обводки всегда один — #8A8EA0.

Итак

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

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

Полное исследование можно посмотреть здесь.

В избранное

©  vc.ru