Обзор 10 современных стилей продуктовых иллюстраций

Продукты рассказывают клиентам историю, а иллюстрации делают эти истории чувственно богаче.
Иллюстрация Diana Stoyanova: https://dribbble.com/shots/5334548-Design-Systems

Вы читаете перевод статьи “10 Unique Illustrations Styles”. Над переводом работали: Ольга Жолудова, Настя Никсен и Настя Свеженцева.

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

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

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

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

1. Slack

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

Slack (2017). Image: Alice Lee

И главное, команда Slack продолжает экспериментировать и развивать начатое.

Slack (2019). Image: Sergio Membrillas

2. Dropbox

Dropbox появился в 2007 году и сразу из коробки с иллюстрациями в интерфейсе. С помощью иллюстраций ребята в Dropbox оживляют продукт. Делают его современным и свежим.

Dropbox illustrations (2017)

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

Вот здесь вы можете почитать о культуре дизайна в Dropbox: https://dropbox.design/

3. Oscar

Oscar Health — помощник, который помогает получить максимум от свой медицинской страховки. Эту коммуникацию они и вложили в иллюстрации.

Oscar Heath (2018)

Oscar запилили дизайн иллюстрации как на макро-, так и на микроуровне. Например, иконки, для разных страниц сделали на основе того же стиля иллюстрации.

Oscar Heath (2018)

4. Etsy

Etsy – это e-commerce платформа для дистрибуции авторских товаров. В коммуникации у них смелые иллюстрации с забавными персонажами. Хоть иллюстрации у них и не являются основным элементом дизайна, они все равно создают незабываемые впечатления для посетителей сайта.

Etsy (2019)
Etsy (2019)

5. Notion

Notion – это инструмент, который собирает управление вашими повседневными делами в одно приложение. На главной странице они так и говорят: «С Notion Вы получаете одну точку для прокачки всех дел». Собственно с помощью иллюстраций это многократно подчеркивается. Иллюстрации Notion сообщают, что это не просто инструмент, это живое рабочее пространство, объединяющее команды и идеи.

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

Notion (2019)
Notion (2019)

6. MailChimp

Mailchimp – из почтового сервиса вырос в платформу для автоматизации digital-маркетинга. Персонаж MailChimp – одна из самых узнаваемых иллюстраций в индустрии продуктового дизайна. Каждый из нас хотя бы раз видел этого дружелюбного шимпанзе в деле.

Mailchimp (2001)
MailChimp (2008)
MailChimp (2013)

В 2018 году их команда провела редизайн. Ребята представили новый стиль иллюстраций – плоские иллюстрации.

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

MailChimp каждой иллюстрацией теперь намекает: «Уберите всю возню. Попробуйте Mailchimp в работе».

7. Digital Ocean

Digital Ocean провайдер облаков. В их иллюстрациях вы найдете микс двух техник рисования. К примеру, для домашней страницы они используют 3D иллюстрации.

Digital Ocean (2019)

А для блога Digital Ocean использует плоские иллюстрации с яркими цветами. Такие иллюстрации вызывают визуальный интерес и заставляют людей побольше и подольше читать.

Digital Ocean (2019)

8. Shopify

Shopify – это платформа e-commerce для интернет-магазинов и розничных торговых точек. Shopify с помощью образов выстраивает эмоциональные отношения, а не просто деловые.

Shopify (2019)

Meg Robichaud в блоге делится множеством подробностей, как им удалось добиться этого результата (посмотрите ее блог на Medium).

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

9. Intercom

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

Intercom (2017)

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

Intercom (2018)
Intercom (2018)

10. Duolingo

Duolingo – это платформа для изучения иностранных языков. Duo — главный герой сервиса (дружелюбная сова) направляет и мотивирует пользователей, когда они выполняют очередное упражнение. Говорят учащиеся невероятно привязывается к этому совенку.

Duolingo (2016)

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

Инструменты для создания иллюстраций

Для постановки задачи на иллюстрацию не помешает собрать референсы. Большущую подборку таких штук можно найти здесь: https://uxpro.cc/toolbox/visual-design/illustrations/

Иллюстрации

Посты в категории Основы дизайна

TOP-10 навыков, чтобы начать работать дизайнером

Ринат Шайхутдинов

9 мая 2019

Посты в категории Основы дизайна

Бесплатный онлайн-курс «Графический дизайн с чего начать – как стать графическим дизайнером»

Анастасия Свеженцева

31 мая 2018

Посты в категории Основы дизайна

Как использовать визуальную иерархию в веб-дизайне

Ольга Жолудова

28 апреля 2018

18 000+ участников – здесь ваши друзья, напарники и новые идеи

Присоединиться

Продуктовые дизайнеры
Продакты
UX/UI-дизайнеры
UX-аналитики
Веб-дизайнеры
Менеджеры проектов
Продуктовые аналитики
Бренд-менеджеры
Digital-стратеги
Арт-директора
Аналитики данных
UX-исследователи
Графические дизайнеры
Веб-разработчики
Дизайнеры интерфейсов