Иллюстрации

Фото и 3D изображения — основа коммуникационного стиля, а 2D иллюстративный стиль используется только для технических коммуникаций.

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

1. Физичность: Можно иллюстрировать как реальные физические объекты, так и фантазийные элементы интерфейсов в качестве физических объектов.

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

3. Динамика: Также внимание стоит уделять расположению светотени, чтобы подчеркнуть объём изображаемых элементов. Основной ракурс — в повороте для создания ощущения динамики (и выгодной светотени), в композициях также уместно сочетать и прямой ракурс, и ракурс с поворотом.

Формы. Общее

• Для определения толщины контура иллюстрации необходимо умножить размер большей стороны макета на 0,005.
• До 25% иллюстрации занимают тени: тень от предметов на предметы + затемнение граней объектов.
• Формы имеют и скругления (до 10px), и острые углы (особенно там, где угол является типовым атрибутом изображаемого объекта). Скругления и острые углы должны быть в примерной пропорции  80% к 20% или 90% к 10%.

Композиция. Предметы

• Композиция составляется из 2-4 объектов.
• Объекты располагаются в невесомости и динамике. Композиция строится с глубиной.
• Ракурс вполборота даст пространство для граней, динамики и теней. Однако, также важно добавлять хотя бы один объект в прямом ракурсе — его задача создать контраст в композиции и интересную особенность стиля.

Композиция:

• Композиция составляется из главного героя и 1-2 объектов.
• Здесь также задается сочетание и прямого ракурса, и ракурса в полоборота.
• В отличие от иллюстраций с предметами, в таких иллюстрациях задается горизонтальная поверхность в сцене: в случае общего прямого ракурса по вертикальной оси плоскость может обозначаться линией, в случае ракурса чуть сверху — на плоскость отбрасывается тень.

При разработке выражения морды и позы важно соблюдать баланс милой непоседливости и нейтрального тона.

В брендовой коммуникации может быть 
до 3-4 героев-животных с реальным чёрно-белым окрасом (за исключением животных, отсылающих к брендам конкурентов).

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

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

Композиция

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

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

Выражение лица персонажа должно передавать спокойствие и дружелюбие.

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

В закрытом состоянии рот упрощается до одной линии.

Композиция

• Предмет иллюстрации по большей части монохромный. Без учёта цвета фона иллюстративная композиция может содержать 1-3 цветных элемента. Подробнее о пропорции акцентного цвета на предмете иллюстарации —  в конце раздела.

Светлый фон

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

Цветной фон

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

Темный фон

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

Пропорции цвета

Правее приведены варианты пропорции присутствия акцентного цвета в иллюстрации. Данная пропорция относится к самим объектам/сюжету и не учитывает фон.

Только для предметов уместно увеличение доли акцентного цвета до 50%: в случае, если сам по себе предмет крупный.

В случае с персонажами на иллюстрации будет преобладать чёрно-белое сочетание цветов.