Иллюстрации захватывают Интернет. Дизайнеры создают веб-сайты, используя все их виды — от полноэкранных изображений до вручную нарисованных иконок. И эта тенденция, скорее всего, будет возрастать, потому что иллюстрации придают дизайну видимость, что исключительно все здесь сделано под заказ (даже если это не так). В нашем обзоре – примеры того, как чувствуют себя иллюстрации в веб-дизайне.
Сайт-иллюстрация
Иллюстрации — универсальный и удобный способ создания дизайна. Если в вашем сайте все полностью иллюстрировано, включая рисованные изображения, элементы и надписи – он выглядит эксклюзивным. Это одна из причин, почему данная концепция так популярна. Но есть много других причин, по которым дизайнеры так тяготеют к этому тренду:
- — Иллюстрации позволяют пользователям представлять себя на сцене, которую выстраивает дизайнер, потому что проект не фокусируется на других реальных людях.
- — В нем присутствует элемент фантазии, что может быть достигнуто только при помощи рисунка.
- — Иллюстрации могут сцеплять реальность и воображение, что делает дизайн экстраординарным.
- — Когда вы рисуете художественные элементы, очень легко достигать индивидуализации.
- — Иллюстрации часто весьма красочны, что подходит для ярких и насыщенных тенденций.
- — Благодаря разработке пакетов иллюстрированных элементов для создания сайтов, эту технику может применять не только иллюстратор.
- — Иллюстрации могут использоваться в различных настроениях или стилях — от эскизов и сложных чертежей до компьютерной графики.
Иллюстрации в “hero-style”
Поскольку hero headers («заголовки-герои») очень большие, это один из самых подходящих элементов дизайна, где можно наблюдать рассматриваемую тенденцию. Такой прием используется в огромном количестве сайтов – от портфолио до интернет-магазинов. Иллюстрируя hero headers, вы имеете достаточно места для сложного произведения искусства. Мелкие детали, затенение, цвет и взаимодействие всех элементов имеют большое пространство и делают иллюстрацию на таком сайте удобной для изучения пользователями.
Есть несколько трюков для успеха в подобных проектах:
- — Художественная работа должна быть хорошей. Люди не будут рассматривать картинки, представляющие собой простой небрежный набросок или кучу беспорядочно помещенных элементов. Поэтому лучше не жалеть время и «повозиться» с рисунком.
- — Иллюстрация может иметь глубину и сложность, но общий смысл должен быть простым. «Говорящий» образ способствует главному посылу.
- — Лучше работать с профессионалами. Умение сделать довольно милый набросок на салфетке не означает готовности работать с полномасштабным сайтом-иллюстрацией. Этот процесс требует времени и планирования. (И такая работа может быть достаточно дорогой, поэтому лишний раз стоит убедиться в том, что вы выбрали правильную эстетику).
Добавление простой анимации
Статический рисунок сам по себе сильно влияет на восприятие пользователя. Объединяя иллюстрацию с анимацией, вы еще больше поощряете пользователя нажимать на все, что он видит.
Слегка движущиеся элементы, к примеру — вращающийся текст, помогает привлечь внимание. Мелкая анимация помогает пользователям понять, какие действия им выполнять во время посещения сайта. Это особенно полезно для иллюстраций, которые включают множество элементов, а также для перегруженных веб-конструкций. Маленькие сюрпризы могут способствовать задержке посетителей на сайте для изучения всего, что на нем находится. Анимированные hover-эффекты всегда служат веселым элементом навигационного инструмента.
Иллюстрированные иконки и элементы пользовательского интерфейса
Если тотальное иллюстрирование веб-дизайна не ваш стиль, рассмотрите идею применения нескольких иллюстрированных иконок или элементов пользовательского интерфейса. Это простой способ, чтобы облегчить тенденцию. (К тому же существует множество наборов готовых иконок и элементов интерфейса в стиле иллюстраций, которые помогут в работе.)
Иллюстрированные элементы могут добавить нотку фантазии на сайт, который в противном случае выглядит слишком формальным. Итак, иллюстрированные иконки. Этот стиль легко вписывается в любой дизайн, прекрасно работает с изображениями, различной цветовой гаммой и обеспечивает последовательную визуальную тему переходов от страницы к странице.
Если вы решили пойти дальше, чем просто иконки, подумайте о негабаритных элементах пользовательского интерфейса. Иллюстрированные кнопки не только будут направлять ваших пользователей, но и сделают сайт более веселым. Иллюстрированный стиль на сайте компании Iqor перетекает от страницы к странице с большими элементами, используя одни и те же три цвета. В результате получилось очень весело и согласованно, хотя и немного неожиданно для такого вида бизнеса.
Надписи в рукописном стиле
Еще одна важная составляющая в дизайне сайта — типографика. Объедините концепции иллюстрации и надписи в рисованном логотипе, где основной текстовый блок будет художественным элементом. Такая, основанная на тексте, визуализация может сильно повлиять на пользователя (особенно, если она крупногабаритная или используется в качестве основного элемента в дизайне).
Главная хитрость в таком подходе — умеренность. Используя надпись в рисованном стиле, нужно придерживаться одного текстового блока. Применение нескольких текстовых блоков подавляет восприятие и плохо влияет на читаемость. Важно, чтобы слова были ясными и пользователи не имели проблем с пониманием сообщения.
В двух примерах, которые мы здесь поместили, проделана большая работа по использованию рукописных шрифтов для простого сообщения. Сайт Day of the Dead использует дополнительные иллюстрации, простой шрифт без засечек и фотографии, которые сопровождают пользователя во всех частях сайта. В конечным результате получается веб-пространство, по которому легко и весело путешествовать. В дизайне сайта Stand up to Cancer используется акварельный стиль, на котором базируются все иллюстрации. Но, при этом, дизайн опирается на стандартные шрифты, удобные для чтения. Оба варианта хороши для работы в данной концепции.
И в заключение
Хотя такое вторжение иллюстраций в мир веб-дизайна может показаться немного пугающим, эта концепция дает дизайнерам множество возможностей. Самая главная из них – большой простор для творчества. Особенно стоит задуматься о концепции веб-сайта в иллюстративном стиле, если необходимо создать что-то особенное. К тому же, взяться за подобный дизайн – хороший повод освежить свои навыки рисования эскизов.
