Как мы разрабатывали стиль корпоративной иллюстрации «Лаборатории Касперского»

Опыт студии «Мыслеформа».

Перед нами стояла задача — разработать стиль корпоративной иллюстрации для «Лаборатории Касперского». Работы велись в сотрудничестве с отделом дизайна компании. Как мы это сделали? О, это долгая и интересная история. Начну с сухих фактов.

«Лаборатория Касперского» — международная компания, специализирующаяся на разработке систем защиты от компьютерных вирусов, спама, хакерских атак и прочих киберугроз. Компания ведёт свою деятельность более чем в 200 странах.

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

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

Работа над поиском стиля велась совместно с дизайн-командой «Лаборатории Касперского», комментариями от которой делится Никита Морозов:

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

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

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

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

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

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

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

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

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

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

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

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

В конечном итоге были согласованы следующие стилеобразующие элементы.

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

Для руководства по стилю была определена основная цветовая палитра и прописано соотношение цветов в иллюстрации. У бренда есть наиболее узнаваемые цвета — оттенки зелёного и красный. Слишком активный красный был заменён на более нейтральный розовато-морковный тон. Также были продуманы комбинации полутонов для создания эффекта объёма, характерного для стилистики Flat.

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

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

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

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

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

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

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

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

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

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

Результатом проекта стало свёрстанное 40-страничное руководство, где детально описаны элементы стиля, законы, по которым они строятся и применяются, внутренняя логика их использования.

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

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

Посадочная страница, выполненная с использованием иллюстраций.

«Лаборатория Касперского»:

Студия «Мыслеформа»:

#дизайн