6 неочевидных причин добавить иллюстрации на сайт ecommerce

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

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

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

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

А теперь на несколько секунд закройте глаза и представьте сайт отделочных материалов. Что пришло в голову? Если плитка и банки с краской, все нормально. Но из любого скучного правила должны быть исключения, в нашем случае — Stendeco. Компания продает отделочные материалы для интерьеров, фасадов и офисов. Все три направления их работы проиллюстрированы на главной. В обычном состоянии картинки затемнены, но при наведении каждая выходит на первый план и подсвечивается.

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

Навигация в приложении «Азбуки Вкуса»

С иконками все понятно, но есть и более интересные идеи навигации, в которых задействованы иллюстрации. Один такой пример вы уже видели — главная страница Stendeco, которая отправляет посетителей сразу в нужный раздел каталога. А вот другой — интернет-магазин деревянных игрушек «КОТОК» с анимированными 2D-иллюстрациями.

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

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

В барбершопе Pomades занимаются «мужским грумингом» и продают для него товары. Это не мы придумали: термин есть на сайте компании, который оформлен в стиле комиксов 50-х. Тот же принцип — другая подача. Если у Mandarini все про легкость и влюбленность, то Pomades сочетает историческую составляющую и по-мужицки уверенный дизайн. Настолько, что стильные-модные фото товаров кажутся здесь чем-то инородным.

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

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

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

А вот арт-проект «Мы верим в космос», который не имеет к ecommerce решительно никакого отношения, но мы обязаны его показать. Пользователи сами управляют персонажем, который бежит по таймлайну истории космоса. Можно остановиться, чтобы прочесть о событии — и, конечно, рассмотреть иллюстрации. Где использовать подобную механику на сайте интернет-магазина? Первое, что приходит в голову — история компании. Не обязательно интерактивная, достаточно вертикального или горизонтального скролла.

Сайты многих компаний выполняют в том числе HR-функцию. Уже знакомое вам издательство «Кит» постоянно ищет авторов и иллюстраторов: для этого у них есть страничка с формой обратной связи и симпатичной иллюстрацией читающего человека — вероятно, автора или иллюстратора.

Более известное издательство «МИФ» тоже хантит людей через сайт. В отличие от коллег из «Кита» компания не использует иллюстрации на главной, зато на HR-страничке они выполняют сразу две роли: разбавляют текст веселым мини-комиксом в тему и показывает пошаговый процесс «Как попасть в МИФ».

У студии Zefir Games для поиска кадров есть отдельный сайт, где можно подсмотреть несколько идей. Его особенность в том, что вся концепция построена на названии и позиционировании компании. Так, Zefir — это не про зефир, а про созвучное the fir — ель. Вот сибирская студия разработки игр и использовала на сайте героев-зверей из сибирского леса, выделившись таким образом на фоне конкурентов, которые в качестве визуала выбрали персонажей из гиперказуалок.

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

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

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

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

В блоге есть несколько форматов статей, а у каждого из них — свои форматы обложек и картинок. Покажем несколько.

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

Каждый хотя бы раз смотрел лендинг курса Skillbox. Но если курсы более или менее стандартизированы, то страницы вебинаров представляют собой образцово-показательные промо — каждая страница с уникальными иллюстрациями в стиле бренда (и побольше размером).

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

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

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

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

Тренд. Каждый год ряд известных медиа в области дизайна публикуют свои прогнозы на следующий — и каждый год иллюстрации оказываются одним из пунктов. Меняются только детали: то они более объемные, то менее, с градиентами и без, черно-белые или кричащие кислотные. В этом году тоже были: черно-белые, 2D и 3D.

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

Нет готового рецепта того, как правильно использовать иллюстрации в ecommerce. Мы нашли примеры, которые, надеемся, вдохновят кого-то хотя бы думать в сторону использования авторских изображений на сайте. Потому что они могут сделать лучше что угодно — вы же видели. Если решитесь попробовать, помните, что иллюстрации должны: а) быть в гармонии с брендом; б) выполнять ту задачу, для которой вы их туда помещаете. Ну, выражать сложные эмоции, демонстрировать что-то конкретное или расставлять акценты. Тогда будет вам более глубокая связь между брендом и аудиторией и счастье.