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

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

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

Побольше минимализма

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

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

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

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

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

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

Дизайн на темной стороне

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

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

Игры с типографикой

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

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

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

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

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

Иллюстрации

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

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

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

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

2 в 1: фотографии и рисунки

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

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

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

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

Текучая анимация

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

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

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

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

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

3D и снова 3D

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

Аудиоэффекты

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

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

Многослойность

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

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

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

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

Игра градиентов

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

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

Упрощенная навигация

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

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

Делаем выводы

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

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

0
5 комментариев
Alexander Matveev
талантливо используют типографику
талантливо
Ответить
Развернуть ветку
Curio Sity

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

Ответить
Развернуть ветку
Алтынай Саттыбаева

Я советую вам эти книги про дизайн , пройдите по ссылке . Вам будет интересно)
https://blog.pachca.com/posts/6-knig-pro-dizajn-kotorye-budut-interesny-vsem/

Ответить
Развернуть ветку
Daria Perfileva

было бы круто увидеть подобную статью о мобильных приложениях ;)

Ответить
Развернуть ветку
Денис Верхоломчук

Поддерживаю, тоже сделал статью об этом

Ответить
Развернуть ветку
2 комментария
Раскрывать всегда