Как использовать иллюстрации в веб-дизайне? Более 20 примеров

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

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

Но как решить, какой визуал лучше всего подходит бренду — фото и видео или иллюстрации? 

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

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

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

1. Передайте тон и стиль

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

С помощью иллюстраций вы можете более открыто, чем с помощью реальных изображений (иногда гипертрофированно), выразить свой стиль и тон. Возьмем, к примеру, главную страницу Sour Patch Kids: 

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

Иллюстрации помещают детей в различные сценарии — катание на велосипеде, попадание стрелы Купидона и выскакивают из-за каждого угла. Это демонстрирует игривую, озорную сторону бренда. 

Тот или иной тип иллюстраций может добавить в интерфейс дополнительный контекст или представить отдельные компоненты вашего сайта в более правильном свете. Однако иллюстрации далеко не всегда легкомысленны — они также могут придать дизайну загадочность и глубину.

2. Выделяйтесь с помощью уникальных творений

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

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

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

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

3. Добавьте в интерфейс узнаваемый маскот бренда

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

Есть несколько способов применить маскот на сайте. Один из них — создать карикатурное изображение (как у Sour Patch Kids), которое будет следовать за посетителем во время его путешествия по сайту. Другое решение — взять графический знак из логотипа — или его вариацию — и использовать в дизайне, на фотографиях и страницах как водяной знак.

Последнее можно увидеть на сайте Olive Garden: 

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

• На иконке сумки над надписью "Кейтеринг"
• На карточке над надписью "Подарочные карты"
• В качестве текстурированного фона в футере

Она также используется в плейсхолдерах, когда изображения не полностью загружены в меню сайта:

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

4. Создавайте цифровые миры, которые ваши посетители никогда не видели раньше

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

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

Главная страница сайта Yoast отлично поддерживает баланс между этими двумя идеями:

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

5. Оживите сложные концепции или длинные истории

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

Один из способов применения иллюстраций — объясняющая анимация или видеоролики. Как, например, этот на главной странице Relish: 

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

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

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

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

Шаг 1: Понять зачем

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

Шаг 2: Найти свой стиль

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

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

Шаг 3: Определить, какая часть сайта будет заполнена иллюстрациями

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

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

Шаг 4: Собрать свой набор инструментов для работы с иллюстрациями

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

Например, вы можете создавать иллюстрации с помощью таких программ, как Adobe Illustrator: 

У вас также есть возможность скачать стоковые векторные изображения на специальном сайте, например, Shutterstock: 

16 отличных примеров иллюстраций для сайтов

Далее мы рассмотрим 16 примеров иллюстраций для сайтов (в дополнение к пяти рассмотренным ранее). Мы разбили их на четыре типа, чтобы помочь вам найти вдохновляющие изображения в конкретном стиле: 

1. Плоские иллюстрации

Плоский дизайн — это полностью двумерные интерфейсы.

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

Давайте рассмотрим несколько примеров: 

1. The New Yorker

Первая иллюстрация из журнала The New Yorker: 

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

2. Copper

Еще один отличный пример того, как бренд может использовать иллюстрации, — это Copper. Каждый пост в CRM-блоге сопровождается уникальными изображениями:

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

3. Goddard School

Если вы хотите использовать иллюстрацию в качестве фона, обратите внимание на сайт Goddard Family of Schools — хороший пример того, как сделать это правильно:

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

4. CrowdHealth

CrowdHealth — еще один бренд, который использует плоскую графику эффективно: 

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

2. Полуплоские и трехмерные иллюстрации

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

В последние годы для решения этой проблемы был создан плоский дизайн 2.0. Его нельзя назвать по-настоящему трехмерным. Это скорее “полуплоский” дизайн: большая часть интерфейса остается плоской, однако ключевые элементы будто выступают из него. Такой эффект достигается за счет теней, бликов, градиентов и других текстур.

Эти “неплоские” техники можно использовать и в иллюстрациях. Вот несколько примеров: 

5. Chuck E. Cheese

На сайте Chuck E. Cheese нас встречает сочетание плоских и 3D-иллюстраций. Фон и декоративные элементы плоские, а мышь, маскот бренда, — трехмерная:

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

6. 23 and Me

23 and Me использует иллюстрации, чтобы продемонстрировать особенности и функционал своего программного обеспечения: 

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

7. Compose.ly

Compose.ly — еще одна компания, которая использует иллюстрации, чтобы визуально представить преимущества своего цифрового продукта:

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

8. Barkbox

Сайт Barkbox — хороший пример ненавязчивого полуплоского дизайна: 

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

3. Интерактивные иллюстрации

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

Это позволит вам создать множество вещей:

• интерактивный первый экран
• Lottie-анимации
• полноценные обучающие видеоролики и т.д.

Мы уже видели примеры интерактивных иллюстраций. Давайте рассмотрим еще несколько: 

9. Updata One

Updata One — сообщество бизнес-аналитиков. Как говорится на главной странице: "Мы придаем информации смысл". Это не самая простая идея, которую можно передать с помощью фотографий или видео — по крайней мере, визуально интересным способом. 

Вот почему эти абстрактные анимированные иллюстрации работают так хорошо: 

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

10. BetterUp

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

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

11. Recurrency

Recurrency — хороший пример того, как можно отказаться от видеообъяснения и вместо этого более кратко описать вашу деятельность: 

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

12. Цифровое агентство MeanPug

Последний пример интерактивной иллюстрации, на который нам стоит обратить внимание, представлен на сайте цифрового агентства MeanPug:

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

4. Иллюстрации, нарисованные от руки

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

13. Marlow

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

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

14. Misfits Market

Misfits Market — еще одна компания, чьи иллюстрации на первый взгляд могут показаться бессмысленными, но на самом деле многое говорят посетителям о бренде: 

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

15. Airbnb

Большинство людей знакомы с Airbnb. Компания помогает арендовать жилье и бронировать “впечатления”, поэтому сайт наполнен фотографиями. Однако на главной странице есть раздел "Вдохновение для вашего следующего путешествия", который выбивается из общего ряда (прим. — недавно Airbnb провел редизайн, теперь все по-другому):

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

16. Cleo

Сайт приложения для управления финансами Cleo выглядит так, как будто вы просматриваете причудливый мультфильм из 90-х: 

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

Сделайте свой сайт заметным с помощью иллюстраций

Когда вы разрабатываете брендинг или сайт для нового клиента, один из первых вопросов, на который нужно ответить, — какую графику вы будете использовать? Фотографии и другие реалистичные изображения? Или иллюстрации?

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

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