Веб-дизайн всегда смотрит в будущее. Цифровые технологии, будучи передовой областью, отражают самые свежие и смелые тренды в визуализации, анимации, вовлечении и погружении аудитории в интерактивную среду. Скорость появления и развития новых направлений в дизайне растет лавинообразно с каждым годом. Вот и 2022-й обещает много чего интересного.
В этом списке и возвращение стилистики 80-90-х годов, и крепнущая роль типографики, и массовое использование анимации. Визуальное исполнение дизайн-продуктов опирается на самые разнообразные стили — от высокотехнологичных до «хэнд-мейд».
1. Мемфис-дизайн
Тренд на минималистичный дизайн веб-интерфейсов завладел умами создателей сайтов. Массовость этого течения привела к тому, что современный интернет стал визуально однотипным. Решения унифицировались и типизировались, что привело к появлению универсальных шаблонов. Выделиться на этом фоне, работая в ключе минимализма, стало невозможно.
В поисках индивидуальности веб-дизайнеры обратились к популярному еще в 80-е годы мемфисскому стилю. Нередко мемфисская эстетика ассоциировалась с отсутствием вкуса из-за обилия хаотичных узоров, форм и сочетаний цветов. Однако именно красочность этого стиля, смелость и резкость сделали его противовесом к надоевшему и исчерпавшему себя минимализму.
2. Типографика в Hero Image
Hero Image – это центральный элемент первого экрана. Логично, что именно на него возложено донесение основного посыла сайта. Стремясь повысить информативность Hero Image, веб-дизайнеры все чаще используют типографику при его оформлении.
Одним из самых современных решений стал частичный или полный отказ от изображений на первом экране. Вместо картинки — текст, выполняющий функцию, сходную с функцией газетного заголовка. За счет типографики он привлекает внимание пользователя не только вербальной, но и визуальной составляющей. Правильно подобранный размер, форма и цвет шрифта, компоновка текста – все это делает типографический Hero Image самостоятельным элементом дизайна, не уступающим изображениям ни в эстетическом, ни в практическом плане.
Несмотря на кажущуюся простоту исполнения, такие Hero Image – это обширное поле для самовыражения дизайнера.
3. Ретро как путь в будущее
С каждым годом мы все дальше от судьбоносного момента появления Всемирной паутины. Разумеется, на заре своего становления интернет выглядел совершенно по-другому. Для условного Web 1.0 были характерны яркие цвета фона, видимые границы таблиц, использование роботизированных шрифтов (например, Courier и др.)
Удивительно, но все эти вещи постепенно возвращаются в работах молодых веб-дизайнеров, которые черпают вдохновение в ретростилистике подобно тому, как голливудские режиссеры вдохновлялись эстетикой Дикого Запада, создавая современный для себя кинематограф.
Что так притягивает в визуале интернета 90-х? Скорее всего, та свобода, которой пользовались веб-дизайнеры до появления правил и канонов, до того как веб-дизайн в принципе стал отдельной профессией. Хорошо это или плохо, но веб тогда был средой не ограниченного никакими рамками творчества.
Возвращение к истокам в визуале жизнеспособно, потому что опирается не на стихийные эксперименты, а на солидный коллективный опыт последних 30 лет.
4. Видимые границы
Видимые границы таблиц и других элементов – безусловный атрибут раннего Web. Позже от них стали уходить, делая все для создания той самой магии интернета, которую мы так любим. Это аккуратная организация пространства, кажущиеся самостоятельными произвольные формы элементов, «плавающих» в этом самом пространстве по автономным законам. Конечно, «самостоятельность» — не более чем иллюзия. Графические элементы страниц привязаны к сетке с точностью до пикселя, а любые их передвижения регламентированы кодом.
В 2022 году веб-дизайнеры взяли курс на возвращение реалистичности в визуал. Современные макеты страниц больше не «стесняются» видимых границ, которые, в свою очередь, сильно облегчают понимание структуры и пространственной логики сайта. Рамки и таблицы при правильном использовании позволяют фокусировать внимание пользователя на важных элементах, например на call-to-action или ценной коммерческой информации.
С точки зрения стилистики видимые границы прекрасно укладываются в тренд возвращения 90-х годов.
5. Вовлекающая интерактивность
Мы уже стали свидетелями того, как анимация захватила цифровое пространство. Она и раньше играла немалую роль, но в 2022 году ей по силам стать ключевым инструментом интерактивного взаимодействия с пользователем.
Интерактивность перешагнет привычные границы – если взаимодействие пользователя со страницей в течение долгого времени сводилось к скроллингу, теперь оно станет куда более глубоким и наполненным.
Новые типы действий пользователю будут объяснять анимированные элементы. Мгновенное обучение интерактивному новоязу позволит уйти от привычных шаблонов построения виртуального пространства. Пользователь совершенно точно будет больше кликать и дрэг-энд-дропать. Из обычного потребителя визуальной, звуковой и текстовой информации он превратится в того, кто непосредственно организует для себя индивидуальную среду получения этой информации, используя интерактивные инструменты.
6. Необрутализм
Брутализм – это популярное в 50-70-х годах прошлого века эстетическое течение, пришедшее в дизайн из архитектуры. Оригинальная стилистика предполагала обильное использование грубых необработанных форм и поверхностей, к примеру бетона.
В веб-дизайн брутализм мигрировал с приставкой «нео» еще в 2014 году и не теряет своей актуальности по сей день. Для цифровой инкарнации брутализма характерны такие черты, как базовые стили HTML, простой фон без нагромождения визуальных компонентов, иногда асимметричная компоновка элементов в макете, компьютерные шрифты и фотографии без обработки.
Суровый необрутализм за счет резкого контраста с более спокойными стилями действительно способен приковать внимание пользователя и удержать его благодаря жесткости и «честности».
Впрочем, 2022-й несет определенные перемены. Необрутализм, вероятнее всего, утратит часть своей резкости и приобретет менее экстремальные черты. Связано это, в первую очередь, с клиентским запросом на разработку веб-продуктов – не так много компаний готовы презентовать себя в настолько авангардном ключе.
В общем-то, это повторение судьбы прародителя. Именно стремление к более спокойной эстетике в свое время привело к постепенному смягчению брутализма в архитектуре.
7. Движущиеся шрифты
Движущийся шрифт – это один из аспектов развития анимации в веб. Основной функцией типографики всегда была передача информации, но «оживление» шрифтов позволяет более эффективно захватывать внимание пользователей.
Сама по себе анимация не новшество. Но, как правило, ее применяют для иллюстраций, элементов пользовательского интерфейса или переходов между страницами сайта. Именно поэтому анимированный текст смотрится достаточно свежо и неожиданно.
Движение текста выделяет его на общем фоне и концентрирует внимание пользователя, благодаря чему анимированная типографика так плотно вошла в список самых жизнеспособных трендов веб-дизайна в наступившем году.
8. Креативные методы скроллинга
Скроллинг – это самый распространенный тип пользовательского взаимодействия со страницей. В 2022 году с помощью современных инструментов анимации это взаимодействие существенно расшириться. Скролить придется больше, но обычная прокрутка информации станет настоящим путешествием, облеченным в художественные рамки.
Поскольку сам механизм прокрутки в веб остается прежним, удивлять пользователя дизайнеры планируют уникальным визуальным опытом. Уже сейчас заметно, как обычные страницы за счет нестандартного оформления скроллинга превращаются в живые интерактивные миры. Инструментарий широк – от использования причудливых психоделических образов до эффекта параллакса, то есть иллюзии объемного движения и пространства.
Среди общих принципов анимированной прокрутки стоит отметить вынесение центрального, «якорного» элемента на первый план. Он может иметь форму «стрелы», которая указывает пользователю на правильное направление прокрутки, а также видоизменяться по мере скроллинга в том или ином направлении. В любом случае анимированные элементы призваны помогать и направлять пользователя.
9. Хэнд-мейд графика
Технические возможности позволяют создавать графику любого уровня. Однако сложный и нарочито «компьютерный» визуал лишает сайт главного – индивидуальности. Одним из способов создания визуально уникальных, по-настоящему авторских интерфейсов стала ручная графика.
К элементам DIY-графики относятся и стилизации под детские рисунки, и нарочито небрежные наброски, и даже разнообразные каракули. Разумеется, и выбор цветовой палитры не ограничен никакими условностями. Этот стиль дает свободу самовыражения, а его эстетика ломает в восприятии пользователя границу между офлайн и веб-пространствами. Немного грубый, но по-настоящему рукотворный визуал очеловечивает цифровые интерфейсы и позволяет выделиться на фоне однотипных сайтов.
Что-то из новшеств – лишь хорошо забытое старое, возвращающее нас в прошлые десятилетия. Что-то – революционные технологии, призванные перевернуть наше представление о реальности. Но основной мотив появления этих трендов один – дарить радость пользователю и расширять его возможности в веб-среде.
А с какими из перечисленных трендов вы уже встречались на просторах интернета? Делитесь своим мнением и опытом в комментариях.