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

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

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

Клиент

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

Задача

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

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

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

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

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

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

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

Графическое исследование

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

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

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

Разработка персонажа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перспектива

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

Цветовая гамма

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

Сюжетные иллюстрации

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

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

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

Цветной фон

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

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

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

Анимация

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

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

Дополнительные элементы

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

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

Мини-иллюстрации

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

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

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

Иконки особенностей продукта

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

Толщина контура

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

Инфографика

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

Результат

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

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

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

Применение стиля

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

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

В этой видеоинструкции показано, как в продукте применяются мини-иллюстрации

Команда проекта

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

  • креативный директор Никита Морозов,
  • отдел дизайна «Лаборатории Касперского»,
  • отдел проектирования пользовательских интерфейсов.

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

  • арт-директор и дизайнер Илья Калимулин,
  • иллюстраторы Олег Береснев и Дмитрий Штольц,
  • аниматор Олег Береснев.
0
27 комментариев
Написать комментарий...
Дмитрий Смола

Шаттерсточно

Ответить
Развернуть ветку
Илья Калимулин
Автор

Ваша ассоциация понятна и вполне уместна по двум причинам
1) Олег Береснев- иллюстратор, который участвовал в проекте, является топовым иллюстратором на шаттере. Одним из первых, кто начал популяризировать стилистику флэт.
shutterstock.com/image/contributor/2052989
2) Это стиль флэт, который популярен и востребован в настоящее время, поэтому в фотобанках он так же популярен, ведь там авторы рисуют то, что востребовано.

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

Как иллюстраторское агентство мы не специализируемся только на стилистике флэт. Это не первый наш проект с Kaspersky Lab и когда им требуется стимпанк- мы рисуем стимпанк:
https://www.behance.net/gallery/47949637/Playing-cards-for-Kaspersky-Lab
Когда требуется пиксельная графика- рисуем её:
https://www.behance.net/gallery/51753995/Sweater-design-for-Kaspersky-lab
Когда нужна изометрия, делаем изометрию:
https://www.behance.net/gallery/34622777/Kaspersky-lab-calendar-2016

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

Ответить
Развернуть ветку
Мурад Магеррамов

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

Ответить
Развернуть ветку
Nikita

Зачем вы ставите пробел перед знаком препинания, а после нет?

Ответить
Развернуть ветку
Мурад Магеррамов

Не знаю ,просто привычка )

Ответить
Развернуть ветку
Никита Хэзэковъ

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Илья Калимулин
Автор

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

Ответить
Развернуть ветку
Kirill Dranovsky

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

Ответить
Развернуть ветку
Saucedo Puetz

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

Ответить
Развернуть ветку
Илья Калимулин
Автор

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

В настоящее время флэт претерпевает изменения. Появляется больше плавности в линиях, природных мотивов, текстур.
Как пример: https://dribbble.com/Fireart-d

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

Ответить
Развернуть ветку
Saucedo Puetz

Вы поймите, то что быстро и дешево всегда будет популярно так как это быстро и дешево. Но это не значит что нужно питатся бомж-пакетами потому что это быстро и дешево. Вот вам пример-все крупные зарубежные компании типа Facebook, google, youtube отлично обходятся без каких-либл картинок. Вы то что за VK ударились?

Ответить
Развернуть ветку
Кирилл Стенцов

Вы - как арт-директор - воспринимаете.
Вопрос первый - для кого вообще это все отрисовывалось? (нос, глаза, геометричность, фронт/бэк предметика, плейсмент и прочие детали).

Ответить
Развернуть ветку
Илья Калимулин
Автор

Ответ первый- у нас две принимающих стороны- заказчик и конечный потребитель.
Заказчик доволен и всё согласовал. Для конечного потребителя с помощью А\Б тестирования методом проб и ошибок был найден оптимальный и понятный графический язык.
Вопрос второй?

Ответить
Развернуть ветку
Sam Beckett

Столько работы для того чтобы получить шаблонные "инфографичные" иллюстрации, которые где только не встречаются? По-вашему это фирменный стиль компании?

Ответить
Развернуть ветку
Илья Калимулин
Автор

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

