Главные тренды UX / UI-дизайна в 2024 году

от admin

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

Для чего нужно использование и понимание трендов UI/UX-дизайнаВизуальные трендыТренды в проектировании интерфейсовТрендовые инструменты UX/UI-дизайнераСовет эксперта

Для чего нужно использование и понимание трендов UI/UX‑дизайна

UX-дизайнер отвечает за User Experience (с англ. «пользовательский опыт») и юзабилити, UI-дизайнер — за User Interface (с англ. «пользовательский интерфейс»), то есть визуальное представление.

В обязанности любого дизайнера входит следить за трендами и тенденциями. Даже самое удобное приложение должно со временем визуально меняться, чтобы подогревать интерес пользователей и привлекать новую аудиторию. Поэтому профессиональные UI/UX-дизайнеры постоянно добавляют новые фишки и «задают настроение» цифровому продукту.

Чтобы быть в тренде, необходимо развивать насмотренность. Это базовый софтскил для джуниор-специалистов: уметь работать со сложными макетами недостаточно, нужно использовать актуальные приёмы. Развивать насмотренность помогает «большая тройка» сайтов для дизайнеров: Dribbble, Behance, Dprofile.

Главные тренды UX / UI-дизайна в 2024 году

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

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

Главные тренды UX / UI-дизайна в 2024 году

Главные тренды UX / UI-дизайна в 2024 году

Станьте дизайнером интерфейсов за 9 месяцев
Освоите Figma и Adobe Photoshop, получите поддержку дизайнеров из Яндекса, Mail.ru и других крупных компаний. Наши выпускники работают в Газпроме, Ozon, МТС и ВТБ.Начать учиться бесплатно

Визуальные тренды

Основной тренд UX / UI-дизайна в 2024 году — совершенствование нашумевших новинок. Дизайнеры продолжают экспериментировать с типографикой, используют вместо фотографий 3D-иллюстрации и создают аккуратные сайты с яркими акцентами.

Разберём подробнее, как за счёт трендов меняется визуал сайтов и приложений:

1. Типографика

Тренды в типографике UI-дизайна можно описать тремя словами: big, bold, capitalized. UX-дизайнеры смешивают стили типографики, чтобы подчеркнуть слова или привлечь внимание пользователей.

Разберём подробнее, что происходит со шрифтами в 2024 году:

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

Главные тренды UX / UI-дизайна в 2024 году

Пример смешения двух гарнитур и акцента на типографике

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

Главные тренды UX / UI-дизайна в 2024 году

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

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

2. Кастомные иллюстрации

Стоковые картинки теряют популярность: в 2024 году нужна индивидуальность.Чтобы быть в тренде, дизайнеру полезно уметь рисовать в программах вроде Cinema 4D, Spline или работать в связке с иллюстратором.

Главные тренды UX / UI-дизайна в 2024 году

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

3. Необрутализм

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

Главные тренды UX / UI-дизайна в 2024 году

Для необрутализма характерно использование крупной типографики, насыщенных цветов и чётких границ

4. Бенто-бокс (Bento UI)

Бенто-бокс — это концепция дизайна пользовательского интерфейса, вдохновлённая японскими бенто-ланчами. Такой подход часто используется в веб-дизайне и разработке приложений, чтобы создать интуитивно понятный и приятный пользовательский опыт. Bento UI предполагает создание модульных, гибких и легко воспринимаемых интерфейсов, где элементы размещены в отдельных «коробках», или секциях.

К основным характеристикам Bento UI относятся:

  1. Модульность — интерфейс состоит из отдельных компонентов, которые можно легко перемещать и заменять.
  2. Удобство восприятия — элементы визуально отделены друг от друга, что облегчает восприятие информации пользователем.
  3. Адаптивность — дизайн хорошо смотрится на различных устройствах и экранах.
  4. Гибкость — пользователи могут настраивать интерфейс под свои нужды, добавляя или убирая элементы.

Главные тренды UX / UI-дизайна в 2024 году

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

Тренды в проектировании интерфейсов

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

Вот основные новинки в проектировании интерфейсов:

Читать:
Гайд по Procreate: что есть в приложении и как создать первый рисунок

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

