Как мы разрабатывали стиль корпоративной иллюстрации «Лаборатории Касперского»
![](https://cloud.pllsll.ru/1366x/pollskill/storage/fb/04/95/b51131bdc17.jpg)
Перед студией «Мыслеформа» стояла интересная задача - разработать стиль корпоративной иллюстрации для «Лаборатории Касперского», работы велись в сотрудничестве с отделом дизайна компании. Как мы это делали? О, это долгая история. Начну с вводных данных.
Клиент
Лаборатория Касперского — международная компания, специализирующаяся на разработке систем защиты от компьютерных вирусов, спама, хакерских атак и прочих киберугроз. Компания ведёт свою деятельность более чем в 200 странах и территориях мира.![](https://cloud.pllsll.ru/1366x/pollskill/storage/68/03/5f/caa73006e4b.jpg)
Задача
Так как в компании на тот момент не было единого узнаваемого стиля иллюстрации, стояла задача сформировать его и показать на максимальном количестве примеров, как он может развиваться. Требовалась разработка: основного персонажа, дополнительных персонажей и их эмоций, объектов интерьера и экстерьера, инфографики. Также надо было продумать отличительные особенности для корпоративных иллюстраций и прописать правила их использования в отдельном руководстве. Иными словами, надо было нарисовать целый мир, выглядящий определенным образом и живущий по определенным правилам.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/0f/31/84/16c44d02e2e.jpg)
Работа над поиском стиля велась совместно с дизайн-командой «Лаборатории Касперского», комментариями от которой делится Никита Морозов:
Информационные технологии — это довольно абстрактная сфера, которую сложно визуализировать, а безопасность информации — еще более абстрактна в визуальном плане, поэтому нам был необходим инструмент, который помогал бы донести довольно сложный смысл продукта или услуги. При этом так же важно было донести ценности и характер бренда — инновационность, экспертность и человечность.
В дополнение нам нужно было учесть глобальный масштаб коммуникаций — дизайнеры и подрядчики разного уровня по всему миру должны иметь возможность повторить стиль, чтобы их коммуникация была консистентной. Поэтому в требованиях изначально было наличие простых готовых элементов для иллюстраций.
Графическое исследование
Перед стартом работ мы провели графическое исследование. Изучив различные варианты актуальных тенденций в современной иллюстрации, мы выявили основные стилистические направления, подходящие по тематике, в которых можно было начинать работу.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/ed/ef/41/582a2bf8753.jpg)
На основе исследования был выполнен ряд тестовых иллюстраций. На примере одного сюжета демонстрировалось, как будет выглядеть иллюстрация при использовании различных графических приёмов. На данном этапе заказчик остановился на сочетании вариантов 1 и 3, то есть на использовании сплошных заливок с локальным применением текстур и контуров.
Нам очень не хотелось попасться на уловку текущих трендов, и мы искали что-то, что будет выглядеть чисто, аккуратно и актуально в ближайшие 5 лет.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/62/83/d8/1d3d37e795f.jpg)
Разработка персонажа
Параллельно с выбором основных графических приёмов проводились работы по поиску внешнего вида персонажа. На первом этапе был согласован концепт персонажа, приведенный ниже. Это эскиз иллюстрации на тему встроенных в продукты компании, автоматизированных процессов, которые позволяют экономить время пользователя.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/be/d7/6d/bbd6af7209d.jpg)
После этого мы приступили к проработке черт лица персонажа. На основе исследования тенденций в отображении персонажей заказчику были предложены варианты отображения персонажа в различных стилях. На предварительном этапе был согласован стиль с частично острыми углами.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/f7/07/b5/c7e4f384f7e.jpg)
Также проводился поиск пластических форм в фигуре персонажа. Это был достаточно важный этап, так как от этих критериев зависело, как будут выглядеть все остальные персонажи и пластические формы объектов в целом.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/67/a7/4d/08ecb6813e6.jpg)
В результате поиска черт лица, пластик и формы был разработан основной персонаж. По типажу и общему настроению это простой, современный парень, работающий в офисе, раскованный, но умеющий сосредотачиваться в нужный момент, любящий своё дело, энтузиаст с активной жизненной позицией.
Можно сказать, что у персонажа есть сходства с реальными сотрудниками компании, в особенности в плане красных штанов. Мы хотели чтобы персонаж помог нам передать настроение и при необходимости мог быть смешным, обаятельным и привлекательным.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/90/8b/3e/bd7ea928816.jpg)
Так как в «Лаборатории Касперского» представлены продукты для всех возрастов и затрагивающие всех членов семьи, потребовалась разработка внешнего вида людей разных возрастных категорий.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/6b/ac/be/9c3233e5bf4.jpg)
В дальнейшем планировалось анимировать всех персонажей, поэтому мы разработали систему мимики для всех действующих лиц. От самого счастливого состояния до моментов грусти и печали.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/ef/60/db/eef6f0e8676.jpg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/a1/9b/f7/4d860f688ad.jpg)
Также были разработаны мини-изображения, демонстрирующие процесс взаимодействия рук пользователя с различными устройствами. Такие изображения активно используются в различных видео руководствах к продукту.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/00/d0/21/bdaf1fd87e8.jpg)
Параллельно с разработкой персонажа проводились работы по поиску декоративных элементов и характерных объектов, которые будут окружать действующих лиц. Требовалось решить задачи композиции, а также то, как распределить цветовые пятна, на чём сделать акцент, а что увести на второй план. Мы пробовали решения с уходом в бОльшую технологичность или геометрию, перебирали большое количество вариантов и обсуждали тонкие нюансы вплоть до унифицирования толщины линий, пересмотра цветового баланса и т.д.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/42/b9/43/8b4e9bca9e1.jpg)
В конечном итоге были согласованы следующие стилеобразующие элементы:
1. Круг, задающий акцент либо на персонаже, либо на ключевом событии.
2. Пространство границ иллюстрации подчеркивается контурными линиями.
3. Часть объектов помечается сносками, как в энциклопедии или научном издании.
4. Некоторые объекты заднего плана закрашиваются текстурой из косых линий, которыми также помечается пространство пола.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/0a/e8/0f/d4fa435d36a.jpg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/c1/20/56/6192bc45af2.jpg)
Исключительное отличие нашего бренда состоит в нашей экспертности и как фанаты своего дела мы разрабатываем наши продукты без компромиссов в плане безопасности. Поэтому важно было визуально и образно передать нашу любовь к проектированию, планированию, тестированию и всему тому, что окружает работу настоящего эксперта. В результате были выбраны ключевые элементы стиля, которые и делают наши иллюстрации уникальными и именно про нас.
Перспектива
У каждой иллюстрации есть главное послание, которое важно донести. Второстепенные объекты не должны отвлекать от основного сюжета, поэтому при дальнейшей проработке стиля был сформирован принцип того, как объекты отображаются в визуальной перспективе. В какой цветовой гамме отображаются объекты первого, второго и заднего плана.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/c0/f2/a3/3a7183e1a94.jpg)
Цветовая гамма
Для руководства по стилю была определена основная цветовая палитра и прописано соотношение цветов в иллюстрации. У бренда есть наиболее узнаваемые цвета — оттенки зеленого и красный. В данном случае красный, как слишком активный, был заменен на более нейтральный розовато-морковный тон. Также были продуманы комбинации полутонов для создания эффекта объема, характерного для стилистики Flat.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/f7/91/da/c17596f863b.jpg)
Сюжетные иллюстрации
После согласования основных констант стиля можно было переходить к сюжетным иллюстрациям, рекламирующим основные преимущества продуктов компании.
Чтобы покрыть широкий диапазон носителей, где применяются иллюстрации, нам нужны были три типа графики: большая сюжетная иллюстрация, мини-иллюстрация и иконка фичи продукта. Сюжетные иллюстрации — основной формат, поэтому мы решили начать с него.
Очень удачно, что в момент разработки стиля мы смогли «обкатать» какие-то решения на практике — сделать несколько реальных изображений по брифу от бизнес-команд. В результате, кстати, получилась отличная рекламная кампания для малого бизнеса.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/84/ff/4f/105a48786e9.jpg)
Цветной фон
Так как иллюстрации планируется использовать на разных носителях и в разной среде, было необходимо продумать варианты того, как будут видоизменяться стилеобразующие элементы при смене фона, и адаптировать иллюстрации для различных ситуаций. Это может быть использование не постере или билборде в городской среде, у иллюстрации может быть информационный посыл или задача привлечь максимальное внимание за счет яркого фона. В итоге было выбрано четыре основных фона: белый, серый, зеленый и черный.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/3d/88/49/d1e4e0cc13a.jpg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/a2/49/d3/94f0999ee9e.jpg)
Зеленый — основной идентификатор нашего бренда, но кроме этого он помогает иллюстрациям вписаться в реальные форматы рекламы или интерфейса, где уже есть подобные цвета.
Анимация
Была разработана пробная анимация, на которой тестировалось то, как стилистические элементы будут перемещаться в пространстве и взаимодействовать с персонажами и внешней средой.
![](https://m.pllsll.com/pollskill/storage/14/f1/c9/084ad785034.gif)
После этого были проработаны варианты ситуаций с применением иллюстраций на различных носителях и форматах — начиная от городской среды и заканчивая интерактивным пространством.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/10/bf/c7/0e5581552c5.jpg)
Дополнительные элементы
Так как по сути мы разрабатывали своеобразные детали визуального конструктора, из которого в дальнейшем можно будет оперативно собрать иллюстрацию, была создана база готовых элементов интерьера и экстерьера для использования как на первом, так и на заднем плане. В эти работы входили предметы интерьера, экстерьера и транспорт.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/06/1b/b0/bca4b57efb6.jpg)
Такой конструктор помогает нашим дизайнерам и подрядчикам компании быстро собирать необходимые картинки и истории. Это существенно экономит время и деньги, помогая сохранять узнаваемость.
Мини-иллюстрации
Следующим шагом стала проработка продуктовых иллюстраций. Так как продуктов у компании много и каждая мини-иллюстрация должна максимально наглядно объяснять принцип и суть действия пользователя, проводилось большое количество тестов для поиска оптимального внешнего вида пиктограмм.
Отдел проектирования интерфейсов провел несколько качественных тестов использования иллюстраций в продуктах, в результате которых были выявлены проблемы: некоторые изначальные декоративные элементы и цветовая палитра придавали картинкам дополнительный смысл, который шел вразрез с тем, что мы пытались сказать с помощью изображений. После нескольких итераций удалось достигнуть стиля, в котором элементы присутствовать могут, при этом на смысл иллюстрации не влияют. Теперь, благодаря новому стилю иллюстраций, мы однозначно получили единый почерк на всех содержащих их экранах, а там, где нам надо рассказать про какую либо функцию или инструмент, иллюстрация помогает лучше донести смысл.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/43/54/6f/6cdf5c47262.jpg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/10/f1/c9/0752f95f59f.jpg)
Иконки особенностей продукта
Для иллюстрирования отдельных свойств продуктов используются иконки отдельного типа. В основе иллюстрации размещается ромб с углом основания, идентичным шестиугольнику, который применяется в наших иконках. В качестве графических элементов используются мини-символы, связанные с атрибутами конкретной функции.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/03/78/44/539494c5306.jpg)
Толщина контура
Чтобы добиться единообразия в отображении толщины контуров, была разработана система соотношения толщин при масштабировании в сюжетной, мини-иллюстрациях и продуктовых иконках.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/f6/99/ba/690100b96a0.jpg)
Инфографика
На финальном этапе были продуманы варианты того, как будет отображаться статистическая или аналитическая информация. Инфографика выполнялась в соответствии с утвержденной цветовой гаммой и с использованием общих стилистических приёмов.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/a9/c4/12/f997e5faeb7.jpg)
Результат
Результатом проекта стало сверстанное 40-страничное руководство, где детально описаны элементы стиля, законы, по которым они строятся и применяются, внутренняя логика их использования. А также собрана библиотека готовых элементов, которые можно будет использовать в дальнейшей работе, сохраняя единый стиль независимо от иллюстратора, привлеченного к проекту, или удаленности филиала компании. Такой документ позволил кампании в разы сократить время и стоимость разработки иллюстративных материалов на много лет вперед.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/5d/c0/87/a80c6a30931.jpg)
Несмотря на то, что внедрение стиля в рамках большой компании — это дело небыстрое, нам удалось синхронизировать несколько команд и уже в этом году наш стиль иллюстраций используется во многих потребительских продуктах, на сайте, в видео и в других рекламных коммуникациях. На текущий момент в нашей библиотеке насчитывается несколько сотен готовых картинок и их количество быстро растет.
Применение стиля
С примерами того, как стиль используется для решения конкретных задач компании, вы можете ознакомиться, пройдя по следующим ссылкам:
Посадочная страница, выполненная с использованием иллюстраций: https://www.kaspersky.ru/incubator
В этой видеоинструкции показано, как в продукте применяются мини-иллюстрации: https://www.youtube.com/watch?v=HuVhouLkl0Y
Команда проекта
«Лаборатория Касперского»:
креативный директор: Никита Морозов,
отдел дизайна «Лаборатории Касперского»:
Роман Миронов, Евгения Плетнева,
отдел проектирования пользовательских интерфейсов.
Студия «Мыслеформа»:
арт-директор и дизайнер: Илья Калимулин,
иллюстраторы: Олег Береснев, Дмитрий Штольц,
аниматор: Олег Береснев.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/49/de/d1/b29412daef6.jpg)
Студия «Мыслеформа»
Behance Dribbble Instagram