10 Трендов Веб-Дизайна

Каким будет веб-дизайн? Давайте разбираться с основными трендами и инновациями!

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

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

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

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

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

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

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

Крутой англоязычный ресурс по веб-дизайну запустил микро-сайт «Web Design Art History», и это настоящее произведение искусства, интересное как в информативном аспекте, так и с точки зрения реализации.

https://webflow.com/web-design-art-history

Еще один яркий пример параллакса – сайт фильма «The Goonies» из 80-х. В комплексе со звукорядом, он здесь работает как элемент сторителлинга, помогает воссоздать атмосферу картины

https://the-goonies.webflow.io/

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

2. 3D-графика

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

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

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

1. Понимать назначение. Не стоит добавлять 3Д «чтобы просто было красиво». Используйте прием, когда он действительно вписывается в концепцию, помогает восприятию, имеет смысловую нагрузку.

2. Думайте о производительности. Не перегружайте сайт лишними нарисованными деталями, минимизируйте все, что можно минимизировать.

Отличный пример использования такой графики на сайте https://www.sennep.com/

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

Но самый яркий пример того, что разработчики будут благосклонны к трехмерности – это выпущенная недавно операционная система Apple Big Sur, в которой объемными стали и цветные градиенты – один из главных трендов прошлого года, а также иконки.

Рабочий стол Apple Big Sur

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

Еще один отличный пример лаконичного и осмысленного использования 3D – это сайт Yaya: https://www.yaya.co/

Здесь все эти элементы работают сообща и не отвлекают пользователя от главной информации, просто делая его пребывание на сайте более интересным и приятным.

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

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

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

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

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

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

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

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

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

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

https://dribbble.com/shots/9356756-Neo-Spotify-Skeuomorphism-neumorphism

Стильный проигрыватель для смартфонов: https://dribbble.com/shots/9338617-Simple-Music-Player

https://dribbble.com/shots/9810486-White-Skeuomorph-Styled-Shopping-App

4. Комфортные цвета

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

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

В качестве примера можно привести лаконичный дизайн https://www.magictheatrestudio.com/ , выполненный на фоне пыльного-розового, темно-зеленого оттенков. Он не перегружен лишними деталями и выглядит очень необычно

На сайте https://www.libenar.it/ сумели подобрать не менее расслабляющую цветовую палитру

А на https://www.push10.com/mend-seltzer/ в полной мере обыграли стремление человечества к природе, использовав не только приятные пастельные оттенки, но и флористические мотивы

https://sahel.qodeinteractive.com/landing - еще один потрясающий сайт, который мы рекомендуем изучить начинающим дизайнерам не только как пример использования комфортных оттенков, но и как пример нестандартного подхода к созданию сайтов

Еще один пример с сайта 99 designs https://99designs.com/profiles/bluesjay/designs/1798436

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

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

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

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

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

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

Самый яркий пример умелого использования жирных ретро шрифтов это Carnival Sounds от Spotify - https://carnival.withspotify.com/

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

Если вы хотите с головой погрузиться в винтажную стилистику, очень советуем ресурс http://www.dollardreadful.com/

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

И вот еще несколько впечатляющих примеров:

http://radio.nymoon.com/

https://www.sunstudio.com/

https://dunderville.se/

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

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

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

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

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

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

И здесь снова не удастся обойти стороной проект https://webflow.com/web-design-art-history , который является ярким примером этого дизайнерского приема

А вот еще несколько эффектных реализаций возможностей прокрутки: http://www.sbs.com.au/theboat/

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

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

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

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

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

Отличная реализация мультимедийности, в которой присутствуют и звуковые файлы и видеоролики, выполнена на сайте композитора Николаса Эрреры: http://nicolaserrera.com/

Интересный сайт с мультимедиа и сторителлингом http://pierrehermenicolasbuffe.com/en/chapter-1

8. Абстрактное искусство

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

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

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

Вот несколько интересных примеров реализации:

https://www.indicius.com/

https://dribbble.com/karolinamarqp

https://thisissleep.co.uk/pages/your-sleep-solution

https://greeeg.com/

9. Дополненная реальность

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

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

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

https://www.jeep.com/bmo.wrangler.2021.html#/build/interior/

Технологии дополненной реальности – это идеальная находка для брендов, которые хотят наладить более доверительный контакт со своими покупателями в онлайне, дать им ощущение контакта с продуктом. С таким опытом активно экспериментируют в Ikea, ASOS, Adidas и многих других крупных компаниях.

10. Интерактивные анкеты

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

И в этом аспекте критически важным моментом является момент адаптации посетителя на странице. Эти первые несколько секунд после посещения страницы могут или заинтриговать его и пробудить интерес к продукту/услуге, либо наоборот – привести к полному безразличию.

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

Предлагаем вашему внимания интересную подборку с таким приемом на Dribble:

https://dribbble.com/shots/6697781-Tastefinder

https://dribbble.com/shots/4023920-Concept-questionnaire

https://dribbble.com/shots/11533564-Empower-s-Financial-Quiz

Выводы

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

Также рекомендуем практикующим дизайнерам изучить ресурс https://www.awwwards.com/websites/ , который ежегодно награждает самых талантливых веб-дизайнеров и разработчиков. Здесь вы сможете ознакомиться с топовыми проектами со всего мира, изучить их особенности и понять к чему стоит стремиться.

Если ищете яркие и интересные шаблоны и плагины для своих проектов, полезные рекомендации, советуем изучить такие ресурсы, как https://tilda.cc/ru/ , https://www.w3.org/ и https://www.squarespace.com/ .

А если хочется найти больше примеров лучших дизайнов 2021 и трендовых концептов – советуем полистать такие платформы, как 99 designs , Behance , Pinterest , Dribble – это лучшие вдохновляющие ресурсы для дизайнеров. Не важно, какой язык программирования вы используете Javascript или PHP , делаете приложения для iOS или Android , знание актуальных трендов поможет вам усовершенствовать свою работу и делать более качественные проекты.

ИСТОЧНИК: https://geekhacker.ru/web-design-trends/