дмитрий слиньков

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

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

1. Неоморфизм

Модно, красиво, но не очень практично
Автор: Andrei Simion
«Неоморфизм – это слияние слов нео и скевоморфизм. Этот стиль использует размытие, угол и интенсивность тени объекта для его выделения. Это дизайн, который выглядит реалистично, футуристично, современно, привлекательно и невероятно захватывающе благодаря мягкой тени и общему внешнему виду.» — ux.pub.
Неоморфизм набирает популярность вот уже несколько лет подряд. Стиль сочетает в себе две концепции: скевоморфизм и материальный дизайн. Он применяет минималистский подход, создавая ощущение трехмерности в виде кнопок и других элементов.
Скевоморфизм
Хорошее видео про скевоморфизм от YouTube-канала Топлес
Личный опыт. Если я когда-нибудь сделаю приложение для себя любимого, все интерфейсы будут «неоморфичными». Эта тенденция дизайна не подходит для потребления широкими массами «обычных» пользователей. Почему? Я могу только догадываться.
Откройте Dribbble и введите в поиске «neumorphism». Вы увидите много красивых скриншотов. И ни один из них не будет являться живым проектом. Как максимум, это могут быть «герои» веб-сайтов изображающие экраны гипотетических приложений.
Почему же никто не берет неоморфизм в продакшен? Пожалуй, выскажу одну догадку. Людям не нравится «многоуровневая ложь»:
Уровень 1. Это не настоящая кнопка. У всех в руках одиночные плоские экраны.
Уровень 2. Это не настоящий рельеф. Только тени на фальшивой кнопке... Пугает, не так ли?))
Узнать по-больше на английском языке про неоморфизм можно тут: Neumorphis
Примеры:

2. Стекломорфизм

Эффект матового стекла. Cool ящщитаю…
Автор: Sèrgi Mi for Fireart Studio
Сегодня это один из самых простых и интересных эффектов с точки зрения создания и реализации. Стеклянные образы, полупрозрачные и размытые элементы интересно оживляют всю сцену.
Последние версии CSS позволили легко реализовать эффект матового стекла на веб-сайтах. Часто дизайнеры используют этот прием в качестве фона вместо градиентов.
Тренд стал трендом только потому, что его можно применить практически ко всему.
Он может быть не только излишеством в виде «стеклянного дополнения к композиции», но и выступать в качестве главноего героя.
Кредитные карты. Мобильные телефоны. Мониторы. Иконки. Просто попробуйте сделать любой элемент вашего сайта полупрозрачным с эффектом матового стекла, и вы увидите, насколько он уникален и свеж!
PS
Сегодня матовое стекло легко сделать любым популярным дизайнерским инструментом:
Figma,
Sketch,
XD.

3. Натуральные цвета

Любое излишество губительно…
Автор: Davina Spriggs on Dribbble
Наконец-то веб-дизайнеры научились маскировать свою криворукость призывом «за всё натуральное против всего ненатурального».
А всего-то нужно было избегать двух крайностей: слишком темного и слишком светлого. Золотая середина — это мягкие цветовые палитры: здоровый зеленый, пастельный синий, теплый коричневый, да и просто светло-розовый. Всё это делает цвета веб-сайтов менее резкими, но и естественными, как сама природа-мать.
Тренд подходит для всего, что употребляется внутрь (вино, суши, фуд-дизайн) и подо всё, чем мы мажемся, чтобы стать краше: косметика, лечебная грязь (только если розовая).
Кстати, индустрия фитнеса почему-то еще не обратилась к этому тренду. Хватит уже изображать качков и секси-йожек. Внешний вид в 90% случаев — вещь недостижимая. Это для медиков дофамин, эндорфин, серотонин и окситоцин, а для простых смертных это ощущение счастья и свободы от посещения каждого занятия. Вот и покажите на странице своего йога-клуба какие классные брускетты с нутом и ростками гороха можно скушать в вашем фит-кафе.

Примеры веб-сайтов использующих комфортные, натуральные цвета:

4. Трехмерные цвета

А что сегодня не 3D?
Автор: Apple
Все превращается в 3D: фильмы, картинки и даже цвета!
Что ж, градиентные цветовые схемы в веб-дизайне уже некоторое время находятся в тренде, и в 2021 году тенденция выглядит как следующая эволюция, когда цветовые переходы становятся более реалистичными, чем когда-либо.
Следуя за идеями операционной системы Apple Big Sur, мы можем ожидать, что цвета будут насыщенными и трехмерными, как свежий фрукт, сорванный прямо с экрана.
Два цвета, расположенные рядом, могут либо резко слиться друг с другом либо сохранять глубину и тени от окрашенных объектов. В конце концов, эта тенденция тоже предполагает, что веб-дизайн в 2021 году будет стремиться к реализму.
Автор: Mike On Dribbble

5. Градиенты

Столько лет они всё в моде...
Лично я обожаю разнообразить дизайны. Людям это тоже нравится. Возьмем, к примеру, цвета. Для каждого цвета есть сотни оттенков. Градиенты просто сочетают их уникальным образом. И почему же всё это завораживает? Ну, во-первых, градиент — это практически безграничный простор для творчества. Во-вторых, да, все мы любим минимализм. Но если мы — заказчик, то дизайн «всего из двух цветов» кажется порой надувательством. Градиенты спасают любой минимализм от презрения и шкуру дизайнера от освежевания)))
Автор: Rested
А если серьезно, то градиент создает иллюзию движения. Эдакий моушн-дизайн без анимации.
Тенденцию вернул нам в 2018 году Instagram. С тех пор он устанавливает новые стандарты творчества и интерактивности. Результаты опросов и комментарии экспертов показывают, что пока эта тенденция никуда не денется. Примеры веб-сайтов искусно использующих градиенты:

6. Интерактивный 3d-контент

Для тех, кому скучно...
Автор: Rested
3D — определенно «горячая штучка» в веб-дизайне. Это необычно, впечатляет с первых же секунд и говорит о дизайнере… только хвалебные эпитеты. Есть пока что проблемка с этим трендом: поскольку 3d используется преимущественно в игровых, то есть не серьезных, целях, употреблять его на сайтах b2b, то есть в серьезной среде, достаточно сложно. Но мы все равно пытаемся и делаем вот такие, например, сайты:
Автор: SLINKLOV.Capital
Хорошие примеры:
И еще немного великолепных примеров использования 3d-контента:

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

Всё еще с нами с 2014 года...
Материальный дизайн был представлен в 2014 году компанией Google. В большинстве случаев традиционный веб-дизайн выглядит плоским. Теперь, как вы можете видеть на картинке выше, материальный дизайн позволяет использовать цвет и тени для имитации физического мира и его текстур.
На самом деле, материальный дизайн — это естественное продолжение самой большой тенденции в мире дизайна за последние годы: плоского дизайна. Просто Material может делать то, чего не мог сделать плоский, он добавляет достаточно украшений, чтобы повысить юзабилити.
В статье использовались материалы:
Coolest 25+ Web Design Trends In 2021, that'll rock the world (Medium link)