​Какие дизайнерские тренды будут главными в вебе и мобайле в 2021 году

Трёхмерные объекты, виртуальная и дополненная реальность, голосовой шоппинг, общающиеся голограммы и прагматичный дизайн для решения бизнес-задач — отдел дизайна ADCI Solutions и приглашённые эксперты настраивают на дизайн-тенденции грядущего года.

​Какие дизайнерские тренды будут главными в вебе и мобайле в 2021 году

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

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

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

Технологии

Голосовое управление

Необходимость что-то нажимать и печатать текст постепенно пропадает. Голосом можно делать всё, начиная с управления бытовой техники и заканчивая поиском информации на сайте. А ещё голосовому управлению пророчат большое будущее в шоппинге: с ним ищут продукты, добавляют их в корзину, делают заказы, общаются с техподдержкой. Всё это возможно благодаря поддержке браузерами Web Speech API и нескольким строчкам JavaScript-кода на сайте.

Бесконтактная оплата

Наличные выходят из обихода, а передавать вещи из рук в руки даже до 2020 года не было гигиеничным. Бесконтактная оплата будет всё больше внедряться, приветствоваться, поощряться, особенно на фоне очередного скачка онлайн-покупок в мире и в России, где их число в этом году достигло исторического максимума. Недавно держатели карт «Сбербанк» работающих по системе Mastercard, получили возможность расплачиваться с помощью Android-смартфона при помощи сервиса Sberpay.

Также новый виток востребованности переживают QR-коды. Пользователи мобильного приложения «Сбербанк Онлайн» могут сгенерировать QR-код и оплатить через него покупку в тех магазинах, где есть соответствующие считывающие устройства, например, онлайн-касса «Эвотор».

Оплата по QR-коду<br />
Оплата по QR-коду

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

С помощью этих технологий магазины одежды, ювелирных украшений и мебели уже несколько лет помогают своим потребителям сделать правильный выбор ещё до самой покупки и не пожалеть о ней. Бизнес, в свою очередь, несёт меньше убытков из-за возвратов и потери лояльных клиентов. В этом году онлайн-примерку продвигают ещё и с позиции безопасности: посетители магазинов одежды не могут быть уверенными в здоровье того, кто пользовался примерочной кабинкой до них. Оценить кроссовки и одежду дистанционно уже помогают Adidas, Nike и Lamoda, а спроектировать интерьер — приложение IKEA Place. Недавно первый в России мебельный салон, где покупатели с помощью VR-шлема могут встроить мебель в интерьер, открыл холдинг «Ангстрем».

Приложение Nike с дополненной реальностью<br />
Приложение Nike с дополненной реальностью

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

Как работает Astrafit в онлайн-магазине silvashi.com
Как работает Astrafit в онлайн-магазине silvashi.com

Headless eCommerce

Число точек контакта бренда с потребителем увеличивается, и потребители редко выбирают какую-то одну. Задача бренда — дать им одинаковый опыт взаимодействия на всех платформах. Обслужить этот запрос способна технология Headless eCommerce, смысл которой — в разделении серверной и клиентской части.

Расскажем упрощённо, как это работает. Серверная часть занимается только бизнес-логикой (созданием продуктов, обработкой платежей и т. д.) и может быть построена на CMS, в том числе Drupal. За отображение этих данных отвечает клиентская часть, разработана на фреймворках типа React или Vue.js. Общение между частями происходит через прикладной интерфейс, такой как Rest API или GraphQL.

Headless eCommerce
Headless eCommerce

Таким образом, один сервис может работать на несколько клиентских сторон, и если у ритейлера уже есть сайт, а позже он решит сделать мобильное приложение или PWA, или даже настроить систему на базе Internet of Things для персонифицированных предложений, то вместо разработки нового бэкенда достаточно подключиться к уже готовому.

Мини-приложения

Качать приложения целиком больше не обязательно: пользователям iOS 14 теперь доступны App Clips. Это небольшие части мобильных приложений размером не более 10 Мб, которые выполняют одну конкретную задачу и автоматически удаляются с телефона через 30 дней после установки.

App Clips от Apple<br />
App Clips от Apple

Тремя годами ранее Google представил Android Instant App — мгновенные приложения, выполняющие схожую с эпловскими App Clips роль: предложить пользователю решить проблему здесь и сейчас, без необходимости скачивать приложение целиком. Идеологически очень похоже на технологию Google AMP, позволяющую работать с облегчёнными страницами сайта при медленном интернете.

Супераппы

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

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

Саша Лопатюк, Арт-директор в IDT Corp.
Суперапп
Суперапп

Голографические звонки

Первый разговор с голограммой состоялся в 2017 году, в нём участвовали американский оператор Verizon и южнокорейский провайдер телекоммуникационных услуг KT. В России операторы Билайн и МТС протестировали новый способ связи в 2018 и 2019 годах соответственно при аппаратной поддержке китайской компании Huawei.

5G голографический звонок в Москве, Билайн совместно с Huawei

