9 главных трендов UI/UX-дизайна в 2021 году

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

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

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

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

Глассморфизм — тоже из этой же школы. Идея в том, что люди привыкли взаимодействовать с предметами через стекло. Например, покупатели через стекло смотрят на стрелки часов или рассматривают витрину ювелирных изделий. Глассморфизм имитирует видимость «сквозь стекло» за счет размытия фона. И создает иллюзию плавающих стеклянных панелей в вертикальном пространстве.

В 2021 году дизайнеры открыли для себя новый стиль — стекломорфизм. Он достигается благодаря такому эффекту размытия. Этот дизайн UI уже используется на многих известных площадках, но имеет и минусы. Например, пользователям с плохим зрением может стать сложнее взаимодействовать с IT-продуктом, оформленным в таком стиле.

Ежедневно мы сталкиваемся с множеством изображений, и чем проще они нарисованы и расположены — тем проще воспринимаются. Это привело к появлению минималистичного движения в UI/UX-дизайне. Компоненты в этом стиле сведены к минимуму, к кружку и паре черточек, чтобы не перегружать пользователя. Применяются тени софтбокса.

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

Google и Apple уже выпустили свои платформы разработки дополненной реальности, ARCore или ARKit , обеспечивающие бесшовную интеграцию цифрового и физического миров.

Пользовательские интерфейсы AR могут принимать различные формы:

Apple много вкладывает в дополненную реальность, много энтузиазма в штатах вызывает грядущий релиз Apple Glasses. Нет сомнений, что в дальнейшем интерфейсам придется все сильнее адаптироваться к условиям AR/VR.

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

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

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

Без микрокопии пользователи были бы дезориентированы при взаимодействии с любым компьютерным интерфейсом. Термин часто называют «маленькими словами с большой силой». Он значительно влияет как на пользовательский опыт, так и на значение коэффициента конверсии.

Пользователи также получают удовольствие от используемых (в меру) 3D-эффектов. Отсюда происходят микровзаимодействия — небольшие моменты, в которых пользователь и дизайн взаимодействуют друг с другом. Объекты на экране анимированы и кажутся живыми. На них можно кликнуть, и что-то изменится. За последний год упора на микрокопию, микровзаимодействия и в целом минимализм стало гораздо больше.

Еще одна новая (а на самом деле, старая) тенденция UX. Давно установлено, что для хорошей работы дизайн не обязательно должен быть привлекательным. С ним просто должно быть удобно работать.

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

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

Если даже самая отличная графика вряд ли сможет привлечь внимание пользователя. Все уже видели всё. А вот анимация по-прежнему может удивить. Она повышает вовлеченность, и придает дизайну жизнь. Не зря Apple активно использует ее на своем сайте, особенно при презентации новых iPhone. И не зря за нее так активно топит Студия Лебедева. Не всем это нравится, особенно когда вы не планировали задерживаться на сайте. Но это работает. И на сайте людей задерживает.

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

Яркие, для многих даже «вырвиглазные» цвета используются в дизайне UI/UX по-разному, чаще всего в сочетании с другими компонентами графического дизайна. Неплохо работают при использовании креативного, «своего» цветового градиента на сайте. Особенно здорово смотрится при наличии эффектов размытия и зернистости. Хотя, конечно, как и все современные тренды, — это на любителя.

Концепция Air Gesture — новая тенденция, развившаяся за этот год. Впервые появилась в телефонах Samsung в конце 2020-го, а сейчас её используют и Huawei, и Xiaomi. Включает в себя такие жесты, как демонстрация ладони, чтобы сделать селфи перед камерой, или движение пальцем, означающее тап по экрану. Выставленный вперед палец значит «готов», сжатая ладонь — «подожди». Жестов много, и устройства уже умеют их распознавать — это не сложнее, чем считать ваше лицо для Face ID.

Типографика имеет решающее значение в дизайне ИТ-продукта. Правильный выбор размера шрифта и элементов может давать удивительные результаты .

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

Многие студии начали использовать крупные и жирные шрифты в пользовательском интерфейсе и графическом дизайне. Запомните этот твит: крупной типографики станет еще больше в 2022 году. В некоторых случаях она будет основным элементом веб-сайта (и это уже происходит).

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