Главные тренды 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. Необрутализм

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

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

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

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

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

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

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

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

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

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

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

1. Figmа

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

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

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

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

2. Framer

Аналог Figma для веб-дизайнеров. Позволяет разрабатывать интерактивные прототипы, макеты и анимацию интерфейсов сайтов и мобильных приложений. Функциональности достаточно даже для создания полноценного онлайн-магазина: для этого нужно подключить разработчиков и «дописать» код на React прямо внутри программы.

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

3. Adobe Photoshop

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

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

4. Vectorizer AI

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

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