UI/UX-дизайн — динамичная сфера. Для создания актуальных проектов важно держать руку на пульсе. Чтобы узнать об главных тенденциях, я поговорила с действующими специалистами. Рассказываю, какие тренды UI/UX-дизайнеры назвали наиболее популярными.
В этом году вижу несколько трендов, которые определяют пользовательский опыт и визуальное взаимодействие:
Ночной режим (Dark Mode). С каждым годом ночной режим становится все популярнее. Он предоставляет пользователям возможность переключаться на темную цветовую схему, что не только снижает нагрузку на глаза в ночное время, но и придает интерфейсу современный и стильный вид.
Минимализм. Простота и чистота дизайна становятся все более важными, поскольку пользователи предпочитают быстрый и интуитивно понятный интерфейс без лишних элементов.
Микроанимации и микроинтеракции. Они добавляют интерес и динамичность в пользовательский опыт, делая его более привлекательным и вовлекающим.
Адаптивный дизайн. С развитием технологий многие компании предоставляют пользовательские возможности адаптации интерфейса под индивидуальные потребности. Это включает в себя персонализированные рекомендации, адаптивные макеты и функции, учитывающие предпочтения и контекст использования.
Ночной режим. Отлично дополняет минималистичный контент, подчёркивает визуализацию данных, акцентирует внимание на важных деталях. Также есть мнение, что ночной режим снижает напряжение на глаза.
В разработке темных UI-элементов важно достичь оптимального контраста, чтобы разделить визуальные элементы и сделать текст читабельным. Поэтому Dark Mode не подходит сложным продуктам с большим количеством разных страниц и контента. При использовании тёмного режима цветовых акцентов не должно быть слишком много.
Минимализм. Направлен на удаление лишнего контента и упрощение навигации. Такой дизайн повышает скорость загрузки сайта, уменьшает когнитивную нагрузку и помогает пользователям легко находить то, что им нужно.
Для этого направления характерны акцент на типографике, большое количество негативного пространства, ограниченная цветовая палитра. Приоритет в этом случае получают наиболее значимые элементы. Использование визуальных эффектов сводится к минимуму.
Микроанимации. Это небольшие эффекты движения. Если эффекты появляются при взаимодействии с пользователем, их называют микроинтерацкиями. Их основная задача — дать отклик, показать об изменении статуса системы, упростить навигацию. Элементы с анимацией привлекают внимание, дают моментальную обратную связь, играют роль подсказок и воздействуют на эмоции: пользователь видит, что интерфейс «живой». Также микроанамации ненавязчиво направляют к совершению нужных действий и могут влиять на увеличение конверсии.
Адаптивный дизайн. Он подразумевает изменение интерфейса под потребности людей и позволяет улучшить UX на сайте. У пользователя со смартфоном сайт должен отображаться так же хорошо, как у юзера с ноутбуком — это самый простой пример.
Но также интерфейс может подстраиваться под предпочтения и потребности пользователя. За счёт этого растёт посещаемость, повышается время пребывания на сайте, увеличивается конверсия.
Тренды в UI постоянно меняются, но не меняется основная составляющая приложения — UX. Если говорить про визуальный дизайн, сейчас очень популярны ярко-кислотные цвета в сочетании с чёрным. Также актуальны округлые формы. Как по мне, это стало популярным потому, что люди устали от унылых и скучных цветов и форм, хочется чего то нового.
Ещё хочу подметить брутализм, который сейчас все больше и больше развивается. В нём нет ничего лишнего и всё строго. В основном брутализм используют лишь для портфолио, поскольку заказчики не хотят рисковать своими деньгами ради такого результата. Они не видят в нем смысла, а он есть.
Чёрный цвет. Создаёт ощущение загадочности. Однако он способен вызывать и негативные эмоции, поскольку часто ассоциируется со скорбью и злом. На помощь приходят ярко-кислотные цвета — цвет фуксии, яркий салатовый, изумрудный, жёлтый, оранжевый, яркий синий.
Сочетание нейтрального чёрного цвета с яркими оттенками придаёт дизайну оригинальность. Кроме того, яркая гамма на тёмном фоне привлекает внимание, улучшает узнаваемость. Главное здесь — не переборщить. Важно подобрать сочетания цветов и не потерять акценты на значимых деталях.
Округлые формы. В интерфейсах они отвечают за дружелюбие. Плавные линии и круги улучшают восприятие, поскольку нашему зрению их легче воспринимать и обрабатывать. Острые углы и резкие повороты нарушают единую линию и сбивают с пути. Скругления направляют взгляд в нужную точку. А ещё элементы с закруглёнными углами лучше смотрятся в небольшом масштабе: например, на мобильных экранах.
Брутализм. Достаточно специфичный стиль. Для него характерна нарочитая простота, забота о практичности и функциональности, но при этом нестандартные решения и хаотичность. Основные признаки «грубого» UI — крупная типографика, часто с буквами одной ширины, чёрно-белая гамма, кислотные оттенки, минимум декоративных элементов. Это далеко не массовый стиль, однако может стать «фишкой» бренда при правильном подходе.
Любой стиль в дизайне со временем эволюционирует во что-то более актуальное, чтобы соответствовать тенденциям общества.
Скевоморфизм — стиль в дизайне интерфейсов, который предполагает изображение элементов интерфейса в точности или очень близко похожими на реальный физический объект.
Подобный стиль в дизайне был особенно распространен, когда эра цифровизации только подходила.
Когда-то Стив Джобс и главный дизайнер Apple Джони Айв разработали первый интерфейс Iphone и iPad, опираясь на этот стиль. Если покопаться в памяти, можно вспомнить, что все иконки на рабочем столе телефона практически в точности отображали физические элементы (тени, цвета). Тим Кук позже немного изменил стилистику ОС вместе с Iphone 5s и все элементы были значительно упрощены (стали больше напоминать 2D-изображения).
Логика такова: дизайн вещей нужно приблизить к тому, что люди привыкли видеть в реальной жизни.
Скевоморфизм сегодня переживает сильные изменения. 2D-эпоха постепенно деформируется, стиль развивается и переходит в стадию неоскевоморфизма.
Новое осмысление данного стиля предполагает скрупулезную работу с тенями и формами, чтобы элементы были похожи на физические кнопки. Однако сейчас массовый потребитель не готов к таким кардинальным изменениям в паттерне пользования ОС, но со временем и этот стиль станет трендом
Скевоморфизм. Этот стиль в UI/UX-дизайне выступает своеобразным связующим звеном между реальным миром и цифровым пространством. Он упрощает адаптацию пользователя к новым технологиям. Здесь активно применяют визуальные подсказки из реальной жизни, чтобы элементы интерфейса выглядели более знакомо и привычно.
По мере того как пользователи становились более технологически подкованными, скевоморфизм утратил актуальность. Однако сейчас люди настолько привыкли к стандартизированному представлению интерфейсов, что оптимизированные системы практически не вызывают эмоций. Возврат к реалистичности в UI/UX-дизайне направлен на привлечение внимания.
Неоскевоморфизм (неоморфизм). Стал продолжение и переосмыслением тренда на реалистичную рисовку кнопок и иконок. Этот стиль также известен как мягкий пользовательский интерфейс. В этом случае сочетаются элементы скевоморфизма и плоского дизайна. Цифровые интерфейсы выглядят как реальные аналоги. При этом поддерживается минималистский стиль и двухмерность.
Неоморфизм визуально привлекательный, но смотрится революционно: в реальных проектах пока не многие бренды решаются его использовать.
В этом году во многом остаются актуальны тренды прошлого года:
Очень близкий мне тренд на использование антиквы. Причём не только в заголовках, но и в наборном тексте, что особенно актуально для креативных проектов. От гротесков все немного подустали. Я за собой тоже замечаю, что часто использую антикву в проектах.
Всё так же остаются актуальными 3D-элементы особенно из реалистичных материалов. Часто они используются вместе с анимацией для вау-эффекта. Этот тренд, я думаю, с нами ещё надолго.
Активно применяют сложные градиенты и голографические эффекты, причём как в вебе, так и в айдентике, и дизайне упаковки.
И последний тренд, о котором я хочу сказать — это гигантские подвалы, с очень крупным логотипом или типографикой. Этот тренд поможет добавить яркий штрих в заключительное впечатление о сайте.
Антиквы. Это шрифты с засечками. Они выглядят грациозно и изящно. Их часто применяют в сфере искусства. Однако в UI/UX-дизайне антиквы следует использовать аккуратно. Нужно продумывать, какие эмоции вызовет шрифт и насколько он соответствует ДНК бренда. Также скорее всего к антикве потребуется подобрать шрифтовую пару: многие современные шрифты с засечками плохо читаются в мелком масштабе и подходят только для заголовков.
3D-элементы. Смотрятся впечатляюще, особенно в сочетании с анимацией, когда их можно рассмотреть с разных сторон. Это отличный приём для привлечения внимания. Но при использовании объёмных элементов важно не перегружать страницу. Слишком большое количество 3D-объектов рассеивает фокус и стирает акценты.
Сложные градиенты. Предполагают плавные переходы между несколькими цветами. Благодаря этому удаётся создавать яркие и футуристичные решения, которые ассоциируются с современными технологиями. Главное тут — грамотно подобрать цветовую схему, чтобы в итоге не получить «вырвиглазный» дизайн.
Голографические эффекты. Помогут добавить цвета в нейтральные интерфейсы. Как правило, здесь выбирают один оттенок и представляют его в радужных переливах, а затем выделяют в нём цветовые акценты. Для данного направления характерны яркие сверкающие цвета, округлые абстрактные формы, неоновые текстуры.
Гигантские подвалы (футеры). Становятся своеобразной «изюминкой» дизайна. Толстый футер (fat footer) выполняет роль помощника и экономит время, если пользователь захочет вернуться к определённому разделу или найти важную информацию. Помимо брендовых элементов здесь указывают ссылки на важные разделы, дублируют навигационное меню, публикуют контактные данные, размещают формы обратной связи и CTA-кнопки.
Один из основных трендов — бесшовные переходы. Здесь я согласен с цитатой дизайнера Сергея Гурова о том, что бесшовные переходы — это когда ключевые элементы дизайна плавно переходят друг в друга, создавая ощущение непрерывности и единства навигации и взаимодействия.
Бесшовные переходы. Это не новая тенденция, но она сохраняет популярность за счёт своей элегантности и гармоничности. С помощью плавных переходов между отдельными элементами можно улучшить пользовательский опыт и сделать навигацию более интуитивной. Отличительная черта бесшовных переходов — отсутствие видимых перерывов или прыжков между разделами и блоками. Пользователь может безотрывно следовать сценарию без необходимости переключать внимание.
Основные тренды UI/UX-дизайна на 2024 год:
Главное в UI/UX-дизайне 2024 года — максимально удобные и понятные интерфейсы, сопровождение пользователя на протяжении всего пути с помощью визуальных подсказок и цветовых акцентов, смягчение «острых углов» во взаимодействии. Но забота об удобстве не отменяет важности визуально привлекательного дизайна. От лаконичных плоских заливок и простых шрифтов люди уже устали, поэтому усиливаются тренды на градиенты, антиквы, использование 3D.
Внутри конструктора Unisender — ИИ-ассистент. Поможет составить тему, проверить ошибки в тексте, нарисовать картинку. И даст рекомендации как маркетолог или психолог.
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.
