Тренды веб-дизайна в 2023 (часть 2)

Продолжаю показывать вам самые трендовые стили веб-дизайна. Первую часть читайте тут. Видео с примерами сайтов — выше.
Поехали!

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

Для примера, сайты применяющие анимированный шрифт:
atypikal.co
www.jomor.design
yes.vc

Интерактивные шрифты
smartupvisuals.com

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

Сайты применяющие огромный титульный текст:
www.azzerad.com
perturbator.com
kirifuda.co.jp
www.dariaizbash.com

Минимализм, конечно, дело хорошее. Но использование интересных интерактивных элементов — это гораздо лучше. Задача, как водится, заклчается в том, чтобы удержать посетителей на сайте. Используйте интерактивные элементы, такие как 3D-анимация, видео, графика и т.д., чтобы развлечь их. Это мотивирует к осмысленному взаимодействию со страницей: клику, прокрутке, и даже (!) к перетаскиванию.

Пример сайта:
www.moooi.com

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

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

Информация полученная с привлечением механики запоминается лучше, чем простой просмотр-прочтение.

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

Вспомните как нам приходилось прямо таки заставлять посетителя прокрутить вниз, анимируя стрелку «для бестолковых»?

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

Ссылки на сайты выполненные с использованием приема прокрутки или параллакса:
admireamaze.debijenkorf.nl
airpods-pro.dora.run

Фотобанки, фотобанки, фотобанковские белозубые лица… Надоело? Возьмите кисточку и нарисуйте иллюстрацию от руки. Будет необычно, привлекательно и уж точно уникально.

Открою вам секрет: 40% дизайнеров умеют рисовать. Еще 40% умеют «переводить» фотки в рисунки. А оставшиеся 20% мечтают о навыках тех самых 80%.

Сайты так долго пытались показать фотографический реализм, что в итоге вернулись к старым-добрым скетчам, дудлам, картун-картинкам и прочим милым «каля-малякам».

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

Дизайн с графикой хендмейд:
www.oatly.com
www.danieldiggle.com
themanyfacesof.com/leonardo-dicaprio

Вроде бы еще вчера нам казалось вершиной крутизны изобразить прозрачные кредитки на сайте какого-нибудь «продвинутого» банка. Однако, тренд глассморфизма с нами вот уже много лет. В конце каждого года он получает похоронку, а в начале следующего — новую жизнь.
Сайт ВТБ попал с таким «быстро устаревающим» трендом в номинанты международных конкурсов. Well done!

Примеры сайтов:
weareodyssey.com
decimalchain.com

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

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

Пример сайта в стиле коллаж:
titanichistory.tilda.ws

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

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

Примеры сайтов:
marketwise.io
designmodo.com
howmanyplants.com
chrono.fund

Чтобы понять что такое «неоморфизм», придется заглянуть в шпаргалку по определению смысла двух другим терминов. Итак,
«Скевоморфизм — это физический орнамент или элемент дизайна, который скопирован с формы другого объекта, но изготовлен из отличающихся материалов или иными методами. Примеры включают в себя керамику, украшенную имитацией заклёпок для схожести с аналогичными горшками, сделанными из металла[1], или компьютерный календарь, который имитирует внешний вид скрепления страниц бумажного настольного календаря.» — Wikipedia.

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

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

Примеры сайтов:
dribbble.com/Nespresso-Light..
dribbble.com/Adobe-CC-Asset...


PS
Третью часть с описанием трендов веб-дизайна читайте тут.