СВЯЗАТЬСЯ
EN

Разработка стиля цифровых 2D иллюстраций для компании EPAM

З А Д А Ч А

Разработать стиль векторной 2D-иллюстрации для внутренних и внешних продуктов компании. Создать набор элементов для библиотеки, также гайдлайн для дальнейшей интеграции иллюстраций в продукты без участия иллюстратора, а только с помощью experience designers.

uui.epam.com
1
ИЛЛЮСТРАТОР
работал над данной задачей
11
МЕСЯЦЕВ
работы заняла разработка стиля, элементов и гайда
400+
ЭЛЕМЕНТОВ И ИЛЛЮСТРАЦИЙ
было создано за 11 месяцев работы
Проводя конкурентный анализ крупных ИТ-компаний на международном рынке я поняла, что с миром иллюстраций беда ... Да, есть масса невероятно крутых иллюстраторов, есть безумно много сильных работ. Но я не смогла найти хороший и четкий кейс или процесс, по которым разрабатывался стиль иллюстраций для компаний. Как это происходит сейчас: нанимают иллюстратора и он просто рисует. Все. Передо мной стояла сложная задача: понять, по каким процессам надо пройти при выработке стилистики и как это все потом оформить и передать, чтобы это мог грамотно использовать любой дизайнер в компании на своем проекте или иной иллюстратор.
Аполлинария Манько
Product Designer, Illustrator

Этапы разработки стиля 2D-иллюстраций

01 ЭТАП
01 ЭТАП
Конкурентный анализ
(качественный и количественный)
02 ЭТАП
02 ЭТАП
Создание
Мудборда
03 ЭТАП
03 ЭТАП
Карандашные
композиционные скетчи
04 ЭТАП
04 ЭТАП
Разработка персонажа
в разных стилистиках
05 ЭТАП
05 ЭТАП
Цифровые скетчи
с разными стилями персонажей
06 ЭТАП
06 ЭТАП
Чистовая проработка иллюстрации
в трех стилистиках
07 ЭТАП
07 ЭТАП
Создание маленькой иллюстрации
в трех стилистиках
08 ЭТАП
08 ЭТАП
Создание первых иллюстраций
в выбранной стилистике
09 ЭТАП
09 ЭТАП
Разработка элементов
для библиотеки
10 ЭТАП
10 ЭТАП
Разработка
гайда
11 ЭТАП
11 ЭТАП
Создание серии
чистовых иллюстраций
Конкурентный анализ
В один из первых этапов было решено провести конкурентный анализ, в основу которого легли топовые международные ИТ компании из разных индустрий: Linkedin, Facebook, Dropbox, Tilda Publishing, Atlassian, Etsy, Google, Mail.ru, Flo. Проведено было два вида конкурентного анализа: качественный и количественный.
Подборка иллюстраций для качественного конкурентного анализа
Во время проведения конкурентного анализа была собрана большая подборка иллюстраций каждой компании. А также были изучены статьи и видео-презентации в поисках оптимального подхода в создании и разработки корпоративного стиля иллюстраций. К моему большому сожалению и удивлению, я не смогла найти хорошего примера последовательной работы над выработкой стилистики для больших корпораций.
Создание мудборда
На этом этапе стояла задача сделать мудборд, разбив его на несколько больших категорий. Так как будущие иллюстрации точно предполагали наличие персонажей, безусловно мудборд состоял из категорий: лица, руки, ноги. Также собирались работы разнообразной стилистики, шел поиск геометрических текстур, абстрактных фонов, растений. Ниже представлена небольшая часть мудборда.
Создание карандашного скетча
Для создания первого карандашного композиционного наброска была выбрана уже существующая сюжетная иллюстрация на одном из текущих внутренних продуктов компании. Задача: кардинально улучшить сюжетную и композиционную линии. После составления небольшой карты ассоциаций, было создано три весьма примитивных наброска с разными композициями. Далее каждый из этих эскизов был проработан снова в карандаше, но уже более детально.
01 ЭСКИЗ

Звезды (рейтинг), Ноутбук, Сбор отзывов, прогресс бар, Работа за ноутбуком в парке.
02 ЭСКИЗ

ЗВЕЗДЫ (РЕЙТИНГ), НОУТБУК, СБОР ОТЗЫВОВ, ПРОГРЕСС БАР, РАБОТА ЗА ноутбуком, окно браузера, рабочий стол.
03 ЭСКИЗ

