Тренды в веб-дизайне 2022: идеи запоминающегося UX

Обсуждаем тренды веб-дизайна 2022 года и вдохновляемся примерами. Общая тенденция – энергичное использование уже известных в вебе трендов для создания запоминающегося пользовательского опыта. Идеи небольшого хаоса становятся популярным решением Web/UX/UI дизайнеров в 2022 году. Подобраны проекты тех, кто в поисках уникальной индивидуальности идет нестандартным путем и исследует весь спектр возможностей.

Веб-дизайн до сих пор переживает тенденцию к упрощению, притом что эстетика с выровненной упорядоченностью может совершенно не подходить масштабу и задачам ресурса. Хотя подход не для всех, живой и энергичный хаос – шаг назад от минималистичных концепций сайтов 2021 г. Итак, ради незабываемого UX: смелые идеи, новые фишки и тенденции веб-дизайна на 2022 год.

1. 3d иллюстрации

2. CGI графика

3. Синтвейв в стиле 80-х

4. Параллакс

5. Мультяшные иллюстрации 2d и анимация

6. Реальные объекты как часть пользовательского опыта

7. Брутализм

8. Sci-Fi в стиле хай-тек

9. Глитч эффекты

10. Психоделические комбинации цветов

1. 3d иллюстрации

3D иллюстрации широко использовались UI-дизайнерами в 2021 году, Будут еще популярней в 2022-м, особенно в смешанных стилях с 2D/3D графикой, превращающейся в 3D и 2D дизайн. Тренд особенно актуален для приложений в мультяшном стиле с мягкими нежными цветами. Три главных направления:

• Мультяшные персонажи 3D – порой несоразмерные и не всегда оправданные, напоминающие «старый фирменный стиль». Но такие интересные и правдоподобные
• Вырезанные фигурки 3D, имитирующие 2D объекты в трехмерном окружении. Красиво смотрится с параллакс-эффектом, а наведя указатель можно «покрутить» группу иллюстраций и насладиться 3D
• Третий субтренд: комикс-стиль с 3D аналогами реальных людей

3D-персонажи сайта 1C:БухОбслуживание

3D анимация на сайте Algoan

Лендинг французской компании Leroy Merlin

Сервис аналитики контента соцсетей Popsters

2. CGI графика

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

Степень доверия к сайту напрямую зависит от качества графики. От 3D-художника требуется большое мастерство (Cinema 4D, ZBrush или Maya). Но сайту не нужна синематика как в игре. Для 3d CGI визуализации ни к чему сложные длинные сцены и гиперреализм, достаточно полуабстракции с анимированием изображений CGI.

Lady Gaga X Dom Perignon

CGI тренд на сайте NAOZ

CGI тренд на сайте RESN

3. Синтвейв в стиле 80-х

Тренд из мира музыки, тв-шоу и 80-х. Ретро-футуристический неоновый стиль синтвейв узнаваем по темным оттенкам, сияющим цветам и сеткам. Эстетика ночного города вызывает ностальгию по прошлым десятилетиям. Почувствуйте ее в дизайнах 2022 года. Главные идеи тренда:

• Функциональная простота улучшает восприятие
• Энергичный, яркий ретровейв – стиль интригует
• Атмосферный «погружающий» дизайн запоминается своей индивидуальностью

Тренд в дизайне Duft

Неоновый сайт Pluto App

Неоновый сайт Nesh

4. Параллакс

Несколько лет parallax украшал сайты, но из-за чрезмерностей и нерациональности тренд пошел на спад. На пике популярности эффект был неотъемлемой частью прокрутки, но порой непродуманным. Это ухудшало юзабилити и быстродействие, приходилось много скролить.

После затишья…

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

Сайт жилого комплекса Энитео

Пример параллакса в дизайне Kalso

Горизонтальный параллакс на Ray-Ban

Параллакс в дизайне Develop Press

5. Мультяшные 2d и анимация

Если не учитывать с 3D совмещений, 2D-иллюстрации самостоятельно сформировали  в вебе направление мультипликационного стиля.

