(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(1379221, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(1379221, 'hit', window.location.href);

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

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

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

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

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

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

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

Неоморфизм. Источник: Dribbble

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

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

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

3D-элементы

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

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

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

Анимация

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

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

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

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

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

Здание парламента в Дакке, Бангладеш, 1961. Архитектор Луис Кан Автор: Justin Brockie

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

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

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

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

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

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

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

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

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

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

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

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

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

Сайт DesignScramble. Источник: DesignScramble

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

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

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

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

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

0
18 комментариев
Написать комментарий...
Serpantin74

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

Ответить
Развернуть ветку
Филипп Гаврилов
Такие статьи хоть меняются иногда

нет

Ответить
Развернуть ветку
Алла Анисомова

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

Ответить
Развернуть ветку
CHROMIS

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

Ответить
Развернуть ветку
Егор Пашков

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

Ответить
Развернуть ветку
Валя Джазиков

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

Ответить
Развернуть ветку
Который тот

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

Ответить
Развернуть ветку
Ильяна Левина

тильда - топ для простых лендингов, сто проц

Ответить
Развернуть ветку
Валя Джазиков

Уже потестил, да. Теперь ослеп. После wix там делать нечего. Это субъективное мнение и отталкиваясь от то, что неинтересный интерфейс и так как было на виксе - недостаточно функций. Остался на виксе фри пока-что.

Ответить
Развернуть ветку
Igor Reverb

Webflow

Ответить
Развернуть ветку
Арсений

Вебфлоу отличная система, но с оплатой сейчас проблема. Покупка крипты > перевод на зарубежную карту > оплата

Ответить
Развернуть ветку
Исторический кран

можете еще попробовать Nethouse

Ответить
Развернуть ветку
Валя Джазиков

Спасибо, пробну

Ответить
Развернуть ветку
Анна Михайлова

Обожаю анимационные решения
Всегда цепляет взгляд

Ответить
Развернуть ветку
Виталий Олегович

Если привыкли к wix - то на Tilda, imgo

Ответить
Развернуть ветку
Егор Пашков

😁 Так это перечень трендов Dribbble, они нечего не имеют общего с реальными продуктами, посмотрите на главных двигателей рынка) Подобные тренды 2 года к «блистают» как прототипы, но применения их нет. Как говорится «и где они теперь» если говорить как про концептуальное искусство то ок)

Ответить
Развернуть ветку
Василий Колодин

Дизайнеры - это не художники.
Это художник может экстраполировать свое Я на свои картины.
А дизайнер, должен действовать ровно в противоположном направлении: впитывать пользовательский опыт и адаптировать свои продукты под него.

Ответить
Развернуть ветку
Alexander Schipakov

В то же время, дизайн reg.ru )

Ответить
Развернуть ветку
15 комментариев
Раскрывать всегда