9 инновационных трендов в веб-дизайне на 2022 год

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

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

9 главных тенденций веб-дизайна на 2022 год:

  • Дизайн в стиле Memphis

  • Типографика в главном баннере (hero image)

  • Ретро революция

  • Видимые границы

  • Вовлекающий интерактив

  • Необрутализм

  • Движущийся текст

  • Креативный скроллинг

  • Графика, нарисованная от руки


1. Дизайн в стиле Memphis

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

2057E2B2-1747-463C-BE77-3C9B05510782.png

By Aneley

76065E07-3722-4447-B3C8-7FD52B0F9530.png

By Iconic Graphics

3C88B9EC-A8E6-4563-89F0-D7B0C5675C2B.png

By MASER

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

B882EC56-B8C9-408D-BF30-748291EF39F6.png

By e2infinity

72357B33-407D-4829-A6AD-9FF08C617D3E.png

By Adam Muflihun

A0720D53-6BCD-4B07-B1B0-0E99BE4CE0B3.png

By Valeriia Suvorova via Behance


2. Типографика в главном баннере (hero image)*

(*здесь и далее под hero image, переведенном как “главный баннер” или “первый экран”, подразумевается первый экран главной страницы - прим.переводчика)

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

04FD9F6C-961C-4DAD-B0CC-A89BCD4F25DF.png

By jonasgo

5B8A3188-10AF-478C-9BB6-88E6DFB07307.png

By Bluesjay

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

736FA12D-2B26-4F0F-B418-440548659E34.png

By Bluesjay

94673947-F03C-42E2-9FCE-4FBBB90E03E4.png

By Sebastian

“В веб-дизайне в целом меня всегда вдохновляет хорошая типографика, и как часть дизайна, и как самостоятельный элемент”

- Vl@daS, дизайнер 99designs by Vista

485EA608-D6E3-40B6-A966-3C22516A92FD.png

By malzi.

7A0BB07E-8756-4B6C-B5C5-9CE33B4AE2C7.png

By Bluesjay

C692BF49-80D8-430C-A986-6A1FC6166B83.jpeg

By Jack Kingslain

“При использовании типографики мы получаем много пространства для сочетания с необычными элементами и свежими цветами - это путь в будущее!”

- adamk, дизайнер 99designs by Vista


3. Ретро революция

Поскольку появление Всемирной паутины становится все более отдаленным воспоминанием, многообещающие веб-дизайнеры наших дней черпают вдохновение из тех ранних “времен Дикого Запада”. Так называемый стиль “Web 1.0” 90-х годов отличался яркими цветами фона, видимой разметкой таблиц и роботизированными шрифтами, такими как Courier.

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

317DA3B1-2F37-4419-9192-1A659EB80B8C.png

By Hiroshy

31838883-DE7F-4558-8FB5-F33427943C68.png

via curry.cafe

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


BCBDED2F-98C8-4173-A718-C12898B6B491.png

via starface.world

DFBF0CC9-F232-4354-B6B0-C7DC2EF1465D.png

By Ruxandra Nastase via Dribbble

FB4FE0E8-E953-41BE-AF05-B02DB6469732.png

By Max Osichka via Dribbble

“2020-е годы когда-то считались будущим дизайна и технологий. Сейчас мы отворачиваемся от безупречного минимализма настоящего и смотрим в прошлое в поисках вдохновения”

- Джастин Хамра, арт-директор 99designs by Vista

59E33D90-CF66-4576-B3B4-523E6244CD26.jpeg

By Ana Rumenović via Dribbble

AD872786-7B0D-4BFF-AFEB-5C74DB10071D.png

via goliath-entertainment.com


4. Видимые границы

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

D1B0C022-9581-46A8-BC51-6775150D1B54.png

By logogram

3E478901-3EAA-4427-9696-9DB259D844F8.png

By Ashik via Dribbble

6C3BC23A-C9E9-4A52-A520-32588857707A.png

By Soumitro Sobuj via Dribbble

B5D4F7A0-E8AF-473E-B037-69AB7DFBBB91.png

By Gavrisov Dmitri via Dribbble

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

AF8680BD-3CFA-4D28-A583-1DDF12A60759.png

By Anastasia Fesiuk via Behance

