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

 Сайт-иллюстрация

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

2

3

Иллюстрации в “hero-style”

Поскольку hero headers («заголовки-герои») очень большие, это один из самых подходящих элементов дизайна, где можно наблюдать рассматриваемую тенденцию. Такой прием используется в огромном количестве сайтов – от портфолио до интернет-магазинов. Иллюстрируя hero headers, вы имеете достаточно места для сложного произведения искусства. Мелкие детали, затенение, цвет и взаимодействие всех элементов имеют большое пространство и делают иллюстрацию на таком сайте удобной для изучения пользователями.

4

Есть несколько трюков для успеха в подобных проектах:

5

Добавление простой анимации

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

6

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

7

Иллюстрированные иконки и элементы пользовательского интерфейса

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

8

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

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

9

Надписи в рукописном стиле

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

10

Главная хитрость в таком подходе — умеренность. Используя надпись в рисованном стиле, нужно придерживаться одного текстового блока. Применение нескольких текстовых блоков подавляет восприятие и плохо влияет на читаемость. Важно, чтобы слова были ясными и пользователи не имели проблем с пониманием сообщения.

В двух примерах, которые мы здесь поместили, проделана большая работа по использованию рукописных шрифтов для простого сообщения. Сайт Day of the Dead использует дополнительные иллюстрации, простой шрифт без засечек и фотографии, которые сопровождают пользователя во всех частях сайта. В конечным результате получается веб-пространство, по которому легко и весело путешествовать. В дизайне сайта Stand up to Cancer используется акварельный стиль, на котором базируются все иллюстрации. Но, при этом, дизайн опирается на стандартные шрифты, удобные для чтения. Оба варианта хороши для работы в данной концепции.

11

И в заключение

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

Февраль 2, 2016