Колонки

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

Колонки
Миша Пименова
Миша Пименова

CEO Mish

Анастасия Удальцова

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

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

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

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

Материалы по теме

  1. 1 Представлены основные тренды создания и применения CovidTech-решений в мире
  2. 2 Консолидация СМИ, отток журналистов, платные подписки — названы новые тенденции на рынке западных СМИ
  3. 3 7 инсайтов, которые помогут нанять веб-дизайнера: что мы узнали, изучив 500 откликов на вакансию
Huawei
Cоздаем продающий контент для соцсетей с одним смартфоном.
Узнать больше