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

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

Для чего нужны иллюстрации?

Выделим три основные функции:

• для придания сайту индивидуальности. Мы уже писали об основных трендах веб-дизайна 2018-2019 года - там полный список того, что делает сайт модным и современным. Но если присмотреться - везде будет одно и то же в разных вариациях. Контрасты, градиенты, крупные шрифты, стильные картинки - все это здорово, но одинаково. Не говоря уже о сайтах, сделанных на конструкторе или шаблоне - там, увы, индивидуальностью и не пахнет. Иллюстрации, особенно нарисованные вручную, сделают ваш сайт неповторимым. К тому же они будут крафтовыми (изготовленными вручную) - а это сейчас в моде. Пользователи сразу поймут, что над сайтом работали реальные люди, вкладывали в него душу, старались;
• для повышения узнаваемости бренда. Мы уже рассказывали про фирменный стиль - иллюстрации тоже входят в его составляющую наряду с корпоративными цветами, шрифтами, логотипом. Чаще всего картинка - это какой-то персонаж компании (его еще называют маскотом) или символ. Но даже если фирменный стиль еще не разработан, в качестве иллюстраций можно выбрать абсолютно любую графику или анимацию. Если одна и та же иллюстрация или ее варианты кочует с сайта в соцсети, из соцсетей - на визитки, рано или поздно ее начнут ассоциировать с вашим брендом. Можно создавать серии иллюстраций, чтобы не повторяться и не приесться клиентам;
• для того, чтобы проиллюстрировать деятельность компании. Логично, что если компания занимается разработкой сайтов, наиболее подходящими по смыслу будут изображения компьютеров, бородатых программистов и так далее. А если продает женскую одежду - посетителям понравятся рисованные модные девушки;
• для привлечения внимания. Иллюстрация может даже не подходить по смыслу, но быть выполненной с таким чувством стиля, что украсит любой ресурс. И уж точно привлечет внимание посетителей! Кстати, такой вид иллюстраций - просто красивые - часто используются в блогах, личных онлайн-дневниках.

Виды иллюстраций

Оформление меню

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

Рассказ о деятельности компании

Можно написать словами, чем занимается бренд, а можно все то же самое нарисовать. Вот как сделала компания Pieoneers Software Inc:

Кстати, и другие иллюстрированные элементы сайта тоже оформлены в этом же стиле.

Руководство для пользователей

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

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

Рассказ о создателе сайта или команде

Очень жаль, что многие сайты и интернет-магазины молчат, как партизаны, о своей команде. В разделе “О нас” - краткое описание истории и деятельности компании - ни слова о том, какие классные специалисты там работают. А где их имена, где фото? Это делают единицы, меж тем такая личная информация повышает степень доверия к фирме и увеличивает тем самым прибыль. Так вот, об иллюстрациях. Можно сделать рисованные портреты сотрудников, дружеские шаржи и разместить их на сайте. Это еще круче, чем фото!

Если сайт не копоративный, а личный - тем более нужно познакомиться с посетителем. Фотография или рисунок подходит для этого как нельзя кстати. Вот, например, наш коллега - лондонский парень занимается веб-дизайном сайтов и мобильных приложений. Сайт начинается с приветствия (да он и назван Hey Indy - то есть продвижение личного бренда в действии) и рассказа о себе. А вот и сам автор - точнее, его рисованная копия. И все его клиенты.

История, кейс

“Однажды мы с друзьями решили создать интернет-магазин…” - если ваша история начиналась так (или любым другим способом) - расскажите о ней! Если вы придумали вымышленную историю, связанную с вашим товаром, тоже не молчите! Обычно истории рассказывают в виде комиксов - компании не жалеют денег и рассказывают обо всем на свете. Маркетологи давно просекли фишку и рекламируют с помощью комиксов любые товары. Например, жвачку:

Смешные картинки

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

Продающие иллюстрации

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

Больше, больше примеров!

Рекламное агентство Srburns

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

“Евросеть”

Этого желтого терьера знают все: именно он стал символом “Евросети” в 2011 году. До этого компания не имела собственного персонажа - только корпоративные цвета: желтый и синий. В 2011 году началась кампания по ребрендингу, которую вело английское агентство Wolff Olins. Фирменный стиль поменялся полностью, и самым главным отличием “Евросети” стал желтый пес - альтер эго “Евросети”. По словам руководства “Евросети”, он олицетворяет верного друга и персонального помощника для пользователей. А еще собакен игривый, любознательный и очень любит всех покупателей “Евросети”. Не правда ли, отличный образ?

