WebValley Studio

40 трендов в UI дизайне сайтов 2022 года

С развитием технических возможностей для создания сайтов, тренды веб-дизайна появляются и исчезают за короткий срок, вплоть до месяца. Часто выбор такого тренда «моментум» приводит к ошибкам и неудачным проектам. Поэтому мы собрали 40 устойчивых и действительно классных трендов UI, которые по нашим прогнозам сохранят свою актуальность как минимум 1−2 года.
*Упомянутые в статье организации Facebook (Фейсбук, ФБ), Instagram (Инстаграм, Инста), Meta (Мета) — являются экстремистскими организациями, деятельность которых запрещена в РФ с 21 марта 2022 года

Устойчивые тренды веб‑дизайна

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

Асимметричная сетка

Сетка в веб-дизайне определяет вес объекта внутри композиции.

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

Симметричная сетка: текст расположен под фото, контент разбивается на 2 блока, не выглядит целостным

тренды веб дизайн

Асимметричная сетка позволяет расположить фото и текстовый контент внутри одного блока, создавая эффект единой композиции, за счет чего улучшается восприятие

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

Чередование симметричной и асимметричной сетки на сайте бренда Rino&Pelle

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

Видеофон

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

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

Видеообложка на сайте ТехноФорум. Проект WebValley Studio

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

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

Моушн дизайн и анимация

Моушн-дизайн добавляет динамичности объектам. Это анимация, которая приводит в движение элементы дизайна. Благодаря моушн, можно управлять вниманием пользователя и расставлять акценты. Тем не менее, моушн чаще используют в SMM, чем в дизайне сайтов, поскольку этот прием сложен в реализации, а также снижает производительность сайта и скорость его загрузки.

Есть 2 варианта реализации моушн анимации на сайте:

● SVG-анимация, которая проигрывается автоматически, либо при взаимодействии с ней (по скроллу, клику и т. д.). Она немного весит, но не всегда позволяет сделать что‑то сложное;
● С использованием видео, встраиваемого на сайт. Графика отрисовывается в Adobe After Effects или подобной программе. Это сложно, долго, дорого, и такая анимация часто весит дохреналлион мегабайт! Поэтому, если на сайте будет много моушн анимации, то он может страшно тупить.

Отсюда 2 вывода:

● Если на сайте используется моушн анимация, то она не должна много весить;
● Ее не должно быть много, иначе она будет отвлекать пользователя от изучения контента.

Ограничения моушн дизайна не дают использовать его повсеместно. Не каждому бизнесу нужна на сайте такая анимация. Большинство компаний откажутся от дорогого тяжелого вау‑эффекта в пользу скорости загрузки и простоты интерфейса.

Пример использования моушн дизайна на сайте

Формы и абстракции

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

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

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

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

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

Анимированные геометрические формы и абстракции на сайте WebValley Studio

Анимация

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

В веб-дизайне используются 2 вида анимации: интерактивная, эстетическая (эффектная).

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

При разработке сайта, в первую очередь, уделяется внимание интерактивной анимации. К ней относятся: аккуратная прорисовка линий, плавное появление текста из fade-in, прорисовка фотографий — всё, что задает атмосферу, погружает пользователя в дизайн-концепцию, формирует визуальное восприятие, вызывает правильные ассоциации с проектом. Чем более фестивальный сайт, чем меньше у него цель продавать и больше показать, какие мы классные и крутые, тем эстетической анимации будет больше, но она при этом не будет пошлой.

Несмотря на то, что анимация снижает скорость сайта, интерактивная анимация в современном веб-дизайне стала обязательной: пункты меню, кнопки и все кликабельные объекты должны быть анимированы, так как пользователи к этому привыкли. Если человек наводит курсор на карточку на сайте, а она не затемняется, не меняет размер — остается статичной, как догадаться, что эта карточка кликабельна, и, при нажатии на нее, можно перейти на какую-то другую страницу?

Темная тема

Тёмная тема существует давно, но трендом она стала только в последние 2 года. Крупные бренды вкладываются в разработку темных интерфейсов для своих сайтов, программ, приложений. Например, Facebook, Instagram, Vkontakte. Такой бум обусловлен несколькими факторами:

