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

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

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

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

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

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

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

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

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

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

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

Pieoneers Software Inc

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

Pieoneers Software Inc

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

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

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

студия веб-дизайна Nybbletech

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

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

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

рассказ о себе и сотрудниках

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

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

комикс жвачки

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

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

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

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

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

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

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

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

“Евросеть”

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

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

евросеть

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

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

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

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

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

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

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

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

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

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

TASK4U

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

TASK4U

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

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

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

Coca-Cola

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

Coca-Cola

Atelier Anonyme Design

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

Atelier Anonyme Design

Сайт Design Zillas

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

Сайт Design Zillas

Сайт Ben the Bodyguard

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

Сайт Ben the Bodyguard

Egopop

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

Egopop

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

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

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