Иллюстрации могут быть классным инструментом, когда нужно передать характер и стиль вашего бренда или сайта. В этой статье мы расскажем, почему и как стоит использовать иллюстрации, и рассмотрим разные стили иллюстраций.
Вы читаете перевод статьи «How To Use Illustration in Web Design & 20+ Great Examples of Illustration Styles». Переводы — это один из моих способов исследовать возможности в творческом мире. Над переводом работали Настя Никсен и Оля Жолудова.
Брендинг — это не образ, который создал какой-то один человек на основании своих вкусов и предпочтений в дизайне. Разработка визуального брендинга подразумевает много исследований и размышлений.
Когда мы разрабатываем визуальный стиль, мы продумываем множество элементов брендинга: логотипы, цветовые схемы, типографику. И, конечно, огромную роль играют изображения — ведь они будут непременной составляющей брендинга везде: на сайте, в рассылках, в блоге и в соц.сетях.
Но как понять, какой тип изображений лучше подойдет бренду: фотографии и видео — или иллюстрации?
В этой статье мы сосредоточимся на иллюстрациях: разберемся, в каком случае иллюстрации будут лучшим вариантом, и рассмотрим преимущества их использования в веб-дизайне. В конце вас ждут примеры использования разных стилей иллюстрации в брендинге.
Содержание:
- Зачем использовать иллюстрации в веб-дизайне?
- Пошаговое руководство как использовать иллюстрации в веб-дизайне
- 15 классных примеров применения иллюстраций в веб-дизайне
Зачем использовать иллюстрации в веб-дизайне?
Иллюстрации часто рассматривают как что-то, чем можно удачно занять пустое пространство на фоне. Однако иллюстрации могут выполнять и гораздо более важные и универсальные задачи в веб-дизайне. Давайте рассмотрим несколько причин, почему из всех типов изображений иллюстрации — самый выигрышный.
Иллюстрации передают характер и стиль
Визуальные элементы в целом многое сообщают пользователям о стиле бренда. Но сколько получится сообщить через статичную фотографию или короткий видеоролик?
В плане передачи характера и стиля бренда иллюстрации дают гораздо больше пространства для маневра, чем реальные фото; в том числе, иллюстрации позволяют многое намеренно преувеличить. Возьмем, к примеру, домашнюю страницу бренда Sour Patch Kids:
Конфетные «малыши» сами по себе выглядят мило и забавно. Но если бы бренд использовал фотографии реальных конфет, им бы не удалось так классно передать свой характер и ключевое сообщение. А через иллюстрации на сайте (и в дерзких маркетинговых кампаниях) это получается.
Иллюстрированные персонажи в этом дизайне разыгрывают для детей разные сценарии: то они ездят на велике, то в них попадает стрела Купидона, то они выглядывают из-за угла. Всё это демонстрирует игривый и хулиганистый образ бренда.
За счет иллюстраций можно создать вокруг бренда дополнительный контекст или выставить определенные элементы сайта в нужном вам свете. Причем иллюстрации совсем не обязательно несут игривый и веселый вайб: с их помощью можно придать дизайну загадочности и глубины.
Иллюстрации делают дизайн уникальным
Даже если вы не намерены отрисовывать собственные иллюстрации с нуля, готовые рисунки уже будут выглядеть более креативно, чем простые фото и видео людей, природы или товаров. Иллюстрации дают дизайнеру большой простор для творчества.
К примеру, плоские, геометричные формы и линии отлично подойдут для компаний в области науки и технологий. В конце концов, логичный и структурный дизайн — это тоже творчество. Зайдите на сайт любого иллюстраторского агентства (например, Inky) и вы увидите там множество самых разнообразных дизайнов на базе иллюстраций:
Иллюстрации — в каком бы стиле они не были выполнены, в каком бы объеме они ни присутствовали в дизайне — добавляют изюминку вашему цифровому продукту. Они также открывают дизайнеру пространство для экспериментов с персонажами, объектами и местами, которых не существует в реальном мире.
Иллюстрации — это способ добавить в интерфейс узнаваемый талисман бренда (brand mascot)
Многие цифровые бренды (и «физические» тоже) используют вместо простого логотипа талисман бренда (brand mascot) — некоего персонажа или символ, который «представляет» бренд в разных маркетинговых каналах и каналах продаж. Формат иллюстраций идеален для создания такого талисмана.
Есть несколько вариантов использования талисмана бренда на сайте. Это может быть персонаж, который будет сопровождать посетителя по всему сайту (как сделали Sour Patch Kids). Или это может быть какой-то символ из логотипа — или по мотивам логотипа — который вы добавите в свои дизайны и фотографии по типу водяной знака.
Второй способ использования талисмана можно наблюдать на сайте Olive Garden:
Ненавязчивый штамп в форме оливковой веточки присутствует в дизайне то тут, то там. На скриншоте выше мы видим три таких знака:
- на бумажном пакете (иллюстрация к пункту Catering)
- на подарочной карте (иллюстрация к пункту Gift Cards)
- и как часть текстуры фона в футере.
Свой талисман «оливковая веточка» ребята также используют как плейсхолдер, если какие-то изображения на сайте не загрузились.
Это отличный пример того, как иллюстрированный «талисман» сопровождает посетителей на протяжении всего их путешествия по сайту: он либо подсвечивает ключевые элементы на странице, либо просто усиливает брендинг.
При помощи иллюстраций можно погрузить посетителей сайта в цифровой мир, в котором они еще не бывали
Возможно ли создать на сайте свою цифровую вселенную посредством одних лишь фотографий? Наверное, возможно, но это будет нелегко. И, возможно, своя вселенная вам и вовсе не нужна, если изображения на вашем сайте служат лишь дополнением контенту.
Но если вы стремитесь рассказать какую-то историю или создать собственный цифровой мир визуальными средствами — тогда иллюстрации вам идеально подойдут. Причем, когда мы говорим «свой цифровой мир», мы не имеет в виду полное погружение в какое-то совершенно новое пространство. При помощи иллюстраций можно создать мир, подобный реальному — только цифровой. Отличный пример такого подхода — домашняя страница Yoast.
Поисковая оптимизация — не самая простая сфера для визуализации. Команда Yoast могла бы использовать в дизайне несколько скриншотов своего плагина для WordPress. Вместо этого они посредством иллюстраций показали, каково это — выигрывать игру под названием SEO.
Иллюстрации помогают оживлять сложные концепции и длинные истории
Иллюстрации особенно ценны в ситуациях, когда нужно объяснить посетителям сайта какую-то сложную концепцию: например, как устроен бренд, какая у бренда история, из каких шагов состоит некий процесс и т.п. Все это можно описать текстом, но пользователям гораздо легче усваивать такую информацию в визуальной форме.
На основе иллюстраций можно создавать пояснительные анимашки или видео. Вот, например, анимационное видео на сайте Relish, которое рассказывает, зачем нужен сервис и как он работает:
При помощи иллюстраций также можно создавать визуализации данных, пошаговые инструкции, временные шкалы и многое другое. Если вы или ваши клиенты никак не можете донести идею/историю посредством текста и фотографий, иллюстрации могут стать вашим спасением!
Как использовать иллюстрации в веб-дизайне: пошаговое руководство
Прежде чем вы начнете добавлять иллюстрации в свой веб-дизайн, нужно сделать несколько подготовительных вещей:
Шаг 1: Понять, почему иллюстрации
Почему именно иллюстрации? Почему не фотографии? Почему не типографика, как основа дизайна? У вас должно быть четкое понимание, что вы не просто пробуете что попало или пытаетесь внедрить новый тренд, а используете иллюстрации по конкретной причине и с конкретными целями. Если все еще не уверены, перечитайте первый раздел.
Шаг 2: Найти свой стиль
Есть много разных типов иллюстраций, которые можно использовать в веб. Выше мы уже рассмотрели несколько примеров, но это лишь верхушка айсберга.
Прежде чем переходить к следующему разделу статьи с примерами применения разных типов иллюстраций, определитесь со стилем и личностью вашего бренда. Вам будет проще выбрать подходящий именно вам стиль, если вы уже будете знать, какой образ и характер вы хотите транслировать.
Шаг 3: Решить, насколько ваш сайт будет наполнен иллюстрациями
Совсем не обязательно заполнять весь сайт картинками: будь то фотографии или иллюстрации. Нужно понять, сколько иллюстраций вам действительно необходимо?
Возможно, вы хотите с головой погрузить пользователя в свой цифровой мир? Тогда большая часть сайта должна быть иллюстрированной. А, возможно, вам достаточно будет нескольких иллюстраций в ключевых местах, чтобы просто направить внимание посетителей сайта.
Шаг 4: Собрать свой набор инструментов для создания иллюстраций
Если вы планируете создавать собственные иллюстрации, вам, скорее всего, придется нанять иллюстратора. Хотя есть множество инструментов, в которых можно создавать иллюстрации для сайта и без помощи специалиста. Начнем с того, что создавать иллюстрации можно в программах вроде Adobe Illustrator:
Кроме того, векторные изображения можно найти на стоках вроде Shutterstock:
Еще один вариант: начать с иллюстрированного шаблона. К примеру, множество таких шаблонов есть в Elementor Kits Library:
Кстати, Elementor позволяет легко интегрировать иллюстрации в ваш веб-дизайн. Плагин Elementor дает доступ к инструментам, которые позволяют:
- мгновенно загрузить на сайт иллюстрированный шаблон
- вставить иллюстрированное видео или графику
- поменять фон раздела на иллюстрацию
- добавить lottie-анимацию
- и многое другое
15 классных примеров применения иллюстраций в веб-дизайне
А теперь давайте рассмотрим 15 примеров использования иллюстраций в веб-дизайне (плюсом к тем пяти, которые мы уже рассмотрели выше). Мы разбили эти 15 примеров на четыре группы — по типам. Так вам будет проще найти вдохновение в рамках конкретного стиля:
Флэт-иллюстрации
Флэт-дизайн — это дизайн интерфейса полностью в 2D-формате.
Флэт-иллюстрации выглядят минималистично и сдержанно, но при этом цепляют взгляд. Это означает, что флэт-иллюстрации станут отличные дополнением к вашему контенту: дополнят его, но не перегрузят. А еще, флэт-иллюстрации создаются в векторном формате, а значит выглядят четко в любом масштабе. Это отличный вариант для адаптивного дизайна.
Итак, к примерам:
1. The New Yorker
Начнем с сайта The New Yorker:
Этот журнал давно славится своими карикатурами и иллюстрациями к статьям. Неудивительно, что у бренда есть свой уникальный талисман по имени Юстас (“Eustace”), который регулярно появляется в цифровых и печатных выпусках журнала.
2. Copper
Еще один отличный пример бренда, который активно использует иллюстрации — это Copper. В блоге этой CRM-ки к каждому посту отрисована уникальная иллюстрация:
Очевидно, что каждая иллюстрация создавалась в рамках гайда по стилю: на большинстве иллюстраций преобладает розовый, и везде изображены одни и те же карикатурные флэт-персонажи.
3. Goddard School
Иллюстрации можно использовать для оформления фона. Вот как это делает бренд The Goddard School:
Иллюстрации выполнены в таком светлом оттенке, что на первый взгляд смотрятся просто как текстура фона. Но если присмотреться, становится очевидно, что все иллюстрашки как-то связаны с детским образованием, что полностью соответствует цели сайта.
Почти-флэт и 3D-иллюстрации
Единственный минус использования флэт-иллюстраций в UI дизайне заключается в том, что пользователям бывает непонятно, какие из иллюстраций — это просто часть фона, а с какими можно взаимодействовать.
В ответ на эту проблему недавно появился «флэт-дизайн 2.0». Этот тренд — не про 3D, а скорее про «почти-флэт» дизайн. Большая часть интерфейса остается во флэт-стилистике, а некоторые элементы выходят в третье измерение. Такой эффект создается за счет использования теней, бликов, градиентов и других текстур.
Все эти техники почти-флэт дизайна можно использовать и в иллюстрациях. Вот несколько примеров:
4. Chuck E. Cheese
На сайте бренда Chuck E. Cheese флэт-иллюстрации «живут» бок о бок с 3D-иллюстрациями. Фон и декоративные элементы на сайте в стиле флэт, а мышка-талисман — трёхмерная:
3D-персонаж смотрится классно, потому что напоминает настоящую мышь. За счет эффекта 3D бренд выглядит выглядит живым и интерактивным, чем если бы талисман-мышь была во флет-стилистике.
5. 23 and Me
Иллюстрации на сайте 23 and Me подсвечивают разные функции этого инструмента:
Контент на экране смартфона — это то, что видят пользователи 23 and Me, когда используют приложение. Однако, дизайнер добавил плоские иллюстрации, которые словно «выпрыгивают» из экрана, делая акцент на самых важных фишках этого сервиса генетического тестирования.
6. Compose.ly
Compose.ly — еще одна компания, которая раскрывает преимущества своего цифрового продукта с помощью иллюстраций:
В этом дизайне эффект пространства создается не за счет движения, а за счет расположения плоскостей под углом 90 градусов друг к другу. В иллюстрациях также активно используются тени, чтобы создать иллюзию света чуть сверху.
7. Barkbox
Barkbox — еще один классный пример ненавязчивого полуплоского дизайна:
Талисман бренда — милая собачка, которая сопровождает клиента от момента входа на сайт и до получения физической коробки раз в месяц — это плоская иллюстрация. Однако под ней всегда изображена заштрихованная поверхность, которая создает эффект трехмерности персонажа.
Интерактивные иллюстрации
Если вы хотите как-то оживить свой сайт, 3D-иллюстрации — это определенно хороший вариант. Но если ваши навыки или бюджет позволяют, вы можете пойти еще дальше и анимировать свои иллюстрации.
С их помощью можно делать много интересных штук, например:
- анимированный первый экран
- оригинальные lottie-анимации
- поясняющие видео
Мы уже рассматривали примеры интерактивных иллюстраций выше. Давайте разберем еще несколько:
8. Updata One
Updata One — это сообщество в области бизнес-аналитики. На их домашней странице написано «We make sense of information» — «Мы проясняем информацию». Эту мысль непросто раскрыть посредством фотографий или видео — чтобы это выглядело еще и интересно.
В данном случае отлично работают абстрактные анимированные иллюстрации:
Иллюстрации — хоть и связаны с контентом, рядом с которым они размещены — еще и служат навигационным элементом, который побуждает посетителя скролить все дальше и дальше.
9. BetterUp
Все больше компаний отказываются от скачиваемых отчетов в PDF-формате в пользу цифровых. А некоторые делают как BetterUp: предоставляют цифровые выжимки из полного отчета:
Бренд на примере собственного лендинга показывает, какие уникальные визуализации данных можно создавать при помощи анимированных иллюстраций.
10. Recurrency
Recurrency — отличный пример того, как можно кратко описать принцип работы сервиса, не прибегая к пояснительным видео:
В первом экране мы сразу видим анимированную иллюстрацию, которая поясняет, как работает процесс дистрибуции на базе ИИ. Иллюстрация выносит за скобки технологию и упрощает все до визуальных образов, чтобы посетителям было понятно.
11. MeanPug Digital Agency
Последний пример интерактивной иллюстрации, который мы рассмотрим — это иллюстрация на сайте цифрового агентства MeanPug:
У первого экрана очень базовый дизайн. Команда агентства решила не тормозить внимание посетителя фотографиями, а сохранить простой и легкий вайб. Несколько lottie-анимаций появляются и пропадают то тут, то там: это забавно и креативно, но без перебора.
Иллюстрации от руки
Если вы иллюстратор или хотите попробовать себя в этом деле, есть масса потенциальных направлений: контурные рисунки, скетчи, карикатуры и т.д. Рассмотрим несколько примеров использования иллюстраций от руки в веб-дизайне:
12. Marlow
Marlow — это производитель подушек. На их сайте, конечно, есть и фотографии реальных подушек, но время от времени встречаются вот такие «сонные» иллюстрации:
На первый взгляд в этой иллюстрации нет никакого глубокого смысла. Но эти скетчи напоминают мем из социальных сетей о разных забавных позах, в которых спят люди. Иллюстрация словно намекает, что подушки бренда Marlow понравятся всем: и тем, кто спит на боку, и тем, кто спит на спине, и тем, кто спит в самых невероятных позах.
13. Misfits Market
Misfits Market — еще один бренд, чьи иллюстрации на первый взгляд не несут никакой смысловой нагрузки, но на самом деле многое рассказывают посетителям о бренде:
Компания Misfits Market продает боксы с продуктами. Фишка бренда в том, что они продают продукты некрасивой формы, которые в магазинах обычно никто не хочет брать. За счет этого бренд предлагает очень низкие цены.
Иллюстрации на сайте такие же неидеальные, как и продукты, которые продает бренд: овощи на них с изъянами, а кружки на фоне — неровных форм. Очень символично!
14. Airbnb
Кто не знает Airbnb? Всем известно, что это сервис по бронированию жилья и впечатлений, и поэтому на их сайте очень много фотографий. Однако один из разделов сайта — «Inspiration for your next trip» — выделяется за счет иллюстраций:
Возможно, дизайнер решил, что в пространстве вдохновения иллюстрации работают лучше, чем фотографии. В этом что-то есть. Эти иллюстрации выглядят куда более идиллично, чем реальность.
15. Cleo
Когда скроллишь сайт денежного приложения Cleo, чувствуешь себя как в психоделическом мультике из 90-х:
Все кажется таким отлетевшим! Но в этом вся фишка бренда. Диалоговый интерфейс сервиса ругается на пользователей, всячески их подкалывает, но и забавно подбадривает. Опыт взаимодействия с приложением, подобным этому, не передать никакими фотографиями и видео.
Сделайте свой сайт классным запоминающимся за счет иллюстраций
Один из первых шагов при разработке брендинга или создании сайта для нового клиента — это всегда подбор визуального стиля. На чем он будет строиться: на фотографиях или на реалистичных картинках? А может на иллюстрациях?
Очень многие современные бренды используют в дизайне фотографии и видео — и именно поэтому иллюстрации в веб-дизайне позволяют выделиться из общей массы. И не только выделиться: иллюстрации — это также эффективный способ сторителлинга и классный инструмент для создания уникальных цифровых миров.
Если вы собираетесь создавать новый сайт или мечтаете обновить существующий, попробуйте подумать в сторону иллюстраций.
