Разработка фирменного стиля иллюстраций Adobe

Контекст

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

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

Краткая история иллюстраций в продуктах Adobe

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

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

Ранний эксперимент со стилем и иллюстрация пакета Adobe Acrobat 5.0
Adobe Capture: ознакомительная иллюстрация
Иллюстрация библиотеки CC

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

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

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

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

«Хотя было забавно наблюдать, как далеко я могу увести стиль от исходного материала, сохранив при этом более традиционную человеческую форму на рисунках, стало очевидно, что это направление не будет таким гибким, как мы хотели. Я рад, что мы сменили направление, и Эмма провела замечательное тщательное исследование, которое направило нас на верный путь к развитию уникального и адаптируемого визуального словаря». - Кайл Вебстер

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

Пора отказаться от тренда ...

Мобильный баннер Adobe Spectrum с инклюзивным дизайном

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

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

Установление принципов и поиск

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

Чтобы поэкспериментировать и определить новый стиль, я ограничил свои исследования четырьмя направлениями:

  • Человеческая форма и перспектива
  • Текстура
  • Форма
  • Цвет

Я потрачу некоторое время на обсуждение каждого пункта и приведу несколько примеров.

Человеческие форма и перспектива

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

Взвешивание сердца, 1475 г. до н.э.
Поиск решения для профиля

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

Текстура

Поиск текстуры

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

Форма

Плакат (1924) использует строгую грамматику простую геометрию и плоские цвета для продвижения кампании по обучению рабочих.

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

Формы которые я использую в иллюстрациях

Цвета

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

Определение визуального языка

Повествование и степень абстрактности

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

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

Текстуры и линии

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

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

Демонстрация

Вот несколько иллюстраций, которые я создал на основе этой новой системы. Вы можете заметить их в последней версии Document Cloud (Acrobat) и в последней версии Creative Cloud.

Перевод статьи heydesigner

Надеюсь, вам понравилась эта статья. Если у вас появились идеи или возражения – напишите комментарий! И обязательно подписывайтесь ✌️