Я веб-дизайнер, я так вижу! Или топ трендов дизайна интерфейсов 2022 года

Каждый день мы становимся свидетелями того, как быстро развивается Интернет и технологии. Появляются новые IT-профессии, языки программирования, и даже мировая экономика собирается перебраться в электронный валютный оборот. Это мы ещё не говорим о том, насколько сильно развивается сфера разработки веб-интерфейсов.

Дизайнерам REG.RU удалось-таки зафиксировать тренды 2022 года в веб-дизайне и составить крутой и содержательный топ. Усаживайтесь поудобнее, заваривайте чаёк, раскрывайте пачку чипсов и поехали.

Неоморфизм и глассморфизм

В 2000-х годах ПК только начали широкое распространение. Чтобы пользователям было легче разобраться в интерфейсе, дизайнеры рисовали визуал по образу реального мира, уделяя внимание каждой тени и блику на кнопке. Этот подход называется скевоморфизмом. В 2012-2014 годах, когда общество уже привыкло к компьютерам, на смену скевоморфизму пришел flat design с абсолютно плоскими картинками без теней, структуры и каких-либо бликов.

Скевоморфизм и плоский дизайн. Источник: REG.RU
Скевоморфизм и плоский дизайн. Источник: REG.RU

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

Неоморфизм. Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fdribbble.com%2Fshots%2F11202391-Fitness-neumorphism&postId=425904" rel="nofollow noreferrer noopener" target="_blank">Dribbble</a>
Неоморфизм. Источник: Dribbble

Вместе с неоморфизмом с 2021 года не угасает тенденция к стекломорфизму (глассморфизму). Идея в том, что люди привыкли взаимодействовать с предметами через стекло. Например, люди через стекло смотрят на стрелки часов или рассматривают витрину ювелирных изделий. Глассморфизм имитирует эффект матового стекла с размытым фоном. Вот как он может выглядеть:

Стекломорфизм. Источник: REG.RU
Стекломорфизм. Источник: REG.RU

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

3D-элементы

В 2022 году использование 3D будет продолжать набирать обороты. На это есть причины:

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

-- Распространение простых онлайн-редакторов. Для 3D-моделирования больше не нужны суперкомпьютеры, предназначенные для графики. Онлайн-редакторы, такие как Spline и Vectary, позволяют редактировать и рендерить 3D-изображения даже на обычном ноутбуке.

Анимация

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

Милый анимированный пёсик. Источник: LottieFiles. Автор: Bashir Ahmed

Нестандартная типографика и брутализм

В 2022 году дизайнеры-разработчики уходят от классики в типографике. Шрифты становятся замысловатее: засечки, разные размеры в словах, полупрозрачный шрифт перекрывается непрозрачным, игра с жирностью и курсивом. В общем, дерзкие, крупные, яркие шрифты будут в тренде. Примеры сайтов с таким приёмом: Mine.pink, Apple, Cargo.

Нестандартность типографики можно считать частью общего тренда на брутализм. Изначально брутализм ― направление в архитектуре, которое возникло в 1950-е годы как ответ на вызовы послевоенного времени. Яркий пример этого движения ― серые здания из бетона, которые выглядят недостроенными. Собственно, сам термин и произошел от французского словосочетания «béton brut» (необработанный бетон).

Здание парламента в Дакке, Бангладеш, 1961. Архитектор <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fru.wikipedia.org%2Fwiki%2F%25D0%259B%25D1%2583%25D0%25B8%25D1%2581_%25D0%259A%25D0%25B0%25D0%25BD&postId=425904" rel="nofollow noreferrer noopener" target="_blank">Луис Кан</a> Автор: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.flickr.com%2Fphoto_zoom.gne%3Fid%3D124605409&postId=425904" rel="nofollow noreferrer noopener" target="_blank">Justin Brockie</a>
Здание парламента в Дакке, Бангладеш, 1961. Архитектор Луис Кан Автор: Justin Brockie

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

Главные черты бруталистских сайтов:

— провокация;

— отсутствие правильной цветовой палитры, использование красного и зеленого цветов;

— изображения на сайте часто необработанные;

— на всех страницах используется один шрифт;

— намеренные ошибки в иерархии, логике, интервалах.

Кстати, дизайнер Паскаль Девилль создал каталог бруталистских ресурсов, с которым можно ознакомиться на сайте.

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

Эксперименты с пропорциями, формами и сюжетными линиями

Тренд на странные картинки перешёл из 2021 года в 2022. Люди с большими головами и маленькими ногами, рисунки в виде набросков и своеобразные персонажи ― такое можно увидеть у многих брендов. Это позволяет компаниям найти свой узнаваемый стиль. Хитрости здесь никакой нет. Просто забавно и необычно.

Яркие цвета на сайте

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

Сайт DesignScramble. Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fdesignscramble.jp&postId=425904" rel="nofollow noreferrer noopener" target="_blank">DesignScramble</a>
Сайт DesignScramble. Источник: DesignScramble

Больше текста!

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

Графики и схемы с меняющимися данными

Кроме текста, должны быть ещё и наглядные факты. Сколько у вас отделений, в каких городах, кто ваши клиенты и как их много. Факты — единственная надёжная информация. Если у вас есть много полезных данных, сделайте их представление не только наглядным, но и увлекательным.

Если хочется поэкспериментировать с новыми стилями на своем сайте, сделайте веб-ресурс с помощью REG.Site. Достаточно просто выбрать шаблон сайта. В блочном редакторе вы сами сможете добавлять современные иллюстрации и типографику, программировать не придётся. К тому же в сервис входят уже настроенный хостинг, SSL и конструктор.

2929
18 комментариев

Такие статьи хоть меняются иногда, точно такая же статья была за 2021 и 2022 год у каждого дизайнера, даже тренды те же самые

6
Ответить

Такие статьи хоть меняются иногданет

2
Ответить

если не нравится, то предложи своё что-то

1
Ответить

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

5
Ответить

Это утрированный скевоморфизм)

Ответить

Лучше посоветуйте куда перейти с wix, запарился спрашивать :(

Ответить

Тильда. Интуитивный интерфейс, в то же время функционал весьма нескудный

1
Ответить