Тренды 2021 в дизайне сайтов, приложений и email-рассылок

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

Привет, меня зовут Евгений Кузнецов. Я сооснователь WIM.Agency, наши основные направления — CRM-маркетинг, Performance и Creative Design. Мы делаем UI/UX-дизайн пользовательских интерфейсов, занимаемся геймификациями, созданием промо-материалов и многим другим.

Разбираться в дизайне — это наша работа, поэтому в этой статье Юля Корсун, дизайнер WIM.Agency, помогла мне выбрать основные тренды дизайна 2021. Многие из которых стали популярны еще в прошлом году, но они точно будут встречаться в интерфейсах, макетах, баннерах и лендингах в 2021.

Градиент

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

Берите за основу светлые тона градиента, если хотите задержать взгляд аудитории на продукте, а яркие и контрастные — для акцентов.

Иллюстрация: Education on Behance

Внимательно подбирайте стили градиента: например, радиальный больше подойдет для круглых областей, линейный — для квадратных.

В помощь дизайнеру: для подбора градиента используйте генератор CSS или готовые градиенты с номерами цветов RGB и кодом CSS.

Стекломорфизм

Эффект матового стекла, в основе которого лежит комбинация тени, прозрачности и размытия фона, добавит дизайну глубины и поможет с визуальной иерархией. Убедитесь, что у фона достаточно тональной разницы — используйте яркие цвета, чтобы эффект был заметнее. В качестве референса можно посмотреть на цвет фона обоев по умолчанию в Mac OS Big Sur.

Иллюстрация: Skyeng on Behance
Иллюстрация: Frosted Glass ICON on Behance

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

В помощь дизайнеру: выберите подходящие параметры эффекта и скопируйте его код в CSS Generator.

Стикеры

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

Иллюстрация: SNIPPET on Behance
Иллюстрация: Education on Behance

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

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

Объемные иконки-иллюстрации

3D иконки и иллюстрации — вижуал, который пользуется популярностью в 2021 году. Дизайнерам стало проще создавать объекты в трехмерном пространстве благодаря высокопроизводительному ПО, а высокая скорость интернета, развитие VR/AR и мощные гаджеты лишний раз будут подталкивать к конструированию гиперреальных визуальных эффектов.

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

В помощь дизайнеру: рекомендуем обратить внимание на UI8, коллекцию 3D-моделей рук Handy 3D Hands и изометрических иконок.

Стиль дизайн-систем

«Цитирование» элементов, характерных для определенных дизайн-систем и программ, привнесет новые смыслы в макеты бренда.

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

В помощь дизайнеру: примеры элементов дизайн-системы Figma и Mail.ru Group.

Виртуальная реальность

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

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

В помощь дизайнеру: вдохновитесь виртуальным концертом Трэвиса Скотта в Fortnite на 12 миллионов человек, где в конце все улетели в космос.

Анимация

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

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

В помощь дизайнеру: пример анимированного баннера SKR4T 2.0, олдскульная реклама часов с анимированными зарисовками и минималистичные анимации от Google Chrome.

Что думаете о трендах? Вовсе не обязательно внедрять в вашу дизайн-систему все актуальные элементы, но многие из них наверняка улучшат визуалы бренда.

0
8 комментариев
Написать комментарий...
Анна Лазарева

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

Ответить
Развернуть ветку
Евгений Кузнецов
Автор

Согласен, все должно быть в меру. 
Дизайн не должен отвлекает от основной цели сайта. 

Ответить
Развернуть ветку
Roma Brann

Опять тренды ...

Ответить
Развернуть ветку
Пётр Радищев

Впечатляет)

Ответить
Развернуть ветку
Евгений Кузнецов
Автор

Спасибо! Мы старались. 

Ответить
Развернуть ветку
Egor Komarov

я просто оставлю это тут https://vc.ru/design/178662-devyat-glavnyh-trendov-v-ux-ui-dizayne-v-2021-godu

19 ноября 2020

Ответить
Развернуть ветку
Евгений Кузнецов
Автор

Ну а как же без них? :)

Ответить
Развернуть ветку
Eugene Trofimenko

Григорий Остер, перелогинься

Ответить
Развернуть ветку
Читать все 8 комментариев
null