11 определяющих трендов в веб-дизайне и пользовательском интерфейсе 2020 года

Трендовый, современный, актуальный — именно эти слова вы услышите, когда спросите, какой сайт нужен заказчику.

Каким будет веб-дизайн в 2020 году, продолжении тенденций 2019-го и направлениях, которые будут развиваться, рассказывает основатель и директор Gagarin Studio Артем Беседа.

Чем дальше в год, тем больше градиентов, нетривиальной типографики и минимализма. Эти тренды уже закрепились в дизайне сайтов и в 2020 году будут развиваться.

Минимализм — классика дизайна. Но в комбинациях с новыми приемами он раскрывается иначе: это решения на модной волне и в то же время изящные и элегантные.

Вот как это сделано на сайте о спасении китов https://save-whales.com/.

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

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

В этом примере сочетаются несколько трендовых решений: типографика, градиенты, 3D и не только.

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

Взгляд отдыхает на монохромных изображениях, а акцентами чаще всего становятся кнопки призыва к действию. Или спасибо:-)

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

В комбинации с минимализмом в том числе.

Или указывая на нужное действие так, что не заметить невозможно.

Создатели сайта-оппозиционера глянцу в социальных сетях I am tired online талантливо используют типографику для нагнетания соответствующего эффекта. Это даже жестко.

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

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

Обратите внимание на черную кляксу в верхнем левом углу — это кнопка «На главную».

Анимированные иллюстрации просто и убедительно объясняют, что как работает.

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

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

На сайтах о продаже/создании одежды такой прием создает эффект дополненной реальности с элементами игры.

На примере ниже геометрические элементы используются как эмоциональные акценты к фото.

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

Анимационные решения создают wow-эффект. И впечатление, что сайт стоит вашего внимания.

По сайту https://deplacemaison.webflow.io/ за вашим курсором следует стремительная черная капля, с которой хочется играть.

А на Binaryblocks — голубая точка, которая в месте клика превращается в круг.

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

Сайт Save whales погружает в водную среду несколькими анимационными эффектами: плывут киты, курсор и информационные пузыри, а предыдущие страницы «смываются» нарисованной волной.

Трехмерные модели практически получили статус must have трендового веб-дизайна. О одинаково успешно решают диаметрально противоположные задачи: реалистично отображать объекты и создавать фантазийные виртуальные эффекты.

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

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

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

Часто это значит, что у сайта нет четкой сетки. И это тоже очень эффектно. Причем просматривать сайт с «правильно разрушенной» сеткой легко. Ниже — примеры сайтов о строительстве и дизайне.

Иногда художественный прием наслоения раскрывает саму идею ресурса — как у американского сервиса поиска водителей-попутчиков: много сменяющихся лиц, мест, впечатлений.

Интересный подход — когда фон на заднем плане проходит через всю прокрутку сайта.

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

Неоновые, пастельные, жирные и тонкие градиенты — вариантов много, и сочетать их — тоже актуальный прием.

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

При этом, несмотря на минималистичное решение меню, интерфейс и принципы навигации остаются понятными.

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

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