D925A7D7-DE85-493A-8F4C-F2082115D744.png

By JJay Jay via Behance

07B5D234-7D92-4AF5-9570-48BA26D9248B.png

By Arvin Aradhana via Dribbble

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

- Джастин Хамра, арт-директор 99designs by Vista

168E49E3-C646-46B0-A080-FF5DFA010861.png

By Ashik via Dribbble


5. Вовлекающие интерактивы

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


via Spotify


via weareimpero.com

Эти взаимодействия выходят за рамки прокрутки (которая может быть относительно пассивной) для поощрения более осознанного взаимодействия со страницей, например, клика, пролистывания и перетаскивания.

Ключ к этому тренду - создать немного загадки: например, следующий за курсором крошечный черный куб на сайте LEQB, или явно отсутствующая навигация на сайте Chiara Luzzana, - и посетителю предлагается использовать определенную форму взаимодействия, чтобы узнать, как работает страница. Это создает новые впечатления, которые заставляют пользователей сайта чувствовать себя исследователями, активно кликающими по странице, чтобы раскрыть ее секреты.


via le-qb.com


via chiaraluzzana.com

“Простой и при этом эффективный дизайн дополнен современными визуальными hover-эффектами”

- Vl@daS, дизайнер 99designs by Vista


via kim-jooyoung.com


via monopo.london


6. Необрутализм

Необрутализм происходит от классических корней брутализма, архитектурного движения 50–70-х годов, в котором упор делался на сырые, необработанные материалы, такие как бетон. Брутализм набирает обороты в веб-дизайне с момента его цифрового возрождения в 2014 году, как указано на сайте brutalistwebsites.com. Примитивный HTML без применения стилей, простые фоны, асимметричные макеты, стандартные компьютерные шрифты и необработанные фотографии - все это характеризует цифровой брутализм.

C401A643-D460-45D9-9FA9-DC07EF15CB4C.png

By Maia I


By Luka Marr via Dribbble

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

2BD2980E-2A1F-49FA-9A38-A460DF7EE981.gif


By Tee Tran via Dribbble


“Брутализм всегда был связан с минимализмом и грубыми материалами. Необрутализм берет основные ценности брутализма, уточняет и оживляет их. Сильный, смелый и яркий”

- Джастин Хамра, арт-директор 99designs by Vista

8535F052-C96A-4756-AD9E-B81C4E0D517E.png

via cargo.site


By Aleksandar Igrošanac via Dribbble


7. Движущийся текст

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


via esfuerzomezcal.com


via vitaarchitecture.com

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


via chungiyoo.com


via vancouverartbookfair.com


“Движущийся текст станет заметным трендом 2022 года. Мы живем в цифровом мире, и круто, что мы можем наблюдать разные забавные способы использовать это преимущество в мире шрифтов - создавать живые дышащие буквы”

- Ариан Бозорг, комьюнити-менеджер 99designs by Vista


via spielzeit.jungesschauspielhaus.de


via enjoylunacoffee.com


8. Креативный скроллинг

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


via uncannyvalley.studio


via tote.design/sirup/

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

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


via stonestyle.co.th


via dgstudio.com

“Простая, и в то же время элегантная интерактивная прокрутка - заметный тренд веб-дизайна на 2022 год”

- Халед Лиуи, Тим лид Студии творческого производства в Vista


via drinkcann.com


via kikk.be


9. Графика, нарисованная от руки

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

28F4D332-DFAF-4FEB-AB87-B83EC86C1E48.png

By Brent & Jo Studio

5BD5E8A5-5B4B-4841-9891-5223F8FF2B2D.jpeg

By Realysys

5988EF13-F400-40F1-95AC-BCCF2E0F1012.png

By Sudip Dutta

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

“Создавайте грубо, очевидно от руки, чтобы выделиться из толпы”

- c-artworker, дизайнер 99designs by Vista

64038B22-F702-4106-8527-1F3DE9F1D5CB.png

via inapsquare.com

8721AF1F-CA74-4B03-83CB-7EE4CD7109DD.jpeg

By andrei2709

0327E996-0FD0-4521-89C8-37E45E4EEA90.png

By Bernardo Henning

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

- Реза Эрнанда, дизайнер 99designs by Vista



Самое интересное