Лого vc.ru

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

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

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

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

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

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

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

Пример стиля иллюстрации

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

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

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

Цели

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

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

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

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

Ценности

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

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

Мудборды

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

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

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

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

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

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

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

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

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

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

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

Наши иконки

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

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

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

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

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

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

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

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

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

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

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

Наш подход

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

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

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

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

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

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

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

Баланс цвета

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

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

Причины

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

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

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

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

Обводка

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

Итак

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

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

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

Вы кроме Apple компании то знаете?
Уж если и похоже на что-то, то больше на Dropbox.

Сейчас на dribbble, и behance, и в буржуйском интернете в целом модны сейчас иллюстрации такие и пиктограммы в "рисованном" стиле.

Тренд такой: люди начали уставать от "неживого" flat'a и стали разбавлять его "жизнью".

0

Тут ты прав. Flat достал....

Перевод не соответствует оригиналу, повсеместно, само изложение рассказа подается не так в первоисточнике, не говоря уже о деталях перевода. Автор подает общее виденье какой должна быть илюстрации в дизайне, а потом открывает свое виденье выделяя это "Our Language for Illustrations", что переведено как "Язык иллюстраций" и уже рушится сама схема, как будто они определяют его как "универсальный", хотя все дальнейшее рассуждение идет что это "их язык", они так делают.
Как можно было перевести "Use of Characters
We refrain from using characters where possible." - "Использование персонажей Мы воздерживаемся от использования персонажей повсеместно." ?? Даже гугл переводчик, сделал это лучше.
За попытку и материал 5, за перевод трояк)

0

А ещё стейкхолдер и мудборд. )

0

Кто такой стейкхолдер?

Люди и организации, оказывающие влияние на проект, называются стейкхолдерами. Прижившийся в среде отечественных менеджеров проектов термин «стейкхолдер» (от английского stakeholder, буквально – «владелец доли») в официальной литературе переводится по-разному. PMBOK предлагает вариант «заинтересованная сторона», наш ГОСТ 51897-2002 – «причастная сторона» (гостовский перевод, пожалуй, более точный).

Раньше тоже не знал, пока на Habr не прочитал об этом.

Если нужно "стиль бренда сделать узнаваемым" - то это ещё не бренд))

0

Спасибо за статейку, пригодится!

0

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

И тут я забыла, зачем пришла

Один из самых узнаваемых брендов - вино с кенгуру, произведенное в Австралии. Маркетологи рассчитывали на примитив американского восприятия и не прогадали.

Прямой эфир
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления