Тренды веб-дизайна в 2023

Допустим, вам нужен в этом году веб-сайт. Но вы не знаете с чего начать его создание. Первый и главный вопрос от визуалов: а как мой сайт будет выглядеть? Можно взять вашего самого главного конкурента и сказать: «Хочу не хуже, чем у них». Это решение — самое простое и немножечко «не смарт». Поскольку «часто люди не знают, чего хотят, пока вы им это не покажете», не стоит разглядывать всё подряд. Лучше разбить этот информационный шквал на категории. Итак, чтобы не оказаться у разбитого дизайн-корыта, давайте определимся с основными трендами веб-дизайна.

Комплексный градиент

Клейморфизм

Бенто-дизайн

Мемфис

Веб-дизайн в стиле UI

Видимые контуры

Анимированный шрифт

Огромный текст

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

Прокрутка, параллакс

Графика хендмейд

Глассморфизм

Абстрактные иллюстрации и коллажи

Минимальный неоморфизм

Материальный дизайн

Ретро дизайн

Эстетика скрапбукинга

Самоперекрывающийся текст

Только текст

Не такой уж это и новый тренд. Давайте называть его «стабильным»? В каком году появился последний логотип запрещенной инста-сетки? В 2016-м. То есть, тренду «градиент» уже более семи лет! За это время он становится всё изощреннее. Почему популярность градиента не ослабевает? Просто, все природные цвета — по-сути своей градиентны. Вы никогда не найдете «чисто белой розы», «монотонно бурой свёклы» или «абсолютно синего неба» на этой планете. Кроме того, градиент создаёт иллюзию движения без какой-либо анимации. Любой минималистический дизайн слегка приправленный градиентными «выкрутасами» становится невероятно динамичным.

Для примера, сайты применяющие стиль комплексного градиента:

monopo.london

juliebonnemoy.com

www.winamp.com

sarahguo.com

vitaarchitecture.com

www.richardsancho.com

Несмотря на страшноватое название, у сайтов и рекламных материалов выполненных в этом стиле всегда свеженький, понятный и слегка шутливый вид. Все эти условные человечки и человеческие ручки встречаются нам с вами повсеместно. Давненько вы бывали в ПВЗ Сбермаркета? Там на стенах как раз представлены образы из популярной и бесплатной библиотеки клейморфизма. Клейморфизм образовался путем смешения четырех суб-трендов веб-дизайна:

1. светлые, пастельные и яркие цвета

2. большие угловые закругления

3. внешняя тень «по периметру», словно мы с вами светим на такую карточку фонариком сверху.

4. трехмерные фигуры.

Сайты выполненные в стиле клейморфизм:

humans.wannathis.one

christmas.wannathis.one

tolia.ge

matterapp.com

Термин Bento Box происходит из Японии, где «бенто» означало сервировать еду в разных прямоугольных блюдцах в свою очередь уложенных в прямоугольную коробку. Вот уже несколько лет Bento Box — это тенденция проектирования пользовательских интерфейсов. В основе стиля Bento лежат: визуальная иерархия и четкая, наглядная организация. Bento очень хорошо работает с небольшими прямоугольными экранами. То есть, с мобильными устройствами и везде, где требуется спроектировать адаптивный дизайн. Дизайн в стиле Bento выглядит современно и модно. Благодаря тому, что Bento используется такими ИТ-монстрами, как Apple и Microsoft, пользователям всегда понятен контент, организованный по его канонам.Bento лучше всего работает, когда вы разбиваете содержимое на небольшие (всегда прямоугольные!) фрагменты. Различные по размеру квадраты создают акцент: больше — значит важнее. Если в ячейки Bento добавить яркие цвета, позитивные шрифты и динамичные изображения, получится самый что ни на есть современный интерфейс. На сайте bentogrids.com накапливается подборка удачных примеров Бенто-дизайна.

