Май 07

UI Design 2021: краткий обзор трендов дизайна интерфейсов

Привет! Меня зовут Алексей, я Principal UI Designer в компании Astound Commerce, которая специализируется на разработке e-commerce решений. Работаю с известными брендами на рынках США, Британии, Германии, а также занимаюсь разработкой дизайн-процессов внутри компании. Свой путь дизайнера я начал давно — еще со школы, когда у меня появился первый компьютер с возможностью запустить Photoshop. С тех пор мой энтузиазм в этой профессии не утихает, а напротив — экспоненциально увеличивается так же, как развиваются технологии, в которых дизайн играет важную роль.

Готовя эту статью, я хотел не только обратить ваше внимание на дизайн-тренды, но и дать ссылки на материалы, которые пригодятся в этом году. Я хотел разобрать тренды с точки зрения своего практического опыта (на примере разработки e-commerce проектов), успеха, ошибок, и раскрыть нюансы, которые обычно опускаются. Подобный формат позволит сделать не просто сухой обзор темы, но начать диалог между дизайнерами разного уровня зрелости: мой опыт может отличаться от вашего, так что делитесь им в комментариях. Итак, поехали!

Начнем мы с базовых навыков UI-дизайнера, которые будут в тренде всегда, включая 2021 год — работы с композицией, цветом и типографикой.

Композиция

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

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

Когда я начинал свой путь в дизайне, у меня не было особых проблем с композицией, так как я имел за плечами несколько лет обучения в художественной школе. Задачей лишь было понять, как применить эти знания в дизайне интерфейсов. Но, обучая новичков на курсах, я понял, что это проблема номер один начинающих дизайнеров. Начинать стоит с основ. И при рассмотрении макетов на Dribbble и Behance обращать внимание необходимо на то, из чего состоит композиция, динамическая она или статическая, используется ли модульная сетка и по каким принципам она построена, как сгруппированы объекты, используются ли пропорции золотого сечения или любые другие, как элементы выравниваются относительно друг друга и так далее. Можно, конечно, набивать руку, перерисовывая референсы и не зная теории, но это значительно замедлит ваш прогресс как дизайнера и не позволит удачно адаптировать композиционный прием под уникальную дизайнерскую задачу.

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

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

Credits

Цвет

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

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

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

генератор по классическим правилам гармонии;
генератор палитр по фотографиям;
генератор палитр c использованием Deep Learning;
еще один интересный генератор палитр.

Типографика

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

В 2021 году все так же будут популярны классические шрифтовые стили и их сочетания, но есть ярко выраженная тенденция к созданию более динамичных композиций с использованием типографики и анимированного текста. Все чаще типографика будет основополагающим элементом, который задает визуальный стиль и передает эмоцию. Также в Web сейчас популярен такой прием, как «красная строка» (одно из названий абзаца). Советую использовать его с умом, только там, где это уместно.

Credits

Полезные ресурсы:

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

3D в интерфейсах Еще в 2018-м я заметил увеличение количества сайтов и приложений с 3D-иллюстрациями, начал изучать программу Cinema 4D, и оказалось, что не зря. Весь 2020-й готовил нас к появлению 3D и псевдо-3D в интерфейсах, а выход новой MacOS Big Sur только укрепил мнение о том, что эра абсолютно плоского дизайна закончилась. На смену пришли минимализм и использование 3D-эффектов, которые не претендуют на реализм, но создают привлекательный вид за счет объема. Освещение и материалы при этом предельно упрощены. Как иллюстрация вспомнилось высказывание Альберта Эйнштейна: «Делай просто, насколько возможно, но не проще этого».

Наиболее популярные кейсы использования 3D в 2021:

3D-иконки

Credits

3D-типографика

Credits

Hero-баннеры для главных страниц сайта с использованием абстрактных композиций и необычных сочетаний материалов

Credits

Если добиться эффекта псевдообъема в интерфейсе не так сложно с помощью теней и градиентов, то создание полноценных трехмерных иллюстраций или сложных иконок уже нетривиальная задача, требующая знания как минимум одного 3D-редактора. Советую изучать Cinema 4D (платный) или Blender (полностью бесплатный). Я использую связку Cinema 4D + Keyshot. При том, что в Cinema 4D можно и моделировать, и рендерить сцены, я предпочитаю именно такую связку, так как в Keyshot есть много готовых материалов и просто работать с освещением. Это помогает максимально быстро реализовать идею, не заморачиваясь над техническими нюансами.

Более того, для тех, кого отпугивает интерфейс 3D-редакторов, на рынке появился такой инструмент, как Spline.design. Есть поддержка Mac OS и Windows. Интерфейс очень похож на Figma или Sketch, при этом в нем есть все инструменты для работы с простой геометрией и базовыми свойствами материалов. Более сложные материалы пока приходится реализовывать с помощью текстур. На момент написания статьи Spline.design полностью бесплатный. Хотя в силу специфики отрасли дизайна, в которой я работаю, 3D-визуализация используется редко (честно говоря, в рамках коммерческих проектов ни разу не использовал), свои навыки в 3D я применяю в презентационных материалах. Ниже пример того, что можно сделать за пару часов до презентации.

Размытие и эффект матового стекла

