Тренды Веб-дизайна | ТОП-10 Главных в 2021 с Примерами

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

1

Эффект параллакса

Актуальностью дизайнов с эффектом параллакса никого не удивить – она сохраняется уже не первый год.

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

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

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

Вот несколько полезных советов для грамотной реализации эффекта в своем портфолио:

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

Что посмотреть для вдохновения:

сайт «Web Design Art History»
Крутой англоязычный ресурс по веб-дизайну запустил микро-сайт «Web Design Art History», и это настоящее произведение искусства, интересное как в информативном аспекте, так и с точки зрения реализации
сайт фильма «The Goonies» из 80-х
Еще один яркий пример параллакса – сайт фильма «The Goonies» из 80-х. В комплексе со звукорядом, он здесь работает как элемент сторителлинга, помогает воссоздать атмосферу картины
сайта берлинского музыканта Андреса Джассо.
Эффект отлично подходит для креативных проектов. Например, вот так просто и лаконично, но вместе с тем очень стильно он помог в реализации сайта берлинского музыканта Андреса Джассо
2

3D-графика

Еще одна тенденция, которая будет сохраняться в 2021-м – это использование 3D графики и анимации.

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

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

Можно выделить несколько рекомендаций по использованию этого тренда:

  1. Понимать назначение. Не стоит добавлять 3Д «чтобы просто было красиво». Используйте прием, когда он действительно вписывается в концепцию, помогает восприятию, имеет смысловую нагрузку.
  2. Думайте о производительности. Не перегружайте сайт лишними нарисованными деталями, минимизируйте все, что можно минимизировать.
Тренды Веб-дизайна | ТОП-10 Главных в 2021  с Примерами
Отличный пример использования такой графики на сайте https://www.sennep.com. Здесь 3D элементы существуют на очень лаконичном фоне, без лишних деталей. Дизайн выглядит очень ярко и нетривиально
Тренды Веб-дизайна | ТОП-10 Главных в 2021  с Примерами
Но самый яркий пример того, что разработчики будут благосклонны к трехмерности – это выпущенная недавно операционная система Apple Big Sur, в которой объемными стали и цветные градиенты – один из главных трендов прошлого года, а также иконки

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

Тренды Веб-дизайна | ТОП-10 Главных в 2021  с Примерами
Еще один отличный пример лаконичного и осмысленного использования 3D – это сайт Yaya. Здесь все эти элементы работают сообща и не отвлекают пользователя от главной информации, просто делая его пребывание на сайте более интересным и приятным
3

Неоморфизм

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

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

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

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

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

Неоморфизм
Скорее всего в 2021-м вы увидите неоморфизм в реализации кнопок мобильных приложений, панели поиска, текстовом поле.

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

  1. Неоморфизм предполагает однотонный дизайн, в котором целевые кнопки выделяются не цветом, а едва заметными полутенями, которые создают эффект выпуклости. А это делает дизайн непрактичным, ведь для хорошего юзабилити очень важно выделять главные целевые действия, делать самые важные кнопки хорошо заметными для пользователя, увеличивать их контраст. Это важно всегда, но особенно это важно для просмотра веб-приложения или сайта в условиях сложного или яркого освещения, когда на экране могут появляться блики. Здесь неомфоризм определенно проигрывает, он не сможет помочь пользователям лучше ориентироваться в интерфейсе.
  2. Важный вопрос, который нельзя игнорировать современному веб-дизайнеру – это адаптация сайта к потребностям людей с ограниченными возможностями. В идеале хороший сайт или приложение должен учитывать все ограничения пользователя – слуховые, речевые, визуальные, физические, когнитивные, неврологические. И тут неоморфизм опять в проигрыше, поскольку не учитывает визуальные, когнитивные и физические ограничения. С визуальными мы разобрались выше – дизайн неконтрастный, им неудобно пользоваться людям с плохим зрением. Теперь о когнитивном аспекте. При неоморфизме, все основные объекты выделяются тенью одинаково, из-за чего пользователю сложнее понять иерархию и структуру дизайна, ему приходится думать о том, как пользоваться этим дизайном. А хороший UI / UX дизайн должен быть интуитивно понятным. Тесно связан с этим и физический барьер – в неоморфическом дизайне пользователю сложнее понять, какие объекты кликабельны и интерактивны, а какие нет.

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

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

