Презентация
серверов от Acer
До начала осталось:
Смотреть
Дизайн
Евгений Кузнецов

Тренды 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.

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

{ "author_name": "Евгений Кузнецов", "author_type": "self", "tags": [], "comments": 8, "likes": 18, "favorites": 125, "is_advertisement": false, "subsite_label": "design", "id": 219114, "is_wide": false, "is_ugc": true, "date": "Thu, 11 Mar 2021 13:16:20 +0300", "is_special": false }
0
8 комментариев
Популярные
По порядку
Написать комментарий...
4

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

Ответить
0

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

Ответить
3

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

Ответить
2

Впечатляет)

Ответить
0

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

Ответить
1

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

19 ноября 2020

Ответить
0

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

Ответить
0

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

Ответить

Комментарии

null