● Если темная тема сделана грамотно, она не давит на глаза. Причина в том, что интенсивность свечения становится меньше, чем у белых интерфейсов;

● Темная тема нередко позволяет создать более стильный дизайн, поскольку любой объект, который имеет цвет, выглядит ярче, сочнее и контрастнее на темном фоне, нежели на белом — это особенность нашего восприятия, так работает зрение. В темноте яркие светящиеся объекты мы видим лучше: сравните видимость фейерверка в дневное время и ночью. Посмотрите на огни ночного города: Шанхай, Нью-Йорк, — ночью они особенно красивы, потому что яркие огни и неоновые вывески максимально эффектно выглядят в темноте;

● Темная тема экономичнее расходует заряд аккумулятора смартфона.
тенденции по современному оформлению сайтов

Темная тема на сайте WebValley Studio

Примеры использования темной темы в веб дизайне

Сравнение светлой и темной темы в интерфейсе мобильного приложения

Пастельная палитра

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

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

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

Параллакс эффект

Анимация, которая всегда выглядит дорого, премиально, позволяет создать эффект движения, объема, глубины пространства.

Параллакс эффект реализуется на сайте тремя способами:

● Скольжение одного объекта относительно другого, например, визуальное проскальзывание фоновой картинки вниз относительно контента. Получается эффект окна;

Пример реализации параллакс-эффекта через скольжение одного объекта относительно другого

● Движение одного объекта относительно другого с разной скоростью по мере прокрутки сайта. Благодаря такой реализации создается ощутимая иллюзия объема;

Пример реализации параллакс-эффекта через движение объектов с разной скоростью

● Зависимый параллакс от пользователя — такой вариант параллакса триггерится на движения мыши. Например, при движении мыши в сторону, анимированный объект перемещается в противоположную.

Пример использования зависимой параллакс-анимации

3D-элементы

Трехмерная геометрия — шары, кубы, конусы — тренд веб-дизайна 2022. Ее использование обусловлено тем, что выросла производительность компьютеров и снизилась себестоимость разработки такой графики.
тренды в дизайне сайтов

Примеры использования 3D-элементов в веб-дизайне

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

Примеры использования анимированных 3D-объектов в веб-дизайне

3D-сцены

Это комбинация 3D графики и анимации, зачастую в пространстве. Создают кинематографический эффект за счет объема, ощущения пространства, теней, движения. Делают сайт нестандартнее, динамичнее и привлекательнее, чем простой плоский дизайн.

Пример сложной реалистичной анимированной 3D-графики

Пример 3D-сцены с использованием простых геометрических форм

Анимированные 3D-персонажи

Минус 3D сцен в том, что они все еще сильно тормозят загрузку сайта. Тяжело сделать трехмерную графику, чтобы она весила немного. Это одна из причин, почему компьютерные игры долгое время были в плохом разрешении, с угловатыми текстурами — устройства просто не могли рендерить красивую реалистичную графику.

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

Бесцветный или монохроматический UI

Монохром — устойчивый тренд. Это дизайн, который всегда выглядит контрастно и ярко, он заложен в самой природе: небо — тоже от части монохром.

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

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

Пример презентации New Mind Business School в монохроматическом UI. Проект WebValley Studio

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

Стильный дизайн сайта с использованием монохромной палитры

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

Пример монохромной палитры: основной цвет и его более темные и светлые оттенки

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

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

Дуотон

Выходцем из монохрома является дуотон — дизайн, в котором используется два основных цвета. Тренд добавляет проекту молодежности, задает динамику, энергичность. Несмотря на то, что используется всего 2 цвета, дуотон делает дизайн ярким и сочным, потому что за счет наложения тонов получается экспрессивный, броский визуал. Такой эффект стал популярен благодаря дизайну обложек на Spotify порядка 10 лет назад, после чего активно укрепился в обработке фотографий и после перешёл в дизайн всего :)

Пример использования дуатона в дизайне сайта

Баухаус

Баухаус — философия, которая пошла из немецкой архитектуры. Со временем этот стиль вышел за рамки строительной отрасли, став культурным наследием Германии.