Вот уже 7 лет желтый терьер сопровождает “Евросеть” во всех ее проявлениях. Кстати, у него и имя есть - Гаджет. Говорят, что в конце этого года бренд перестает существовать - но возможно, Гаджет еще напомнит о себе. Жаль терять такого удачного персонажа!

Магазин детских товаров “Насяня”

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

Сайт художника Бэнкси

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

Сайт художника Блу

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

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

TASK4U

Отечественная компания, специализирующаяся на оказании услуг. Здесь можно заказать доставку еды, уборку офиса и других помещений, услуги дизайнеров, помощь юриста и другие вещи. На главной странице сайта мы видим меняющиеся картинки: человечка, который хватается в раздумьях за голову, не зная, где получить услугу, а следом - уже двух человечков, пожимающих друг другу руки: похоже, они договорились. Вроде бы просто и незатейливо, но внимание привлекает и в память врезается. А значит, работает!

Блог немецкого парня

Германец Тил, молодой парень 24 лет, ведет блог. Ну ведет и ведет, скажете вы, ничего особенного. Вот только он отличается удивительными картинками - которые изображают самого Тила. Вот такой он - задумчивый, чуть меланхоличный, мечтательный… Записи блога только подчеркивают эти черты характера, образуя вместе с картинками одно целое. Однозначно хороший пример!

Coca-Cola

Это не официальный сайт “Кока-Колы” - один из ее интернет-проектов. На первый взгляд иллюстрации совсем простые, но если присмотреться, становится понятно: все они выдержаны в корпоративных цветах; сразу дают понять тематику - кулинарное направление, а шрифты напоминают о старинных сказках, пряничных домиках и прочих чудесах. Сразу создается определенное “теплое ламповое” настроение!

Atelier Anonyme Design

Абсолютная индивидуальность - такого вы точно нигде не видели. “Анонимные дизайнеры” позиционируют себя как “анонов” - неизвестных и не самых доброжелательных личностей. Похоже на демаркетинг - сознательное отторжение нежелательной части целевой аудитории (по разным причинам). Так оно и есть - анонимные дизайнеры не работают с каждым клиентом, отсеивают тех, кто им не нравится. Остаются те, кому нравится такой подход.

Сайт Design Zillas

Еще один пример яркой индивидуальности. Это уже не просто картинка монстрика, как в первом примере. Это целая философия. “Мы - самое свирепое digital-агентство Орландо. Мы боремся изо всех сил, чтобы получить чудовищные результаты для наших клиентов, - сообщают создатели рекламного агентства в разделе “О нас”. - Наша команда цифровых вдохновителей неустанно работает над созданием свирепых решений для вашего бренда в интернете. Наше цифровое племя дино-клещей готово работать с вами и погрузить наши зубы в веб-маркетинговую стратегию, которая вращается вокруг одной цели: максимизации ROI вашего бренда”. Сильно, ничего не скажешь!

Сайт Ben the Bodyguard

Программа, которая защищает пароли, контакты, текст, напоминания и фотографии на iPhone и iPod touch, имеет полностью анимированный сайт. Двигая мышкой вниз, можно прогуляться по рисованному городу и встретить на пути некоторых темных личностей. Нетрудно догадаться, что это опасности, которые подстерегают владельцев айфонов. Конечно же, на помощь спешит Бен-телохранитель: именно его вы видите на заставке сайта. Получился яркий образ, который сразу дает понять, чем тут занимаются.

Egopop

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

Где взять иллюстрации для сайта?

1. Привлечь знакомых художников. Наверняка в вашем окружении есть пара-тройка человек, которые отлично рисуют. Попросите их помочь и обязательно укажите авторство.
2. Заказать у фрилансера. В сети найдутся тысячи иллюстраторов - как талантливых, так и не очень. Посмотрите портфолио и выберите того, чьи работы вам созвучны по духу или отражают тематику вашего сайта.
3. Обратитесь в студию веб-дизайна. Как правило, студии и агентства сотрудничают с иллюстраторами и привлекают их к работе, когда возникнет такая необходимость. Важно! Иллюстратор от студии будет работать в связке с другими специалистами студии (веб-дизайнером, программистом), в результате чего иллюстрации впишутся на сайт как родные.

И, конечно, ни в коем случае не пользуйтесь чужими работами и не берите стандартные картинки из стоков и фотобанков. Если уж украшать сайт - то выбирать действительно уникальные авторские картинки. Удачи в продвижении!