Найти тему
Дайте микрофон!

3 главных тренда веб-дизайна 2023 года

Оглавление

Сегодня человек в среднем тратит около трети суточного времени на виртуальную реальность, созданную другими людьми, и далеко не всегда это рабочее время. Его сознание оказывается захваченным виртуальной реальностью, которая представлена, по сути, лишь тремя типами графических элементов – указателем, фоном и функциональной кнопкой. Однако, эти три элемента не только позволяют ему производить бесконечное количество операций, от написания текста до перевода денег на другой конец света, или создания виртуальных 3d-скульптур, но и просто увлекают его своей эстетикой, новыми эффектами, новым опытом.

Фотография из проекта Эрика Пикерсгилла "Удаленные" (Eric Pickersgill ‘Removed’), в котором он "удалил" с фотографий все гаджеты, которым пользуются люди,
Фотография из проекта Эрика Пикерсгилла "Удаленные" (Eric Pickersgill ‘Removed’), в котором он "удалил" с фотографий все гаджеты, которым пользуются люди,

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

Итак, вот три главных тренда веб-дизайна 2023 года.

1. Скроллинг вытесняет таппинг

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

Скроллинг на https://admireamaze.debijenkorf.nl/
Скроллинг на https://admireamaze.debijenkorf.nl/

Скроллинг перемещает экран не только вверх-вниз, или влево-вправо, он создает на экране ощущение объемного пространства, благодаря технологии parallax scrolling.

Скроллинг на https://magic.estudionk.com/
Скроллинг на https://magic.estudionk.com/

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

Параллакс-скроллинг на https://www.sbs.com.au/theboat/
Параллакс-скроллинг на https://www.sbs.com.au/theboat/

Главный тренд 2023 года – параллакс-зум-скроллинг (parallax zoom scrolling), посредством которого эффект объема становится более реальным, создавая ощущение перемещения вглубь экрана и обратно.

Параллакс-зум-скроллинг на  https://the-goonies.webflow.io/
Параллакс-зум-скроллинг на https://the-goonies.webflow.io/

2. Гипнотизирующие эффекты

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

https://www.moooi.com/en/a-life-extraordinary#tokyo-blue
https://www.moooi.com/en/a-life-extraordinary#tokyo-blue

Множество ярких динамичных объектов, наполняющих экран компьютера, захватывают пользователя.

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

https://www.thepleasurepursuit.com/en_us?_ga=2.161793343.288444837.1671853970-1385239125.1671853970&skip-tutorial=true
https://www.thepleasurepursuit.com/en_us?_ga=2.161793343.288444837.1671853970-1385239125.1671853970&skip-tutorial=true

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

https://kirifuda.co.jp/works/
https://kirifuda.co.jp/works/

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

Страница загрузки на  https://www.rachelbavaresco.com/
Страница загрузки на https://www.rachelbavaresco.com/

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

Курсор на https://shapefarm.net/
Курсор на https://shapefarm.net/

Двигаться может все: фон – сам по себе, или при наведении курсора, – меню, иконки продуктов, работы из вашего портфолио – абсолютно все! Каждый скроллинг должен выдавать новую порцию двигающихся текстов и изображений.

https://vos9x.com/
https://vos9x.com/

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

3. 3d сменяет 2d

Виртуальная реальность стремится отразить трехмерность реального мира. Наряду с Parallax Zoom Scrolling это стремление проявляется в использовании 3D-illustrations. Они могут использоваться по-разному. Например, как центральный элемент сайта, вокруг которого меняются изображения и текст при скроллинге или при драггинге. Или они могут быть просто элементом, привлекающим внимание.

Скроллинг на https://next.junni.co.jp/
Скроллинг на https://next.junni.co.jp/

3D-пространствоиспользуется реже, поскольку перегружает сайт, но брендовые магазины нередко используют эту технологию. Например, посещение виртуального магазина Lacoste почти не отличается от похода в настоящий, а виртуальная коллекция сумочек от Fendi больше напоминает музейную коллекцию.

https://www.fendi.com/baguette25/
https://www.fendi.com/baguette25/

Один из трендов нового года – это клейморфизм. Элементы интерфейса и изображения людей, словно вылепленные из пластилина, все чаще используются при оформлении сайтов, создавая ощущение объемного пространства за плоским экраном. 3d-фигурки, выполненные в этом стиле, можно встретить и в недавнем проекте компании Meta “Horizon World”, и на сайте компании, продающей мороженое.

Клейморфизм https://humans.wannathis.one/
Клейморфизм https://humans.wannathis.one/

2D в трендах присутствует только как нечто, о чем можно поностальгировать. Например, набирают популярность сайты, выполненные в стиле Scrapbook, или имитирующие эстетику Y2K из 90-х.

Y2K на https://www.attentive.com/holiday
Y2K на https://www.attentive.com/holiday

Заключение

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