Тенденции художественного оформления в веб-дизайне 2018 года

Веб-дизайн

Обзор тенденций, сформировавших иллюстрацию на Интернет-ресурсах в 2018 году

Мы в Webflow всегда стараемся отслеживать заметные явления в веб-дизайне. На этот раз нам показалось, что самые интересные подвижки в цифровом дизайне произошли в иллюстрации.

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

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

Итак, не будем тратить слов зря, рассмотрим эти тенденции!

1. Фотоколлаж помогает сделать бренд запоминающимся

Вот вам небольшое задание по дизайну.

Вы — молодой и амбициозный дизайнер, разрабатывающий бренды.

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

Итак, ваше решение?

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

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

Добавьте описаниеСоздать карусель            

Или на эти картинки, стоящие во главе рубрик в сайдбаре:

Создать карусель             Добавьте описание
Создать карусель             Добавьте описание

Говорим образами, а не словами

Фотоколлаж ухитряются использовать даже для того, чтобы рассказать пользователям о самой платформе, как на этой GIF’ке, где оплата увязывается с аплодисментами:

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

Добавьте описаниеСоздать карусель            

2. Стыковка пользовательского интерфейса и реальной жизни

Добавьте описаниеСоздать карусель            

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

И делается это без демонстрации неуместных (и, давайте признаемся, довольно скучных) специфических скриншотов или отката к классическим стоковым фото типа «эй, народ, посмотрите, куда я указываю у себя на экране!» А еще здесь искусно показано, что Slack сближает людей — мысль, которую (хотя это и разумная альтернатива) не смог бы донести снимок экрана в многооконном режиме.

Добавьте описаниеСоздать карусель            
Создать карусель             Добавьте описание

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

Создать карусель             Добавьте описание

3. Фигурки людей, хоть и абстрактные.

С эффектным волосяным покровом

Создать карусель             Добавьте описание

Если вы, желая опубликовать свой текст, зайдете на домашнюю страницу Intercom, то увидите там добродушного человечка, которого мы поместили над этим абзацем, и, по-видимому, он жонглирует коммуникационными потоками — там есть чат, обычный человеческий разговор и… бумажная почта? Это что, настоящий конверт?

Добавьте описаниеСоздать карусель            

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

Добавьте описаниеСоздать карусель            

Или вот этот улыбчивый молодой человек, с головы которого слетела кепка. (Как ребенок, честное слово.)

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

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

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

И вот еще что: изображение волос в иллюстрации становится более выразительным. Как, например, вы можете увидеть в новой серии картинок на сайте Credit Karma.

Добавьте описаниеСоздать карусель            

Или в изображениях на сайте Oscar, известного бренда, специализирующегося в страховании здоровья людей.

Создать карусель             Добавьте описание

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

4. Комплексное использование изоморфизма, градиента и непрозрачности

Добавьте описаниеСоздать карусель            

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

Создать карусель             Добавьте описание
Добавьте описаниеСоздать карусель            

5. Абстрактное иллюстрирование абстрактных тем

Создать карусель             Добавьте описание

Вот вам еще одно задание по дизайну. Отобразите в графике такое послание: «Этот пост о том, что маркетинг должен охватывать все стадии воронки продаж».

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

Решение: абстракция в духе Сая Твомбли! (Сай Твомбли (1928—2011), американский художник и скульптор-абстракционист. Прим. переводчика.)

Создать карусель             Так выглядят работы Сая Твомбли.

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

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

6. Выпуклости возвращаются

Создать карусель             Добавьте описание

Выпуклости вернулись, детка.

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

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

Если вам так нравится, называйте это сквеоморфизмом, но я не припомню ни одного другого ежедневника, который смотрелся бы так выпукло. Создать карусель             .Изображение: Майкл Фларэп

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

Добавьте описаниеСоздать карусель            

Мне так вас не хватает, смайлики в Android.

Мы что-то упустили?

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

Автор: Джон Мур Уильямс

Источник: https://webflow.com/blog/illustration-trends-in-web-design-for-2018

Перевод: Hi-Tech English


Комментарии для сайта Cackle
Автор поста:
Соколов Максим
Основатель академии