Ностальгия… Именно такое чувство испытывают «бумеры», когда тренд дизайна родившийся в 80-х годах прошлого столетия, возвращается сюда — в 2023-й! Мемфис появился, как это часто бывает, на волне отвергания прежних тенденций. Новые технологии, материалы и футуристические веяния становились все более популярными. Мемфис выступал против жесткости модерна и минимализма. Мемфисс-дизайнеры стремились привнести в культуру «радикальное, смешное и возмутительное», смешать геометрию ар-деко с цветами в стиле поп-арт и мебельным шиком 1950-х годов.Большими поклонниками мемфиса были Карл Лагерфильд и Дэвид Боуи. А в массовой культуре этот стиль активно использовался во многих фильмах, в том числе в «Назад в будущее II».

Сегодня мемфис — это больше, чем просто тенденция в дизайне. Он нарушает типичные нормы и поощряет свежесть, креативность, уникальность и даже бунтарство дизайна. Однажды вы решаетесь обставить свою комнату в стиле Мемфис и всё… этот отважный отрезок жизни вы не забудете никогда. Будете вспоминать свой вызов шаблонам тепло и с улыбкой. Впрочем, про этот стиль я обещаю написать отдельную развернутую статью.

Ссылки на сайты выполненные в стиле мемфис:

upperquad.com

shapefarm.net

www.cartoonnetworkstudios.com

www.orchestredeparis.com/resonance

Ну вот и докатились мы с вами в своей классификации практически до тафталогии. Только вдумайтесь: я назвал для вас сей тренд «веб-дизайн в стиле компьютерного интерфейса». И тем не менее, этот тренд есть и набирает обороты. Есть такой сайт — Awwwords. Он публикует отбираемые сообществом «сайты дня», «месяца» и «года». Достаточно взглянуть на дизайн самого Awwwords, чтобы узнать в меню (которое находится внизу, [не]кстати) признаки UI-тренда.

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

Дизайн в стиле UI:

nebulos.webflow.io

dribbble.com/shots/21145885-IT-human-resou...

optimme.webflow.io

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

Да, «видимые контуры» (или «видимые границы») часто хорошо сочетаются со стилем «мемфис», как бы обуздывая его.

Примеры сайтов:

www.figma.com

www.physioasten.at

gumroad.com

shopify.supply

www.devrandogaroglu.com

Видео с примерами сайтов — ниже.

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

Для примера, сайты применяющие анимированный шрифт:

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

Чтобы понять что такое «неоморфизм», придется заглянуть в шпаргалку по определению смысла двух другим терминов. Итак,

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

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

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

Примеры дизайнов:

dribbble.com/Nespresso-Light..

dribbble.com/Adobe-CC-Asset...

Видео с примерами сайтов — ниже.

Да, он еще не устарел. Из года в год он остается в списке трендов.Но, разумеется, это больше, чем тренд. Это язык дизайна, который был представлен компанией Google еще в 2014 году. Чаще всего традиционный веб-дизайн выглядит простым и плоским. Именно здесь на помощь приходит Material design. Он позволяет использовать цвет и свет для создания эффекта текстур.Все вы наверняка слышали про «плоский дизайн». Но flat и material — это не одно и тоже. Material может делать то, чего не может flat. Я бы даже так сказал: плоский дизайн — это утюг и уравниловка, а материальный — это приятные мелкие неожиданности. И на первом месте — удобство пользователя.

Для примера, сайты применяющие стиль материального дизайна:

themeselection.com/item/materio-mui-react-nextjs-admin-template

pixinvent.com/materialize-material-design-admin-template

Для него еще нашли словосочетание «ретро-футуризм», представляете?! Как говорится, «Old is gold»!!

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

Посмотрите на сайт basement.studio — они не постеснялись сделать его в ретро-стиле!

Сайты применяющие стиль ретро-футуризм:

www.exclusiveprs.com

basement.studio

harvardfilmarchive.org

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

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

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

Пример сайта: hakaji.iojeongsteph.design.

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

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

В общем, протест принес свои плоды: текст, буквы которого налезают друг на друга и пухнут буквально на глазах — это и есть новый тренд.

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

Сайт выполненный с использованием приема самоперекрывающегося текста: www.santateresafest.ca.

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

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

Примеры дизайна:

os.agency

pp-fragment.com

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

Давайте перечислим тут все подмеченные нами в 2023 году тренды:

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

Счастливого вам дизайна!

Мой телеграм-канал тут Marketing guru.