Тренды в веб-дизайне 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 года, когда направления дополняют друг друга в различных комбинациях. Большинство создателей сайтов, ориентируясь на последние тренды допускают их сочетание. У вас наверняка есть свои наблюдения и обоснованные прогнозы…
4j74bp