ГРОМКОГОВОРИТЕЛЬ, ЛАЙКИ, ПРОФАЙЛ, ЗВЕЗДЫ (РЕЙТИНГ), НОУТБУК, СБОР ОТЗЫВОВ, ПРОГРЕСС БАР, РАБОТА ЗА НОУТБУКОМ.
Разработка персонажа в разных стилистиках
Выше я уже упоминала, что иллюстрации точно должны включать персонажей. И по сути в большей части иллюстраций они занимают главную роль и на их базе строится сюжет. Поэтому, было принято решение, начать разработку стилистики будущих иллюстраций именно с создания персонажа.
Выбранный композиционный эскиз для дальнейшей проработки
Параллельно с созданием стилистических вариантов для персонажа, рисовались композиционные эскизы для одной и той же иллюстрации. Ниже представленный выбранный вариант команды для дальнейшей проработки.
Цифровые скетчи с разными стилями персонажей
Теперь стояла задача применить к выбранному композиционному эскизу персонажей и уже отрисовать их в цифровом виде. Для создания эскизов использовалась программа Procreate на iPad.
Все три черновых скетча в цифровом виде
Композиционное решение одинаковое, а вот стилистическое решение персонажей и окружение разное.
Чистовая проработка иллюстраций в трех стилистиках
Теперь была необходимость все три цифровых скетча перевести в чистовой вид векторной 2D-иллюстрации. Цветовая схема нарочно была использована во всех трех иллюстрациях одинаковая. Так как на этом этапе основная задача стояла выбрать итоговую стилистику будущих иллюстраций.
Все три чистовые иллюстрации в разных стилистических решениях
Ниже представлены три чистовые 2D-иллюстрации, а также выдержка нескольких слайдов из презентации концепта разработки стиля иллюстраций.
Создание маленькой иллюстраций
в трех стилистиках
Помимо разработки стиля персонажа и больших сюжетных иллюстраций велась работа над выработкой стиля для небольших информационных иллюстраций-иконок. Подобный вид иллюстраций очень часто встречается в интерфейсе: в различных виджетах, нулевых состояниях, таблицах и т.д.

01 — текстура по очертаниям объектов + графическая текстура;
02 — лаконичный заливочный стиль;
03 — черные динамические линии + графическая текстура, также использующая линии.
Согласованность стилистики
После проработки стилистики маленьких иллюстраций было необходимо показать, как каждый "ход" из маленькой иллюстрации может лечь на персонажа.
Создание первых иллюстраций в выбранной стилистике
После того, как выбрали итоговый стиль для большой сюжетной иллюстрации и для маленькой информационной, была задача оба этих стиля объединить и добиться согласованности.
Разработка элементов для библиотеки
После окончательной выработки стиля иллюстраций началась работа над созданием различных элементов для библиотеки: ракурсы и позы человека, одежда, эмоции, животные, растения и многое другое. Вообще цель этой библиотеки – упростить дизайнерам жизнь и позволить им быстро собирать грамотные иллюстрации для своих нужд на проекте. Данный сет элементов был разработан в Adobe Illustrator. Далее на базе этих элементов была создана библиотека-конструктор в Figma.
Принцип работы с элементами из библиотеки
Ниже можно найти принцип создания персонажа, а также рекомендации по этапам создания иллюстраций из элементов библиотеки. Рекомендованные этапы:
01 ЭТАП
Нарисовать быстрый скетч в карандаше с основной идеей заложив в основу сценарий и композицию.
02 ЭТАП
Доработать карандашный скетч в цифровом виде. Сперва накидываем все имеющиеся элементы из библиотеки. Затем, ищем недостающие референсы-картинки.
03 ЭТАП
Собираем героев из предствленных компонентов библиотеке. Дорисовываем необходимые элементы использую свои находки референсы.
Разработка гайда
Гайд! Конечно, для грамотной работы как иллюстраторов так и дизайнеров был разработан гайд. В нем прописаны все принципы работы с иллюстрацией: от создания бумажного скетча, до работы с композицией, цветовыми палитрами, графической текстуры и многое другое. Сложно при создания данного гайда была в том, что я не смогла найти нечто подобное на рынке, чтобы взять это за основу.
С финальным гайдом можно ознакомиться на uui.epam.com.
Создание серии чистовых иллюстраций
На этом этапе стояла глобальная задача: опробовать созданные элементы библиотеки на практике. Иллюстрации, представленные ниже, собирались из готовых элементов. По необходимости ряд недостающих частей дорисовывались и в дальнейшем эти элементы так же сразу добавлялись в библиотеку.
Спасибо за просмотр!