Неоморфизм
Product Design for Spotify
Неоморфизм
Simple Music Player
Неоморфизм
White Skeuomorph Styled Shopping App
4

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

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

В качестве примера можно посмотреть на:

Лаконичный дизайн https://www.magictheatrestudio.com,
Лаконичный дизайн https://www.magictheatrestudio.com, выполненный на фоне пыльного-розового, темно-зеленого оттенков. Он не перегружен лишними деталями и выглядит очень необычно
На сайте https://www.libenar.it сумели подобрать не менее расслабляющую цветовую палитру
На сайте https://www.libenar.it сумели подобрать не менее расслабляющую цветовую палитру
А на https://www.push10.com/mend-seltzer в полной мере обыграли стремление человечества к природе, использовав не только приятные пастельные оттенки, но и флористические мотивы
А на https://www.push10.com/mend-seltzer в полной мере обыграли стремление человечества к природе, использовав не только приятные пастельные оттенки, но и флористические мотивы
https://sahel.qodeinteractive.com/landing - еще один потрясающий сайт
https://sahel.qodeinteractive.com/landing — еще один потрясающий сайт, который мы рекомендуем изучить начинающим дизайнерам не только как пример использования комфортных оттенков, но и как пример нестандартного подхода к созданию сайтов
Еще один пример с сайта 99designs
Еще один пример с сайта 99designs
5

Ретро-шрифты

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

И ретро-шрифты не стали исключением из этого правила. В последние годы многие продукты массовой культуры (фильмы, сериалы, музыка) возвращались к канонам прошлого, особенно к эстетике 80-х, 60-х, и это увлечение прошлым не могло обойти мимо типографику.

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

Вот два важнейших совета, как не облажаться с ретро-шрифтами:

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

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

Carnival Sounds от Spotify
Самый яркий пример умелого использования жирных ретро шрифтов это Carnival Sounds от Spotify. Здесь сумели очень дерзко и вместе с тем лаконично обыграть ретро-стилистику, это яркая и смелая типографика
http://www.dollardreadful.com/
Если вы хотите с головой погрузиться в винтажную стилистику, очень советуем ресурс http://www.dollardreadful.com. Здесь собраны различные короткие истории, а сам сайт оформлен в стилизации под старинную газету и интересными рисованными элементами. Обратите внимание на рекламу, новости, заголовки
http://radio.nymoon.com/
http://radio.nymoon.com
https://www.sunstudio.com/
https://www.sunstudio.com
https://dunderville.se/
https://dunderville.se
6

Акцент на прокрутке

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

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

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

В том числе эта тенденция проявляется в таком интересном приеме, как «скроллителлинг». Это визуальное повествование с небольшим сюжетом, которое вовлекает посетителя в тематику и миссию веб-ресурса.

Вот несколько рекомендаций для реализации удачного скроллителлинга:

  • Фиксируйте движение при прокрутке на небольшом акцентном участке экрана.
  • Обеспечьте навигацию на условиях пользователя: предоставьте очевидные элементы управления для воспроизведения/паузы/остановки взаимодействий и движений курсора.
  • Убедитесь, что любые элементы прокрутки помогают подчеркнуть историю, а не отвлекают от важного текста.
https://webflow.com/web-design-art-history
И здесь снова не удастся обойти стороной проект https://webflow.com/web-design-art-history, который является ярким примером этого дизайнерского приема
http://www.sbs.com.au/theboat/
А вот еще несколько эффектных реализаций возможностей прокрутки: http://www.sbs.com.au/theboat
https://pitchfork.com/features/cover-story/reader/bat-for-lashes
https://pitchfork.com/features/cover-story/reader/bat-for-lashes
https://www.nytimes.com/interactive/2015/01/09/sports/the-dawn-wall-el-capitan.html
https://www.nytimes.com/interactive/2015/01/09/sports/the-dawn-wall-el-capitan.html
7

Мультимедийный интерфейс

Главное, правильно использовать эти инструменты.

Смещению акцентов веб-дизайна в пользу мультимедийных интерфейсов способствует два основных фактора – это постоянное улучшение скорости загрузки и интернета, что дает возможности для качественного воспроизведения более сложных и тяжеловесных ресурсов даже на мобильных устройствах, а также тренд на инклюзивный UI/UX дизайн, адаптированный и доступный для людей с ограниченными возможностями. А объединение визуальных элементов, текста, видео и аудио делает пользовательский интерфейс более удобным для всех.

Вот несколько рекомендаций:

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