Изображения для сайта. Часть 2: Иллюстрации

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

Векторные иллюстрации как вариант для наполнения сайта

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

Изображения для сайта. Часть 2: Иллюстрации

Когда они могут понадобиться?

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

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

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

Примеры

Выполненные в едином стиле монохромные иллюстрации курсов Яндекс Практикума отражают суть изучаемых навыков. Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fpracticum.yandex.ru%2Fcatalog%2Fprogramming%2F&postId=654303" rel="nofollow noreferrer noopener" target="_blank">https://practicum.yandex.ru/catalog/programming/</a>
Выполненные в едином стиле монохромные иллюстрации курсов Яндекс Практикума отражают суть изучаемых навыков. Источник: https://practicum.yandex.ru/catalog/programming/
Абстрактные иллюстрации на reg.ru схематично показывают, что получит клиент. Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.reg.ru%2F&postId=654303" rel="nofollow noreferrer noopener" target="_blank">https://www.reg.ru/</a>
Абстрактные иллюстрации на reg.ru схематично показывают, что получит клиент. Источник: https://www.reg.ru/
<p>На сайте «ДОДО ПИЦЦА» рассказ о компании сопровождается иллюстрациями-комиксами, выполненными в фирменных цветах. Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fdodopizza.ru%2Fmoscow%2Fabout&postId=654303" rel="nofollow noreferrer noopener" target="_blank">https://dodopizza.ru/moscow/about</a></p>

На сайте «ДОДО ПИЦЦА» рассказ о компании сопровождается иллюстрациями-комиксами, выполненными в фирменных цветах. Источник: https://dodopizza.ru/moscow/about

Сайт канадского авиаперевозчика Porter украшают рисунки с маскотом — енотом. Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.flyporter.com%2Fen-ca%2F&postId=654303" rel="nofollow noreferrer noopener" target="_blank">https://www.flyporter.com/en-ca/</a>
Сайт канадского авиаперевозчика Porter украшают рисунки с маскотом — енотом. Источник: https://www.flyporter.com/en-ca/
<p>Милые котики на сайте VPN-сервиса hideme.name наглядно иллюстрируют предоставляемые услуги. Кстати, такой персонаж может считаться маскотом? Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fhidemy.name%2Fru%2F&postId=654303" rel="nofollow noreferrer noopener" target="_blank">https://hidemy.name/ru/</a></p>

Милые котики на сайте VPN-сервиса hideme.name наглядно иллюстрируют предоставляемые услуги. Кстати, такой персонаж может считаться маскотом? Источник: https://hidemy.name/ru/

В чем преимущества?

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

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

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

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

5. Уникальность. Такие изображения будут разрабатываться индивидуально под требования и будут абсолютно уникальными. А значит никаких проблем с соблюдением авторских прав.

Наш опыт

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

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

55
2 комментария

Кейсы классные, но именно ваши картинки в конце очень похожи на Freepic. Не оттуда?

Ответить

Здравствуйте! Нет, иллюстрации отрисованы нашим иллюстратором.
Старались делать картинки максимально соответствующими тексту. Например, если речь идет об автоматической загрузке из XML — на рисунке промышленные роботы с XML-файлами, если о разработке сайтов на Битрикс или Тильде — вписаны логотипы платформ и намеки на ключевые особенности, например экономию времени и денег в случае с Тильдой.

Ответить