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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Figmа

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

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

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

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

2. Pixso

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

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

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

3. Adobe Photoshop

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

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

4. Vectorizer AI

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

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