Доступность товара в магазинах компании
Доступность товара в магазинах компании
08.10.2018

Как правильно использовать иллюстрации в дизайне?

cover-il

Оформить интернет-магазин профессионально
Вышлем индивидуальное предложение на редизайн за 8 секунд


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

Тематические изображения

Такие иллюстрации призваны создавать и усиливать определенную атмосферу. Как правило сюжетная линия картинки тесно переплетается с основной тематикой сайта. Ниже ряд примеров:

Get my boss to North Cape


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

Atelier Anonyme Design


Команда дизайнеров сайта Atelier Anonyme Design в процессе разработки своей домашней страницы сделала ставку исключительно на иллюстрацию. В данном примере картинка является и бекграундом сайта, и одновременно ярким запоминающимся элементом.

Иллюстрация с персонажем

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

inkFinder


На данном портале в качестве персонажа фигурирует осьминог. Благодаря ему дизайн сайта лучше запоминается и становится более узнаваемым.

The Evnt


Тут мы можем видеть еще одного “осьминогоподобного” персонажа. Конкретнее - некий мозг в скафандре на трех ножках. Бесспорно, такой элемент является запоминающимся. Согласитесь, если убрать данную иллюстрацию со страницы, то она сразу потеряет половину своей уникальности.

Big Eye Creative


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

Иллюстрированные украшения

Данный вид иллюстраций призван нести исключительно декоративную функцию, являясь просто украшением и не более того. Такой подход также имеет право на жизнь, ведь красивые сайты запоминаются не хуже, чем проекты со “смысловыми” иллюстрациями. Главное здесь не переборщить. Вот несколько примеров:

Coca-Cola History


На одном из проектов Coca-Cola иллюстрации сделаны с целью разнообразить дизайн, сделав его более современным и модным. Изображенные реальные вещи стилизованы таким образом с целью вписаться в общую концепцию сайта.

Metaphiziks


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

Иллюстрированный текст

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

Rangus


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

Joey Lomanto


При первом взгляде иллюстрированная надпись хорошо сочетается с другими элементами дизайна. Скорее всего вы не сразу обратите внимание на то, что данный текст выполнен в рукописном стиле.

Смысловая нагрузка

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

Bookish


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

Uklizenodoma


Хороший пример сайта, на котором информационная иллюстрация является основой страницы. Элементы помещения имеют свои подписи и ссылки, ведущие на соответствующие страницы.

Иллюстрация-противоядие

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

Shipment App


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

Egopop


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

Итоги

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


Остались вопросы?
Ответим на любой!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>