Современные тренды и тенденции в веб дизайне 2022-2023

Больше видео, авторских анимаций, иммерсивного взаимодействия и адаптаций под конкретного пользователя. Возврат к эстетике 90-х и 00-х, нестареющая классика ар-деко, акцент на шрифт и месседж, брутальный дизайн «без дизайна», эстетика билбордов и уличной культуры, расцвет паттернов, абстракций и сложных форм, синтез графики и фото, возврат увлечения градиентами, эффект стекла и многогранность кристаллов. Вот к чему движется мир веб дизайна на рубеже 2022/2023.

Рассмотрим ключевые тренды с примерами подробнее.

Видео, анимация и моушн-дизайн

Наиболее мощный и долгоиграющий тренд гласит, что современные сайты должны быть «живыми», динамичными, отражающими некие процессы, течение, развитие. Как этого добиться? Есть десятки вариантов — можно выбирать любой, это все работает.

Начать с простого — пользователи любого возраста, статуса и типажа обожают видео. По статистике оно привлекает внимание и продает в РАЗЫ лучше, чем любые продающие тексты или статичные картинки. Видеофон на главном экране — это, возможно, первое и лучшее изменение, которого ваш сайт заслуживает прямо сейчас.

Отличным решением в духе времени станет также создание краткого ролика «О компании за 2 минуты», а также преобразование (хотя бы частичное) вашего портфолио в видео-формат: стало/было, timelapse работ, избранные моменты установки/монтажа/создания чего бы то ни было. Плюс — видеоотзывы. Пора забыть о благодарственных письмах с печатями. Люди НЕ верят текстам, но верят реальным людями, которых можно слышать и видеть.

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

Наконец, третий путь — это различные анимации:

• анимированный курсор меняющий свою форму или размер при наведении на те или иные блоки притягивает внимание, удерживая пользователя на сайте пока он «играет».
• индивидуализированные анимационные эффекты для окна загрузки, удерживающие внимание в процессе ожидания;
• анимация в логотипах;
• микро-анимация, когда на заставке пользователь видит не просто изображение, скажем, города, а города, в котором едут машины, идет дым из труб, открываются окна, пролетают птицы;
• анимация 360 градусов для демонстрации товаров (одежда, мебель, украшения, техника и проч.)

Объемный мир 3D

Проявлением того же самого тренда «в статике» является рост популярности 3D изображений. Они также по-своему делают мир на экране более живым и осязаемым, так как передают уже не плоскую картинку, а объем, то есть выводят сайт в новое пространственное измерение, делая его более выразительным.

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

Сложные формы и очертания

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

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

Комбинация фото с графикой

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

Абстракции, паттерны, наброски

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

И в мире веб дизайна 2022–2023 абстракции рулят! Равно как паттерны (повторяющиеся узоры) и рисунки «от руки» в духе эскизов, набросков. Все это следует в духе времени, взывая к обоим полушариям нашего мозга, заставляя не просто пассивно воспринимать готовое изображение, а переосмысливать его сквозь призму собственного опыта и мировоззрения.

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

Эффект стекла и кристаллов

Еще один «горячий» тренд 2022–2023 — это эффект стекла текстурах и/или кристалла в объемных изображениях. Его уже активно применяют в своем дизайне лидеры технологических отраслей, задающие тенденции, а, значит, вскоре это веяние распространится повсеместно.

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

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

Возврат в 90-е, на пороге 00-е

Знаете ли вы, что некоторые модные веяния цикличны и довольно предсказуемы? Еще недавно на пике популярности была стилистика 80-х, сегодня она уже приелась и приходит черед следующего десятилетия — возвратилась мода на 90-е, характерными особенностями которых считаются яркая цветовая палитра, металлические оттенки, зернистые текстуры, определенная брутальность.

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

Эти ретро-волны органично дополняет расцвет темы уличной культуры, граффити и психоделики в веб дизайне — перечисленные явления как раз зарождались и активно развивались в указанные десятилетия. Сегодня они уже негласно получили статус «официального» искусства и из контркультуры превратились в одно из ее направлений. Дизайнеры 2020-х хотят поднять их на новый уровень, переосмыслить и использовать в поиске свежих решений и подходов.

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

От ар-деко до минимализма

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

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

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

Минимализм остается ультрамодным и актуальным и сам по себе, не разбавленный иными стилями. В приоритете — функциональность и простота, то есть по максимуму убрать все лишнее, оставив только самое критичное.

Градиенты

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

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

Приглушенная палитра + экологичность и тема природы