Главные тренды UX / UI-дизайна в 2024 году

Прокрутка сайта неожиданно сменяется с привычной на горизонтальную

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

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

Главные тренды UX / UI-дизайна в 2024 году

На iPhone вместо кнопок + и – громкость регулируется с помощью перемещения компонентов вверх или вниз

Где ещё можно отказаться от кнопок:

Вход в учётную запись. Face ID вместо полей для логина и пароля;
Поиск в интернете. Голосовой поиск вместо поисковой строки;
Функции мессенджеров. Перетаскивание или смахивание сообщений и всплывающих окон;
Функции соцсетей. Двойное нажатие, чтобы поставить лайк или добавить пост в избранное.

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

Главные тренды UX / UI-дизайна в 2024 году

Агентство «Рыба» продаёт курс по IT-текстам и превращает просмотр лендинга в забавную игру

Трендовые инструменты UX/UI-дизайнера

В 2024 продолжается тренд на внедрение нейросетей в привычные инструменты для дизайна:

1. Figmа

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

Ando. Предлагает более 50 готовых виджетов и шаблонов, создаёт иллюстрации на основе примитивов и текстовых запросов. В бесплатной версии за месяц можно делать 642 картинки, а с подпиской за 18$ в месяц можно получить улучшение качества изображения, а также генерацию 3D-иконок и иллюстраций.

Unbackground. Бесплатный плагин, который позволяет удалить фон с любого изображения или фотографии с помощью искусственного интеллекта. Подходит для Figma, Photoshop, Illustrator и Sketch.

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

Главные тренды UX / UI-дизайна в 2024 году

В новой версии Figma больше нет ИИ. Поэтому если этот функционал важен, лучше выбирать Pixso

2. Pixso

Инструмент предназначен для дизайна и прототипирования пользовательских интерфейсов. С помощью него можно создавать и редактировать проекты и совместно работать над ними в реальном времени. В новой версии Pixso появился встроенный ИИ, но нет Variables, как в Figma.

Основные функции Pixso включают следующее:

  1. Совместная работа — возможность одновременной работы нескольких пользователей над одним проектом.
  2. Прототипирование — создание интерактивных прототипов, которые помогают визуализировать, как будет работать конечный продукт.
  3. Компоненты и библиотеки — наличие готовых компонентов и библиотек.
  4. Интеграция — возможности интеграции с другими инструментами и платформами.

Главные тренды UX / UI-дизайна в 2024 году

Pixso часто используют дизайнеры для разработки интерфейсов веб- и мобильных приложений

3. Adobe Photoshop

Умеет работать с фотографиями, 3D-объектами, анимацией, типографикой. С помощью Photoshop можно решить такие задачи, как: разработка макетов для сайта, обработка фотографий, создание иллюстраций, гифок, анимаций и многое другое.

Недавно в Photoshop появилась генеративная заливка (Generative Fill) — инструмент, позволяющий работать с нейросетями. Его можно использовать, чтобы дорисовать часть изображения, удалить или заменить часть фотографии, сгенерировать картинку с нуля. Сейчас функция доступна только в бета-версиях.

Главные тренды UX / UI-дизайна в 2024 году

Photoshop — основной инструмент веб-дизайнеров

4. Vectorizer AI

Позволяет конвертировать растровые изображения JPEG и PNG в векторы SVG. Искусственный интеллект помогает выявить детали, которые упускают традиционные методы конвертации, а также улучшить геометрические фигуры, очистить углы, сопоставить касательные, сгладить кривые и так далее.

Главные тренды UX / UI-дизайна в 2024 году

ИИ превратил набор квадратиков в тигра

Совет эксперта

Александр СтаринскийВ начале пути важно работать над базой, тренировать насмотренность, оттачивать навыки работы в Figma и следить за тем, как изменяются тренды. А ещё не стоит бояться, что искусственный интеллект отнимет у дизайнеров работу. UX/UI-дизайнеры, по сути, переводят с машинного языка на человеческий, и эта профессия по-прежнему остаётся «от людей к людям». ИИ лишь упрощает базовые задачи: о полной замене человеческого труда речь не идет.

Похожие публикации