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

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

Лично я, когда вхожу в какое-то море выбора, стараюсь начать с классификации. Нужно подобрать светильник — а какие категории светильников вообще бывают? Нужно подобрать холодильник… ну, вы поняли.

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

Не такой уж это и новый тренд. Давайте называть его «стабильным»? В каком году появился последний логотип запрещенной инста-сетки? В 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

Продолжение следует в части 2!