Существуют три подхода:

• Анимацией мультяшных 2D персонажей & предметов украсить в целом простой дизайн. Это может быть: блок hero, прелоадер страниц, карикатурные герои в ключевых секциях
• Мультяшный / креативный интерфейс –  персонаж не обязателен, когда стиль определяет графика, кнопочки, меню… к примеру: toggl, lunchbox, culturally, ugly drinks, studio simpati  
• Совмещение 2D и 3D иллюстраций. Субтренд: 2D фигурки в 3D окружении

Сайт фриланс студии ITmaestro

Анимированные 2D-персонажи Circle of Life

Продающий одностраничник Crazy About Eggs

Фирменный 2D-персонаж Core Share

6. Реальные объекты — элементы дизайна

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

Продающий сайт Bloc Collective

Французский бренд альтернативного питания

Брутальный дизайн продающего напитки Roze Bunker

Продающий дизайн сайта Citrus Gins

Продающий сайт бренда питания Kiki Milk

7. Брутализм

Чем-то похож на антитренд – его «реакционность» привлекая интернет-аудиторию, уничтожает установившиеся практики дизайна. Лишая опыт пользования легкости, оптимистичный настрой заменяется брутальным. Брутальность как и матерное слово – намеренно добавляет откровения & уродливости.

Брутализм (от фр. «Beton brut») характеризовал архитектурный стиль после Второй мировой – с неприкрытыми коммуникациями. Суровая эстетика пост-апокалиптического. Пользователи брутальных сайтов уткнутся глазами в «сырой бетон». Ностальгия по смелому и честному? Что означает для веб-дизайна?

Бесцеремонное придание сайту простейшего вида: с базовыми безопасными цветами, простым взаимодействием, крупными / массивными шрифтами, минимизированной иерархией и игнорированием «лучших практик» web-дизайна. Никакой правильности, смыслы ограничить и побольше ностальгии к вебу 90-х.

Брутализм в дизайне сайта хлебозавода №9

Брутализм в дизайне бренд-агентства Hyper Tria

Cтиль брутализм в дизайне Studio Job

Брутализм на сайте агентства WeAreOSM

Брутальный стиль дизайна сайта Tyrus

Брутальный креатив сайта чешской Арт-студии

8. Sci-Fi в стиле хай-тек

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

Можно сочетать с CGI графикой, 3D-иллюстрациями и даже элементами ретро-футуристического синтвейва из 80-х, в частности со светящимися сетками и неоновыми цветами.

Завораживающий дизайн Kinetix Tech

Эффектный хай-тек дизайн JoyHub

Эффектная лаконичность дизайна Combis30SEC

9. Glitch эффекты

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

Французское дизайн агентство Big Youth

Chafik Jr Data and AI Engineer

Глитч эффекты сайта Melt the Fly

Портфолио фрилансера-разработчика

Японский сайт CG-аниме OBSOLETE

10. Психоделические комбинации цветов

В 2022-м нет никаких преград психоделическому тренду для всей сферы графического дизайна. Непримиримо яркие цветовые решения обращают любое взаимодействие в психоделическое турне по сайту, а искажения и плавящиеся элементы незабываемы. Что в основе? Если мы объединим предыдущие 9 тенденций веб-дизайна, результат будет абсолютно психоделическим.

Вдохновившись яркими переживаниями, веб-дизайнер выражает их в психоделической эстетике. Учитывая потребности аудиторий, стиль не для каждого случая – см. в примерах как уровень психоделического дизайна зависит от миссии сайта.

Сайт аркадной игры Crumbskees

Яркий эмоциональный сайт необанка Up Bank

Сайт студии Cartoon Network

Психоделическая графика и видеографика Dead Obies

В завершение

Можно заметить логичную связь между веб-дизайн тенденциями 2022 года, когда направления дополняют друг друга в различных комбинациях. Большинство создателей сайтов, ориентируясь на последние тренды допускают их сочетание. У вас наверняка есть свои наблюдения и обоснованные прогнозы…