Графический и веб-дизайн, выполненные в стиле баухаус, сочетают в себе трендовость, нестандартность, непривычное восприятие, позволяют создавать абстрактные композиции или целые иллюстрации из абстрактных фигур, вплоть до головы человека, сделанной из множества градиентных треугольников.
Для баухаус характерно большое количество используемых цветов (чаще тетрады — палитры из 4 акцентных цветов), при этом сохраняются принципы минимализма: простота, чистота, контрастность.
как выглядит современный сайт

Кроссовки Nike Air Max в стиле Баухаус

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

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

Цветные акценты на белом пространстве

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

Яркие цветные акценты на нейтральном фоне сайта WebValley Academy

Такой прием особенно популярен в дизайне приложений, поскольку привлекает внимание к кликабельным элементам и важным объектам интерфейса.
Готовы создать сайт прямо сейчас. А вы?

Эстетичный минимализм

Максимально устойчивый тренд, которому следуют все ведущие технологичные и digital компании: начиная от Apple, заканчивая нашей студией.

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

Сайт Apple: нет никакой сложной графики, просто черный, серый и белый цвет, крупные заголовки — на первый взгляд, ничего особенного. Но его невозможно не проскролить до конца. Такой эффект достигается за счет высокой контрастности, отсутствия лишних элементов — фокус внимания направлен на текст и фотографии, ничто не отвлекает от главной концепции.

В типографике выражается Антиквой (особенно что касается фэшн-индустрии), либо Гротеском (в сфере высоких технологий), и это, как правило, тонкие легкие начертания.

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

Крупная жирная типографика

Неоднозначный тренд. Крупная жирная типографика берет истоки в брутализме. Но брутализм, как стиль веб-дизайна, слишком радикален. Он ломает все принципы и правила, выражает бунт, несогласие со стандартами. Зачастую сайты в этом стиле выглядят откровенно трешово, причем не только с точки зрения UI, но и со стороны UX — на таком сайте невозможно что-то понять и найти. С другой стороны проект в брутализме выглядит креативно и круто до такой степени, что единственная эмоция, которая возникает «Твою мать, что здесь вообще происходит?». И по итогу человек остаётся. Такого результата действительно сложно добиться.

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

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


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

Эффект пространства и глубины

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

Реализация эффекта пространства и глубины: максимальное погружение, ощущение, что снег летит из экрана прямо в лицо

Реализовать этот эффект в веб-дизайне можно несколькими способами:


● 3D решения;

● Параллакс анимация;

● Наложение слоев друг на друга;

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

● Работа с тенями и т. д.

Использование эффекта пространства в дизайне интерфейса мобильного приложения

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

Реализация эффекта пространства и глубины за счет анимации и наложения слоёв

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

современные тренды в веб дизайне сайтов

Эффект пространства и глубины в статичном дизайне сайта: достигается за счет теней и наложения элементов

Микроанимация

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

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

Пример микроанимации на главной странице сайта WebValley Studio

Сплит-экраны

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

Пример простого сплит-экрана: в правой части фото, вызывающее эмоцию, слева — текстовый контент с призывом.

Этот прием известен давно, но современный тренд заключается в использовании сплит‑экранов в качестве навигационных блоков:
тренды веб дизайна сайтов

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

Чрезмерное негативное пространство

Белое пространство или воздух — это то, что можно назвать свободным пространством между элементами дизайна.

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

Пример чрезмерного негативного пространства на сайте Apple: крупные заголовки и изображения товара окруженные… ничем) За счет этого внимание акцентируется только на наушниках, не отвлекаясь ни на что больше.

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

Тени и градиенты

В тренде мягкие тени: приятные, пушистые, воздушные, которые создают эффект пространства, глубины.

Трендовые градиенты: плавные, полупрозрачные, многотонные, то есть состоящие из 3−4 и более цветов.

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

Трендовый многоцветный градиент на сайте WebValley Academy

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

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

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

Эффект свечения

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

Яркие жизнерадостные цвета

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

Нестандартное положение текста

Нестандартное положение текста на сайте — это следствие использования ассиметричных сеток и влияния брутализма. Такие сайты выглядят креативно, но не для всех проектов этот прием уместен. Если применять его неправильно, создается впечатление поехавшей верстки.

