40 трендов в UI дизайне сайтов 2024 года

● Движение одного объекта относительно другого с разной скоростью по мере прокрутки сайта. Благодаря такой реализации создается ощутимая иллюзия объема;

● Зависимый параллакс от пользователя — такой вариант параллакса триггерится на движения мыши. Например, при движении мыши в сторону, анимированный объект перемещается в противоположную.

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

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

Реализовать этот эффект в веб-дизайне можно несколькими способами:

● 3D решения;

● Параллакс анимация;

● Наложение слоев друг на друга;

● Глассморфизм;

● Работа с тенями и т. д.

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

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

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

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

Еще один подводный камень: дизайнеры часто думают, что чтобы заменить курсор, достаточно просто изменить его иконку, но это не так. Нужно продумать, как будет выглядеть и вести себя курсор при разных состояниях: при наведении на ссылку, на кнопку, на объект, на карточку товара и т. д. В итоге может оказаться, что нужно отрисовать не 1 курсор, а 15−20, так как это инструмент, который подсказывает пользователю, как можно взаимодействовать с элементами на странице. Каким бы ни был крутым трендовым курсор, если при наведении на ссылку он изменится на пальчик из 99 года, то эффект будет испорчен, а такие недоработки встречаются на каждом втором сайте.

Кастомный курсор требует серьезной проработки кроссбраузерности, так как это стороннее решение, и не каждый браузер будет его поддерживать. Есть вероятность, что в каком-то браузере он не будет отображаться вообще, а это убьет юзабилити сайта, ведь пользователь не сможет с ним взаимодействовать. Поэтому кастомные решения нужно тестировать во всех доступных современных браузерах: Google Chrome, Yandex, Opera, FireFox, Safari, Edge.

Обратите внимание, что большинство трендов веб-дизайна направлены на то, чтобы добавить сайту объема и глубины, сделать его более атмосферным и интересным. Глассморфизм хорошо справляется с этой задачей, при этом не портит восприятие контента: он остается читаемым, заметным.

Тренд был заложен компанией Apple в 2013 году с выходом iOS 7, которая активно разрабатывает свои интерфейсы в стиле стекломорфизма. Такой дизайн выглядит премиально, сверхчисто, минималистично, современно и даже футуристично: напоминает прозрачные экраны с цветовой индикацией из фильмов о будущем.

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