Хотя коммерческое внедрение голографических звонков начнётся только в 2022 году, начать привыкать к тому, что скоро мы будем жить во вселенной «Звёздных войн», стоит уже сейчас. Дело за внедрением 5G-сетей — только с их скоростью и пропускной способностью такие звонки возможны. За этим последует полное изменение подхода к разработке коммуникативного дизайна в веб-интерфейсе.

LiDAR

Технология, благодаря которой можно построить модель объекта или целого куска пространства на основе отражённого этим объектом света. За долгие годы развития она нашла применение в исследовании атмосферы, геодезии, изучении морей и, что наиболее актуально в последние годы, в проектировании беспилотных автомобилей. В этом году сканер LiDAR стал ещё ближе к массам: его включили в функциональность сначала iPad Pro 4 поколения, а чуть позже и iPhone 12 Pro. Клонирование объектов выглядит круто, но в практической необходимости этой технологии сомневаются, и пока вменяемых кейсов использования немного: AR-игры, фотосъёмка, измерение роста.

LiDAR в iPhone 12

Визуальные решения

Accessibility-дизайн

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

Если понятия accessibility и инклюзивность в отношении веб-дизайна вам пока в новинку, мы написали для вас статью об этом в трёх частях: раз, два, три.

Тёмная тема

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

Тёмная тема в Twitter

3D

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

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

Роман Храмов, Сооснователь Cuberto
3D-графика на сайте go.pioneer.com

Важную роль в том, что 3D-объекты наводнили веб, сыграла и демократизация процесса их создания. Прежде чем перейти на платные профессиональные инструменты Cinema 4D, Adobe After Effects и 3ds Max, можно поиграться с бесплатными программами 3D-моделирования вроде Vectory, SketchUp Free и 3D Slash.

3D — это новый скевоморфизм (принцип в дизайне, предполагающий имитацию объектов из реального мира — прим.ADCI Solutions), объёмы активно возвращаются в повседневные интерфейсы как элементы графики. Посмотрите на новые иконки в macOS Big Sur, например.

Саша Лопатюк, Арт-директор в IDT Corp.
3D-графика на сайте useplink.com/en

Шрифты

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

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

Роман Храмов, Сооснователь Cuberto
Шрифты на сайте sixmorevodka.com

Фокус на типографике — тренд, который существует уже несколько лет и станет еще популярнее. Шрифты становятся все сложнее и безумнее. Последний тренд в типографике — нечитабельные шрифты. Яркие, насыщенные цвета и простые геометричные формы также будут актуальны.

Инна Кондратьева, Дизайнер интерфейсов Redmadrobot

Брутализм

В двух словах подход можно описать так: никаких излишеств. Веб-брутализм, как и его прототип из архитектуры, исповедует грубую простоту по заветам иконы функциональной архитектуры Ле Корбюзье. Спустя 4 года тренд продолжает оставаться с нами, хотя он достаточно специфичен и подходит не для каждой сферы. Агрегатор брутальных сайтов Brutalist Websites поможет вам составить представление о специфике стиля.

Ассиметричная вёрстка

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

Страница с ассиметричной вёрсткой
Страница с ассиметричной вёрсткой

Темпы развития всё быстрее, продукты запускаются всё чаще, поэтому дизайнеры умышленно оставляют шероховатости и неточности в интерфейсах. Это такая ответочка Pixel Perfect, который уже всех утомил.

Саша Лопатюк, Арт-директор IDT Corp.

Микровзаимодействия

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

Микровзаимодействия на сайте designcode.io

Вместо заключения

Как мне кажется, тренды складываются под влиянием трендсеттеров, технологий и культуры. И тут надо понимать, что когда мы говорим «влияние», мы говорим о влиянии каких-то вещей именно на дизайнеров, а не на общество в целом. Так, тематика киберпанка может быть абсолютно неинтересна среднему пользователю, но обилие её в информационном поле дизайнера может подтолкнуть к созданию Tesla Cybertruck.

Саша Лопатюк
, Арт-директор IDT Corp.

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

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

Максим Десятых

, Член совета директоров Redmadrobot

Считаете, что брутализм умирает? Или мы упустили самый важный тренд? Ваши комментарии дополнят статью.

5050
39 комментариев

Комментарий недоступен

8
Ответить

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

4
Ответить

Поддерживаю))) И как же надоело видеть только рекламу вместо статьи. Сразу отворачивает от портала своей топорностью.  

1
Ответить

Не смотри, всё просто. 

1
Ответить

Отличная статья и написано лаконично-интересно + ни разу не тупо (За исключением слова «трендсеттер»))) Пофигу сколько их... Здесь - кач! И, как написали выше, не читай, в натуре.

1
Ответить

 Наличные выходят из обихода

Ровно наоборот. На фоне экономического кризиса и закручивания гаек государством, наличность востребована ого-го как. Плюс 2,6 триллиона рублей за год. Чем сильнее государство будет стараться залезть в карман к гражданам (а оно будет) — тем популярнее будет нал

4
Ответить

такой себе из тебя аналитик. 

5
Ответить