Нестандартное положение текста актуально для ниш связанных с технологиями, digital, ивент‑индустрией, архитектурой.

Разновидностью этого тренда является смещение отдельных строк или слов относительно остального текста. Такой прием используется в проектах, в которых с точки зрения визуальной эстетики, сделана ставка на типографику.

Проект выполнен студенткой WebValley Academy Анастасией Лян в рамках курса «PRO Web»

Обсудить проект

Идеальные иконки

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

Аккуратные воздушные иконки для презентации компании X-Merch. Проект WebValley Studio

Креативные кириллические шрифты

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

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

Акцендентный кириллический шрифт «ЕБЕНЯ» для креативных проектов

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

Искажение, помехи, шум в веб дизайне (Distortion, Glitch, Noise in Web Design)

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

Эффект шума на фоне обложки сайта юридической компании ASAP LEGAL, проект WebValley Studio. Использование нестандартных трендов в дизайне помогает выделиться среди заезженных сайтов юридической тематики

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


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

трехмерные цвета веб дизайн сайта

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

Искажения задается изменением изображений или текста по произвольным кривым. Это дает ощущение объема, добавляет эффектности, например, как будто мы смотрим сквозь стакан с водой.
Отдельный вид искажений, захвативший веб-дизайн и процентов 90 сайтов на Awwwards — анимированный дисторшн-эффект (distortion effect), который придаёт особую динамику сайту, дороговизну, эффектность и модность, особенно если его использовать в анимации по наведению:

Анимированный дисторшн-эффект в дизайне сайтов

Применение дисторшн-эффекта на сайте элитного клубного дома SUNSET HOUSE. Проект WebValley Studio

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

Пример использования глитча и моушн в анимации логотипа.

Также упрощенная интерпретация Glitch популярна в анимации и иллюстрациях, как эффект расслаивания:

Вариация использования Glitch в связке с параллакс эффектом: белая буква S с красным и синим расслоением + эффект объема при срабатывании параллакса контурных объектов по движению мыши.

Шумы — прием также пришедший в веб-дизайн из киноиндустрии. Классно подходит для исторических или биографических сайтов, создавая эффект старины, старой кинопленки.

Подражание соцсетям

Тренд вызван повальным увлечением населения социальными сетями. Даже для людей преклонного возраста интерфейс инстаграм стал привычным и понятным.

Веб-дизайнеры для разработки сайтов заимствуют не только внешний вид социальной сети, но и UX часть:
современные сайты примеры

Удобная навигация в формате актуальных сторис на сайте косметики «Золотое яблоко» — работает как фильтры, можно быстро перейти в нужную категорию, как по хештегу в инсте.

современные тенденции в web дизайне

Навигация с помощью подобия хайлайтс на сайте мебельного салона

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

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

Коллажирование

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

Коллажирование в графическом и веб-дизайне

Кастомный курсор

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

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

Кастомный курсор — черная точка с огромным розовым шаром градиентом

Еще один подводный камень: дизайнеры часто думают, что чтобы заменить курсор, достаточно просто изменить его иконку, но это не так. Нужно продумать, как будет выглядеть и вести себя курсор при разных состояниях: при наведении на ссылку, на кнопку, на объект, на карточку товара и т. д. В итоге может оказаться, что нужно отрисовать не 1 курсор, а 15−20, так как это инструмент, который подсказывает пользователю, как можно взаимодействовать с элементами на странице. Каким бы ни был крутым трендовым курсор, если при наведении на ссылку он изменится на пальчик из 99 года, то эффект будет испорчен, а такие недоработки встречаются на каждом втором сайте.

Кастомный курсор на сайте Outerra, проект WebValley Studio. Слева — курсор в дефолтном состоянии, справа — смена внешнего вида курсора при наведении на кликабельный элемент

Кастомный курсор требует серьезной проработки кроссбраузерности, так как это стороннее решение, и не каждый браузер будет его поддерживать. Есть вероятность, что в каком-то браузере он не будет отображаться вообще, а это убьет юзабилити сайта, ведь пользователь не сможет с ним взаимодействовать. Поэтому кастомные решения нужно тестировать во всех доступных современных браузерах: Google Chrome, Yandex, Opera, FireFox, Safari, Edge.

Проходные тренды веб‑дизайна

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

Стекломорфизм (глассморфизм)

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

Эффект матового стекла (глассморфизм) в дизайне сайтов и интерфейсов мобильных приложений

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


Тренд был заложен компанией Apple в 2013 году с выходом iOS 7, которая активно разрабатывает свои интерфейсы в стиле стекломорфизма. Такой дизайн выглядит премиально, сверхчисто, минималистично, современно и даже футуристично: напоминает прозрачные экраны с цветовой индикацией из фильмов о будущем.

Стекломорфизм добавляет веб-дизайну футуристичности и современности

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

Анимированные иллюстрации в UI

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

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

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

Еще одна особенность тренда — уход от плоских 2D иллюстраций в пользу 3D с дальнейшим анимированием. Дизайн становится более реалистичным, за счет объема и динамики, и более информативным, так как появляется возможность рассказать историю при помощи визуала, поддержать главную идею сайта:

Антидизайн

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

Характеризуется экспериментальными, откровенно странными решениями, искажениями, чрезмерными преувеличениями.
современные стили web сайтов

Трешовый сайт лизинга авто выполненный в стилистике антидизайна. Разглядеть карточки товаров и цены в этом свиновороте практически невозможно. А с учетом, что все объекты на странице чрезмерно анимированы, через 2 минуты просмотра начинается эпилепсия

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

Наклейки и полоски

Тренд 2022 года, который часто применяют онлайн-школы, дизайнеры в портфолио, интернет‑магазины одежды и аксессуаров. Использование наклеек и полосок в дизайне придает сайту эффект молодежности, поп-культуры, современности.
web дизайн сайта современный

Наклейки на сайте молодежной одежды SHEIN

WebValley Studio

Растянутые буквы

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

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

Растянутые буквы в веб-дизайне

Скевоморфизм (Skeumorph)

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

Абсурдные иллюстрации

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

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

Уникальные иллюстрации с абсурдными сюжетами

Хендмейд стиль в веб дизайне

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

Дизайн сайта в стиле хендмейд

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

Рукописные шрифты и хендмейд паттерны в дизайне сайта ресторана русской кухни передают атмосферу домашнего уюта и гостеприимства

Дорисовка к фото графических элементов

Эффект добавляет проекту молодежности, креативности, а также помогает связать элементы сайта в единую композицию, если фото, использованные на сайте, не соответствуют по цветовой гамме фирменным цветам:
как выглядит современный web сайт

Фото, с дорисованными розовыми элементами смотрится более гармонично на обложке с розовым текстом и обводкой кнопки.

ключевые тренды в web дизайне

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

тренды web сайты

Дорисовка людей на фото студии дизайна интерьеров

Иллюстрации, вдохновленные мультфильмами 70−80-х

На российском рынке тренд еще не набрал обороты, но на западном используется широко. Прием позволяет вызвать ностальгию у взрослого населения, вспомнить молодость, вызвать доверие. Иллюстрации в стилистике мультфильмов 70−80х классно заходят в дизайнерских проектах (для сайтов-портфолио), креативным брендам, нестандартным сайтам.
новый web дизайн сайта

Проект: Bonniers Book | A trip to the future / Автор: Fago Studio

графические тренды в web сайтах

Где ты, Скуби-Ду? (сериал 1969 — 1970)

Общие тенденции в веб‑дизайне 2022

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

Минимализм долгое время будет господствующим стилем веб-дизайна, так как человеку привычны удобство, простота и порядок, никто не любит хаос. Но сухой минимализм приедается, становится неинтересным, как, например, классический секс на длительной дистанции: приятен, но за годы однотипности он устаревает, становится скучным. Чтобы добавить перчинки пары используют ролевые игры, костюмы — все, что делает сексуальную жизнь разнообразной. И есть БДСМ — это уже серьезный уход от классики, как брутализм. Так и в веб-дизайне, чтобы сделать сайт необычным, цепляющим, интересным, вовлекающим, дизайнер использует тренды, чтобы докрутить сухой минимализм и добавить эмоций пользователю.
Автор статьи
Алексей Гамов
СЕО WebValley Studio
21.12.2021
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!

Подпишись, чтобы быть в курсе!

Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.