Ответить
Развернуть ветку
Sam Beckett

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

Ответить
Развернуть ветку
Кирилл Стенцов

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

Ответить
Развернуть ветку
Sam Beckett

Так о том и речь, что вся эта свора дизайнеров проделала огромную лишнюю работу :)

Ответить
Развернуть ветку
Илья Калимулин
Автор

Давайте проведем эксперимент, попробуем "дернуть" картинку со стоков по запросу "man computer flat". Как видите, найденные картинки отличаются друг от друга по массе параметров: ракурс камеры, детализация, композиция, графика. Так же отличаются персонажи: по пластике, по чертам лица, по детализации, по пропорциям. У Касперского есть более двухсот офисов. Допустим у нас есть некий гипотетический дизайнер в офисе в Казани и ему поручили задание нарисовать иллюстрацию информирующую об акции, победитель которой поедет на Бали. И вот ему надо найти парня за компьютером и посадить его на пляж с пальмами. Какую картинку с парнем за компом ему брать? Как помните, результатом нашей работы стало руководство, в котором прописан ракурс, детализация, положение камеры, толщина контура, цветовая гамма и т.д. Соответственно персонажа и стол с компом дизайнер берет в библиотеке гайдлайна, пальмы находит на стоках и адаптирует под согласованный стиль для объектов на заднем плане. Готово. В конечном итоге дизайнер из Казани не дергает арт-дира из Москвы с уточняющими вопросами какую картинку со стоков брать и как обрабатывать и это масштабируется на все офисы и всех дизайнеров компании. Ну и дизайнеры во всех филиалах бренда работают в единой стилистической канве. В результате компания экономить время своих сотрудников, а значит и деньги, при этом сохраняется единый визуальный язык коммуникаций. Теперь, я надеюсь, можно сделать выводы о том что именно мы разрабатывали и какая от этого польза?

Ответить
Развернуть ветку
Альберт Живулин

ХМ, интересно вы теперь всем "критикам" будете отвечать?) Работа хорошая, бизнес-идею доносит… показали, рассказали, всем отвечать глупо - как по мне, особенно на вопросы касающиеся "вкусовщины". На такие вопросы должны отвечать соответствующие учебные заведения))

Ответить
Развернуть ветку
Илья Калимулин
Автор

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

Ответить
Развернуть ветку
Savelyev Ilya

Спасибо за статью, видно что много сил и времени вложено в работу над проектом. Получилось круто. А по поводу шаттерсточно - действительно что то в этом есть)

Кстати дедка не с Гарольда рисовали, уж очень похож ))

Ответить
Развернуть ветку
Руслан Киямов

Материал классный, статья интересная, работа проделала серьезная. Спасибо!

Но результат моему глазу не приятен; не по душе. На вкус и цвет все фломастеры...

Ответить
Развернуть ветку
Denis Zolotarev

Если посмотреть на то, как с иллюстрацией сейчас работают крупные it-бренды — это всегда поиск собственного стиля. Точно так же, как какое-то время назад стало дурным тоном использовать в маркетинге фотографии из фотобанков (когда речь не идет о каких-то чисто технических или разовых вещах, конечно) и фотографии, ВЫГЛЯДЯЩИЕ как фотографии из фотобанков (дженерик), точно так же это сейчас начинает приходить в иллюстрацию. Индивидуальность важнее модульности и технологичности решения, тем более что сложно себе представить ситуацию, где компании потребуется все время генерить десятки иллюстраций. Если же компания считает, что такая потребность у нее есть, то тут явно что-то не так на уровне арт-директоринга / маркетинга уже в самой компании.

Ответить
Развернуть ветку
Антон Дементьев

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Николасимус Интеллектус

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

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

На самом деле, есть ещё ощущение, что со стороны Касперского просто побоялись выбрать что-то неординарное. В промежуточных вариантах вполне были направления, которые стоило бы развить.

Ответить
Развернуть ветку
Николасимус Интеллектус

Ах да, просто не могу смолчать :) У девушек на юбках, чаще всего нет таких же карманов, как у парней на джинсах. И сама девушка выглядит не современно.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
24 комментария
Раскрывать всегда