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

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

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

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

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

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

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

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

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

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

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

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

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

В помощь дизайнеру: немного вдохновения с 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.

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