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

 

Цвета и формы

 

1. Цвет года

 

Ежегодно Институт цвета Pantone объявляет цвет года, и главный цвет 2024 — нежный персиковый, PANTONE 13-1023 Peach Fuzz. Его философия — насладиться домашним теплом и уютом, сфокусироваться на настоящем рядом с нами. Самое время провести диджитал детокс и, что называется, «потрогать траву».

 

Peach Fuzz — цвет 2024 года по версии Pantone

 

Популярная визуальная соцсеть Pinterest, проанализировав тренды платформы, выделила палитру года из пяти ведущих цветов: Desert Orange («Пустынный оранжевый»), Gummy Pink («Розовый жевательный мармелад»), Aqua Blue («Синяя вода»), Moss Green («Зелёный мох»), Mocha Brown («Кофейно-коричневый»). Эта палитра продолжает тему натуральности и приземленности.

 

Палитра 2024 года от Pinterest

 

2. Градиенты

 

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

 

Платформа анализа финансовых операций Prism Data. Обратите внимание, как градиент подсвечивает кнопку.

Возможное взаимодействие интерфейса с пользователем.

 

3. Эксперименты с типографикой

 

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

 

Источник: retool.com

 

4. 3D и тотальный металл

 

3D-объекты помогают дизайнерам привлечь внимание, добавить глубины и реализма, даже футуристистичности в интерфейс. Часто используется для иллюстраций к абстрактным темам: криптовалюта, ИИ.В одном из своих проектов для команды разработчиков Xdev.team мы использовали 3D-модель планеты. Ее даже можно покрутить!

 

Наша разработка сайт xdev.team

 

Хромированные и алюминиевые элементы, особенно в их «текучем» состоянии.

 

Сайт креативного агенства Y2B

 

Актуальные стили

 

1. Бенто-дизайн

 

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

Apple использует Bento UI для продвижения своих продуктов

 

2. Минимализм

 

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

 

Источник: Dribble

 

3. Обтекаемые плашки

 

Тренд на оформление заголовков и блоков с добавлением фишки в виде плавно скошенных углов. Добавляет глубины минимализму, делает его более интересным за счёт «сломанных» и усложнённых простых форм.

 

Источник: Dribble

Контент и настроение

 

1. Эмоциональный первый экран

 

Чтобы сделать первые секунды контакта с пользователем не только информативными и функциональными, но и эмоциональными.

 

Анимация добавления товара в корзину в «Самокате»

 

2. Tone of voice

 

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

 

Микротексты «Додо Пиццы» и милые иллюстрации вызывают улыбку

 

3. Иллюстрации с характером

 

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

 

4. Видеоконтент

 

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

 

5. Инфографика

 

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

 

Разработанное нами приложение для криптоинвесторов BlackBricks пестрит цифрами и графиками

 

Комфорт пользователя

 

1. Микроанимации

 

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

 

Анимация добавления товара в корзину в «Самокате»

 

2. Тёмная тема

 

В 2024 это уже не просто модное веяние, а необходимость и стандарт.
За счёт тёмной палитры снижается нагрузка на зрение, а значит можно пользоваться приложением дольше и выбирать/совершать покупки. Этот тренд уже используют Apple, YouTube и Google.

 

Источник: dribbble.com

 

3. Гигантизм

 

В рамках тренда можно выделить крупные шрифты: заголовки на всю страницу, а и иногда и кнопки (микротренд на гигантские кнопки во весь экран). Помимо вау-эффекта повышается доступность интерфейса: такие заголовки легко читать, по кнопке легко попасть. А ещё это весело.

 

Пример с источника: Sculpting Harmony

 

Огромная кнопка CTA на сайте конференции Vercel Ship Выводы

 

Выводы

 

В 2024 году весь шопинг проходит через смартфон. Все внимание брендов сфокусировано на клиенте и его потребностях.

 

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

 

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

 

Пользователи составляют своё мнение о товаре по мнению других покупателей: читают отзывы, смотрят фото и видео.