Как делать интерфейсы в 2021 году? 10 трендов в UX-/UI-дизайне

Время чтения: 8 минут
logo

Начало года — отличное время для старта нового проекта, будь это сайт, лендинг или приложение. На что обратить внимание веб-дизайнерам? Как сделать ресурс, который точно понравится пользователям? Сегодня поговорим о трендах в UX-/UI-дизайне, которые развиваются с молниеносной скоростью и делают интерфейсы сайтов и приложений еще более удобными и человечными.

Сергей Буякчин

Сергей Буякчин, UX-/UI-дизайнер IT-компании Maxima


Простота и лаконичность

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

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

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

Простота и лаконичность

Простота и лаконичность

Простота и лаконичность


Тени и градиенты

Данный тренд был известен и ранее, однако сейчас стал развиваться намного интереснее и становиться актуальнее. В отличие от его предыдущих версий, в нем появилось больше воздушности и легкости. Все это сочетается с градиентами и тенями приглушенных пастельных оттенков. Градиенты эволюционировали и стали более сложными. Теперь недостаточно использовать линейный градиент, как ранее. Надо смешивать разные цвета и использовать наложение. Еще в интерфейсах все чаще начал использоваться эффект Color Blur, в основном в качестве фона. Это придает интерфейсу глубину и объем. Как правило, это своего рода «цветные пятна».

Тени и градиенты

Тени и градиенты


3D-элементы, рендеры и иллюстрации

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

Это несложные формы и довольно простые и примитивные объекты, но они отлично и свежо смотрятся в качестве визуала для проектов.

3D-элементы, рендеры и иллюстрации

3D-элементы, рендеры и иллюстрации

3D-элементы, рендеры и иллюстрации


Уникальные и абсурдные 2D-иллюстрации

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

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

Уникальные и абсурдные 2D-иллюстрации

Уникальные и абсурдные 2D-иллюстрации


Глассморфизм

Глассморфизм, или эффект стеклянной поверхности, стремительно набирает популярность. Что же это такое? На самом деле все просто: это оформление интерфейса в «контейнеры», имитирующие стекло.

Его основными характеристиками являются:

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

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

Глассморфизм

Глассморфизм

Олег Лаврентьев

Олег Лаврентьев, арт-директор компании Garpix


3D-иллюстрации и анимация

Тренд с использованием 3D-графики в дизайне не новый, но развитие технологий не стоит на месте, и графика становится всё круче и интереснее. 3D движется к гиперреалистичным визуальным эффектам, а возможность пользователей взаимодействовать с ним прямо в браузере выводит интерфейсы на новый уровень.

3D-иллюстрации и анимация

3D-иллюстрации и анимация


Объемные иконки

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

Объемные иконки

Объемные иконки

Объемные иконки


Эмодзи как элемент дизайна

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

Эмодзи

Эмодзи

Эмодзи


Организованный хаос

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

Организованный хаос

Организованный хаос

Организованный хаос

Евгений Шевцов

Евгений Шевцов, руководитель UX-направления в компании Usetech


Микроанимации и взаимодействия

Микроанимации — важнейший вид пользовательского опыта при взаимодействии пользователя с интерфейсом.

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

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


Темный UX

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

Например: на сайте вам предлагают подписку за 30 рублей в месяц, а почти белым цветом написано, что 30 рублей — это стоимость только за первый месяц использования услуги, последующая стоимость подписки 1999 рублей.

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

Обычные приемы темного UX:

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

Темный UX




Итак, тренды 2021 года в UX-/UI-дизайне по версии экспертов:

  1. Простота и лаконичность
  2. Тени и градиенты
  3. 3D-иконки, рендеры и иллюстрации
  4. Уникальные и абсурдные 2D-иллюстрации
  5. Глассморфизм
  6. Анимация
  7. Эмодзи как элемент дизайна
  8. Организованный хаос
  9. Микроанимации и взаимодействия
  10. Темный UX

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

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

Интересно? Подписывайтесь)




(6)
4.3/5
Оцените статью
Поделитесь с друзьями
Содержание: