15 UI/UX-трендов 2020/2021 года

Читайте все материалы про итоги года здесь

1. Темный режим

Темный режим, который уже стал большой тенденцией в 2020 году благодаря OLED-экранам, в следующем году станет еще более популярным, потому что он:

• смотрится суперсовременно. Instagram, Twitter, Facebook и Apple — это всего лишь несколько крупных брендов, которые предлагают альтернативные темы на своих платформах.
• выделяет и позволяет выделять другие элементы дизайна.
• снижает нагрузку на глаза в условиях низкой освещенности. Подумайте, сколько из нас листают телефоны по ночам, когда нам положено спать.
• может сэкономить заряд аккумулятора устройства. 

2. Human touch

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

3. Иммерсивные 3D-элементы

Объемная графика всегда восхищала людей; эту тенденцию сдерживали только технологии и дороговизна. Пока виртуальная реальность не станет более распространенной и рентабельной, гиперреалистичное 3D-изображение, которое часто занимает весь экран, является лучшим способом создать на вашем сайте эффект присутствия.

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

4. Мягкие тени, слои и плавающие элементы.

Мягкие тени и плавающие элементы создают псевдо-3D-эффект и делают дизайн более многослойным и интересным.

5. Смешение фотографии с графикой

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

6. Сплошные рамки одноцветного пространства

Макеты с полным выпуском под обрез уже давно стали трендом в веб-дизайне.

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

7. Свет и неон

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

Это отлично сочетается с другими восходящими трендами, как крайний минимализм и темный режим. И светящиеся цвета могут действительно сиять. 

8. Ультра минималистичная навигация

Контент веб-сайта тяготеет к большему количеству видео с голосовым сценарием и меньшему количеству текста.

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

В то же время изображения становятся все более важными.

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

9. Асимметричная верстка

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

Однако шаблоны всегда ограничивали креативность. 

Outcrowd — отличный пример асимметричного дизайна. Несмотря на то что объекты с обеих сторон не совсем симметричны, контент по-прежнему выглядит организованным и сбалансированным.

10. Дерзкая типографика.

Жирные шрифты в UI / UX дизайне сейчас рулят.

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

11. Эффект матового стекла

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

12 Визуализация данных

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

Веб-сайт Koniku прекрасно демонстрирует работу сопроцессоров. Он показывает абстрактные данные для привлечения первых пользователей.

Mogney.com также реализует технику визуализации абстрактных данных. Таким образом, создается ощущение глубины и оригинальности.

13. UX-тексты и микрокопии

Многие компании изменили свой стиль общения. Цель — сделать его менее формализованным и более похожим на обычный диалог.

Medium знает, что они отвлекают вас от чтения статьи. По этой причине платформа приносит свои извинения в заголовке, который делает стиль общения более неформальным.

Dollar Shave Club также является прекрасным примером менее формализованного стиля общения. Сайт с юмором сообщает вам, что ваша корзина пуста. 

Микрокопии — еще одна популярная тенденция дизайна UI / UX. Этот метод добавляет вашему сайту неповторимый тон и звук и позволяет наладить хорошие отношения с пользователями.

Femme & Fierce — хороший пример компании, внедряющей UX-текст и микрокопии. Такие надписи на кнопках, как «Спасибо, детка!» и такие сообщения, как «Давайте смотреть, полетим!» демонстрируют дерзость бренда. 

The Guardian следует тенденции дизайна UX, ориентированной на человека, и указывает цель.

14. Фотоарт

Сюрреалистические фотографиях предметов на сцене!

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

15. Реалистичные текстуры

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

 Homecult - прекрасный пример выбора правильных типов текстур для темы своего сайта.

Тенденции:

1. Упрощается подача контента (тут и яркие цвета, большие шрифты и визуализация).
2. Персонализация (человеческий копирайтинг, почеркушки и иллюстрации от руки).
3. От плоского дизайна все немного устали, оставляя место 3D и реалистичным текстурам.
4. Так как пандемия дала посмотреть на интернет по-новому и аудитория стала шире, UX становится дружелюбнее

Фото на обложке: Alim Yakubov/Shutterstock

Иллюстрации предоставлены автором.