Концепция Frozen Glass заключается в создании полупрозрачных блоков или карточек с дополнительным эффектом размытия под ними — так получаем ощущение замерзшего стекла.

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

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

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

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

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

Credits

Доступные интерфейсы

Accessibility (доступность) — это инклюзивная практика, благодаря которой люди с ограниченными возможностями могут удобно взаимодействовать с интерфейсом. Доступность интерфейса можно улучшить, выполняя рекомендации, собранные в Web Accessibility Guidelines. Первая версия была опубликована в 1999 году и состояла из 14 правил.

В последней версии, WCAG 2.1, количество правил увеличилось до 78 и ожидаемо будет расти вместе с количеством новых устройств и интерфейсов. В WCAG выделяют несколько основных нарушений функций организма: сенсорные (зрение, слух), языковые и речевые, физические, или моторные, и когнитивные. Также в этих гайдлайнах учитывается взаимодействие человека с ПО через альтернативные устройства ввода/вывода информации или ситуации, когда какое-нибудь устройство отсутствует (например, мышь или клавиатура).

Почему это важно в 2021?

Иметь доступ к любой программе — право каждого человека. Эта тема была и остается актуальной уже много лет, но именно в начале 2020-го увеличился и продолжает расти спрос на реализацию данных принципов в коммерческих проектах. Этому способствуют не только идея равенства всех пользователей, улучшение UX, расширение целевой аудитории, но еще и ужесточение требований со стороны закона некоторых стран к бизнесу (в частности США и стран Европы), а также растущее количество судебных исков, связанных с жалобами пользователей. И если раньше нужно было доносить до бизнеса, что это важно и в это имеет смысл инвестировать, то сейчас бизнес сам просит реализовывать проекты со строгим следованием WCAG или корректировать дизайн уже существующих e-commerce решений.

Материалы, которые могут пригодиться:

плагин для создания «доступных» цветовых схем в Figma;
тестирование Accessibility прямо в браузере;
статья о создании «доступных» анимаций.

Дизайн-системы и библиотеки компонентов

Дизайн-система — понятие обширное и может не только включать список таких базовых UI-элементов, как цвет, типографика, кнопки, элементы форм, иконки, анимация, но и другие графические материалы, руководства по использованию, примеры кода и так далее. Наиболее расширенными версиями дизайн-систем можно назвать Google, Apple, Microsoft. Дизайн-системы создаются для ускорения работы команды, при этом не теряется качество и консистентность конечных макетов.

Я с ностальгией вспоминаю те времена, когда проект можно было вписать в несколько десятков страниц. Сейчас же сайты, сервисы, приложения стали настолько сложными, что количество страниц достигает нескольких сотен (иногда тысяч), и выполнить такой объем работ одному в адекватные сроки уже невозможно. При этом, работая в команде, нужно сохранить визуальную консистентность, иметь возможность быстро вносить правки в глобальные элементы (например, шрифт, цвет, кнопки) и не тратить много времени на коммуникации типа: «Так тут 14 или 16 кегль текста?».

Отрисовка среднестатистического e-commerce проекта вписывается в 300–400 страниц, которую нужно выполнить примерно за два месяца с учетом ревью-сессий и правок от бизнеса. Ситуация с COVID увеличила долю e-commerce на глобальном рынке, клиентов стало больше, а сроки на выполнение проектов сократились.

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

Если вы никогда не сталкивались с дизайн-системами и не знаете, с чего начать, вот еще немного примеров для вдохновения:

введение в дизайн-системы;
крутое комьюнити, в котором рассказывается, как создаются дизайн-системы;
дизайн-система от Ant;
дизайн-система от Atlassian.

Вывод

Никогда не стоит копировать бездумно чужой дизайн. Использованные графические приемы должны быть созвучны с идеей, которую вы хотите донести до конечного пользователя. Начиная дизайн без идеи, вы рискуете зайти в тупик. Как говорил римский философ Сенека (младший): «Когда корабль не знает, в какой порт направляется, никакой ветер не будет попутным». Если идея сразу не приходит, вам может помочь тот, для кого вы делаете проект. Я часто прошу визуальные референсы у клиента — ссылки на те сайты или приложения, которые ему нравятся. Это помогает составить карту предпочтений заказчика и понять, насколько он восприимчив к новым визуальным тенденциям. Так вы сузите фокус и не будете распыляться на те вещи, которые заранее не приемлемы.

Уделяйте особое внимание Accessibility в интерфейсе с самого начала разработки проекта. Это не просто тренд — это то, чего требует от нас современная реальность. Если вы никогда не сталкивались с подходами к созданию доступных интерфейсов, то соответствие WCAG вас может ощутимо ограничить в приемах визуализации, но в то же время прокачает креативность. Определите, какие визуальные параметры вашего интерфейса будут константой, их вы трогать не будете (например, уровень контраста, размер шрифта, размер кликабельных элементов и прочее), а с какими можно «поиграться». Так вы поймете, что доступные интерфейсы можно делать не только доступными, но и привлекательными.

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

Вдохновляйтесь не только сайтами и приложениями, но и всем, что вас окружает. Читайте книги, погружайтесь в другие домены и науки. И прокачивайте свой стиль — возможно, он станет новым трендом. Успехов!