Написать нам
Категория: Тренды
05.10.2020

Тренды (UX) Дизайна Пользовательского Интерфейса В 2021

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



Итак, первый тренд – это сдержанная анимация. Уже давно прошло время, когда бьющая в глаза реклама кричащих цветов приносила что-то положительное, а не одно только раздражение. Да и огромным набором анимированных элементов кого-то удивить очень тяжело, поэтому сейчас наиболее целесообразно использовать мелкие анимированные элементы, чтобы поощрить пользователя, а более явные и немного более крупные – для привлечения внимания к призыву к действию (как правило – одному). Причиной такого положения вещей стала тотальная перегруженность современных сайтов анимированными элементами. Сама по себе анимация на сайтах стала популярна по вполне понятной причине: с её помощью можно добавить на сайт с самой серьёзной тематики расслабляющий элемент, который сбросит напряжение пользователя, который уже приготовился к обработке больших объёмов серьёзной профессиональной информации. И с задачей грамотного наполнения сайта качественной анимацией без излишеств справилась, к примеру, SEEK career – группа компаний, которые занимаются рекрутингом. Показанный на фото анимированный элемент привлекает внимание пользователя к конкретному разделу  SEEK’s career advice.







Следующий тренд – это неоморфизм. Несмотря на то, что модным это стало уже в первые месяцы этого года, тренд только набирает свою популярность. Название происходит от совмещения слов «нео» - «новый» и «скеоморфизм». Второй термин обозначает особый приём в дизайне интерфейса в 2021, когда элементы выглядят как привычные и даже обыденные вещи из реального мира. Возникновением этого дизайн-феномена мир обязан компании Apple и лично Стиву Джобсу. И более того, именно они после 2013 года отказались от скеоморфизма и упростили интерфейс на своих устройствах, став родоначальниками и неоморфизма тоже. Как сказал Джим МакКоли в Creative Bloq: «В неоморфизме сочетаются лучшие черты скеоморфизма и плоского дизайна; интерфейс становится более чистым и реалистичным благодаря совершенному сочетанию света и тени». И действительно, использование мягких теней делает подобный дизайн потрясающе реалистичным и в то же время – футуристичным, а также дарит новый эмоциональный опыт в привычных интерфейсах. В последнее время всё больше людей предпочитает любые другие пути восприятия визуальному, а значит, если сайт порадует своего клиента визуально, то шансы на успех повышаются в разы. Яркий пример – интерфейс приложения Luminarious. Добросовестные создатели проработали  даже имитацию нажатия на кнопки в иконках, что придаёт дизайну глубину и реалистичность.







Неоморфизм задал новые стандарты в области практической применимости и комфорта. Перед собой пользователь видит максимально упрощённые иконки и значки, основное значение в которых уделяется иллюзии полноценного физического взаимодействия. Как ни странно, присутствуют в данном тренде и недостатки: такой дизайн нередко запутывает непривычного пользователя. Неоморфизм в первую очередь играет на свете, тени и объёме, из-за чего клиенту сложно понять, какой элемент кликабелен, а какой – нет. Это создаёт дополнительные сложности для дизайнера, который вынужден не только рисовать иконки в данном стиле, но и продумывать дополнительные состояния элементов, которые позволят сделать интерфейс понятным. Гораздо более простой выход – использовать данный приём только в одном виде компонентов: только в статичных или только в интерактивных. Достойным примером стал https://roddom.odkbko.ru : на этом сайте присутствуют 3D-элементы, но они исключительно декоративные, а все кликабельные инпуты и кнопки сохраняют привычный пользователям стиль.







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



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



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







Также одним из трендов веб дизайна в 2021 вполне можно назвать своеобразный дизайн-анархизм. Хоть и постепенно, но перфекционизм и консерватизм уходят в небытие, а в моду входит беспринципное нарушение всех существующих правил. Перекликаясь с уже развитыми модными направлениями вроде эстетичного стрит-арта или возрождения антидизайнерского брутализма в веб-сайтах, оно помогает найти наиболее интересные и нестандартные в нынешних обстоятельствах решения, методы, а в будущем и инновационные тенденции веб дизайна. Не по душе ровные сетки – можно с лёгкостью сделать её ассиметричной. Нет запретов на абсолютно безумные сочетания цветовых схем, разрывающие шаблоны шрифты, нарисованные элементы, перекрывание одних элементов другими без малейшего намёка на аккуратность – всё позволительно и разрешено, но в свою очередь разрешено лишь тогда, когда не раздражает пользователя, а вызывает у него интерес, приятное удивление и восхищение. Единственная поправка: такое решение не подходит для интерфейсов, где клиент должен сосредоточиться на важных данных, например, интерфейсы промышленных устройств. Тем не менее именно такое решение превосходно принимается разработчиками и клиентами на промосайтах творческих коллабораций, мероприятий и даже в сетевых магазинах розничной торговли, главное – подойти с умом к использованию данного метода. Пример хорошего решения в области крейзи-дизайна - Mecca.com.au, фестиваль бьюти-индустрии.







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



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



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







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