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 трендового веб-дизайна. О одинаково успешно решают диаметрально противоположные задачи: реалистично отображать объекты и создавать фантазийные виртуальные эффекты.
Аудиоэффекты
Автозапуск воспроизведения звука при открытии сайта чаще всего пользователей раздражает. А иногда может и создавать неудобства.
Другое дело — звук, который включаешь по желанию. Идея добавления аудио на сайты открывает много возможностей: создать нужный эмоциональный фон, озвучить самые важные информационные моменты или добавить фишку (помните, в начале я говорил о китах). Тут все решает тематика сайта.
Многослойность
Иногда сложность вовлекает так же сильно, как цепляет простота. Динамичные (и статичные) элементы, которые перекрываются и наслаиваются друг на друга, добавляют сайтам реалистичность, глубину (визуальную) и содержательность (это я уже о смысле).
Часто это значит, что у сайта нет четкой сетки. И это тоже очень эффектно. Причем просматривать сайт с «правильно разрушенной» сеткой легко. Ниже — примеры сайтов о строительстве и дизайне.
Иногда художественный прием наслоения раскрывает саму идею ресурса — как у американского сервиса поиска водителей-попутчиков: много сменяющихся лиц, мест, впечатлений.
Интересный подход — когда фон на заднем плане проходит через всю прокрутку сайта.
Игра градиентов
В мире оффлайн людей окружают сплошные цвета. Градиенты ярче, необычнее и веселее. Они запоминаются. Поэтому их использование в дизайне востребовано не первый год. Тем более что перетекание оттенков позволяет находить новые фирменные цвета, а трехмерным изображениям добавляет зрелищности.
Неоновые, пастельные, жирные и тонкие градиенты — вариантов много, и сочетать их — тоже актуальный прием.
Упрощенная навигация
По сути, навигация по сайту — это система кодов, которую пользователи отлично научились считывать. Поэтому сейчас мы движемся к упрощению пути: меньше слов, меньше знаков. Так мы получаем больше места, возможность сконцентрировать внимание пользователей на дизайне и контенте. И способ сделать универсальную навигационную иконку для декстопных и мобильных версий.
При этом, несмотря на минималистичное решение меню, интерфейс и принципы навигации остаются понятными.
Делаем выводы
Легко заметить, что каждый из приведенных примеров демонстрирует не одно трендовое решение. Многие из них отлично дополняют и усиливают друг друга.
Это дает возможность смело экспериментировать с цветами, эффектами и стилями, чтобы создавать стильный веб-дизайн. Который будет полностью отвечать характеру и функциям сайта, а пользователям обеспечивать удобный интерфейс и приятные впечатления.
талантливо
напрягают сайты, где на всю страницу пяток плиток-кнопок и гигантского размера пара фраз. монитор не баннер возле проезжей части, так что нефиг. нездоровый гигантизм достал уже
Я советую вам эти книги про дизайн , пройдите по ссылке . Вам будет интересно)
https://blog.pachca.com/posts/6-knig-pro-dizajn-kotorye-budut-interesny-vsem/
было бы круто увидеть подобную статью о мобильных приложениях ;)
Поддерживаю, тоже сделал статью об этом