На каждый тренд обычно находится контртренд совершенно противоположной направленности. Если вас не прельщают сочные оптимистичные градиенты — обратитесь к скандинавской сдержанности. Спокойная, пастельная приглушенная палитра природных оттенков, крафтовой бумаги, также на пике популярности. Оливковый, бежевый, бледно-розовый, серо-голубой, приглушенный горчичный, кремовый и фисташковый — идеально!

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

Монохромность и эстетика темного

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

После долгих лет «господства» светлого (белый фон, много воздуха, свободного пространства) наблюдается обратный откат в сторону темных тем сайтов. Они подсознательно воспринимаются более весомыми, эстетичными и премиальными.

Дизайн Zero/ брутализм / дизайн без картинок

Но есть немало людей, которым вовсе надоела бесконечная гонка за новыми визуальными формами выражения. Они уходят от всякой красивости и эстетики и предлагают контр-дизайн или его выверенное и нарочитое отсутствие, тем самым выделяясь среди тысяч «одинаково красивых» сайтов. Его приметы — простейшие формы и шрифты, минимальное количество цветов и графических элементов, отсылки в эре зарождения интернета (вспомним первые компьютеры с белыми шрифтами меню на синем экране) или внутреннему рабочему пространству разработчиков (схемы, стрелки, прототипы без попыток что-либо приукрасить).

Такое направление получило общее название брутализм, но не стоит путать его с плохим дизайном. В той же мере качественный естественный макияж далеко не равен полному отсутствию макияжа или его неумелому применению. В отличие от «плохих» сайтов брутальные проекты в духе контр-дизайна НЕ отпугивают, а привлекают клиентов, в них все на своих местах и работает на то, чтобы произвести нужное впечатление. В некотором смысле создание такого проекта даже сложнее, чем создание «красивого» сайта в традиционном понимании.

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

Акцентированный шрифт

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

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

Вообще шрифтовые решения в вебе переживают эру расцвета — все больше и больше проектов ставят во главу угла не цвет или формы, а именно шрифтовую составляющую. Чтобы разобраться в многообразии шрифтов и выбрать наиболее актуальные и привлекательные — мы подготовили отдельную статью на эту тему. https://iteraciya.ru/articles/kakie-samye-luchshie-shrifty-dlya-sayta-i-logotipa/

1 экран = 1 сообщение

Еще одно необычное и свежее визуальное решение, перекликающееся отчасти с предыдущей темой — это минималистичный экран в стилистике рекламного билборда или журнальной передовицы. На нем всего одно послание (это может быть суть вашего предложения, презентация нового товара, какая-то ударная новость и проч.), а фон или изображение под ним занимают 100% площади первого экрана сайта. Никаких дополнительных блоков, каруселей, ссылок, иконок объясняющих «почему стоит выбрать нас» и прочего «дробления» на мелкие элементы нижних уровней — все это допустимо (в умеренном количестве), но только не в верхней лицевой части сайта, где кроме этого главного месседжа обычно оставляют только неакцентированную строку меню.

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

Инклюзивность, доступность, адаптивность

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

Что это значит? Да, это и продуманные адаптивные версии для разных разрешений экранов, но не только — мобильная верстка уже давно подразумевается по умолчанию, сегодня пора выходить на новые уровни адаптивности.

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

Адаптация сайта может идти и на другом — аудиальном уровне. Вспомните, как много ваших знакомых в мессенджерах любят отправлять голосовые сообщения (и как много других просто вскипают от бешенства когда их получают)) Все люди совершенно разные. Но в современном мире веб дизайна никто не должен оставаться «за бортом». Создайте еще одно инклюзивное решение для тех, кто предпочитает сайт «слышать» (в силу личных особенностей, или временных обстоятельств — за рулем, плохое зрение, недостаточное освещение, другое) — что подразумевает доступ к озвучиванию определенных элементов/блоков, а также взаимодействие посредством голосовых команд.
__________

Это далеко не все набирающие силу тенденции в сфере веб дизайна, но, как нам кажется, наиболее яркие, характерные и многообещающие. Комбинируйте их в разных пропорциях, следуйте им, спорьте с ними или просто игнорируйте. Вы лучше всего знаете как должен «выглядеть» ваш бизнес в онлайн пространстве.

А мы поможем реализовать ваш проект и/или предложим свое видение, исходя из опыта работы в самых разных сферах бизнеса. Готовы выполнить концепт дизайна главной страницы вашего будущего сайта БЕСПЛАТНО. Потому что мы уверены в качестве своих услуг и НЕ пытаемся никому продать кота в мешке. <