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

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

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

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

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

Технологии

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

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

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

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

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

Оплата по QR-коду

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

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

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

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

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

Headless eCommerce

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

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

Headless eCommerce

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

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

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

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

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

0
39 комментариев
Написать комментарий...
Аккаунт удален

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

Ответить
Развернуть ветку
ADCI Solutions
Автор

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
ADCI Solutions
Автор

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

Ответить
Развернуть ветку
ivan krapivin

«Но такие статьи нужны чтобы мы хотя бы за что-то платили пиарщику».

Ответить
Развернуть ветку
Ann Solobay

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

Ответить
Развернуть ветку
Неприемлемый разговор

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

Ответить
Развернуть ветку
mi me

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

Ответить
Развернуть ветку
Giant Schlong
 Наличные выходят из обихода

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

Ответить
Развернуть ветку
Андрей Крамарь

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

Ответить
Развернуть ветку
Giant Schlong

Я не очень умный. Зато красивый

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

Почитай про рост безнала в России из за пандемии, даже пенсионеры которые никогда картами не пользовались используют NFC в магазинах.

Ответить
Развернуть ветку
Giant Schlong

Да я это знаю. Что не отменяет ошибочности тезиса, приведённого в статье. Нал не выходит из обихода, а как раз наоборот

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

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

Ответить
Развернуть ветку
Giant Schlong

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

Бабушки стали больше платить картами в продуктовом — да. Я с этим никогда и не спорил. Но это не отменяет того, что в других местах нал востребован как никогда. И причём в гораздо больших объёмах, чем покупки граждан в онлайне или приобретение продуктов по банковской карте

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

Бред пишешь.

Ответить
Развернуть ветку
Giant Schlong

Если ты мало что знаешь о теневой экономике — то да, это выглядит как бред

Ответить
Развернуть ветку
Andrew Rudenko

Вы говорите такие громкие слова, но ничем их не подкрепляете. Нужны цифры, хоть что-то нужно.

Ответить
Развернуть ветку
Giant Schlong

Объём наличности увеличился на 2,6 триллиона рублей за год, я ж написал

Ответить
Развернуть ветку
Andrew Rudenko

А, ну раз вы написали... Кстати, вы кто?

Ответить
Развернуть ветку
Giant Schlong

Это данные РИА «Новости». Я человек

Ответить
Развернуть ветку
Andrew Rudenko

Я, честно, погуглил (за вас) и не нашёл никаких актуальных новостей про 2,6 триллиона. Давайте по новой: о каких флуктуациях на теневой стороне экономики вы тут затираете?

Ответить
Развернуть ветку
Giant Schlong
Я, честно, погуглил (за вас) и не нашёл никаких актуальных новостей про 2,6 триллиона

То есть даже с указанием источника вы не способны найти новость, которой чуть больше месяца? Ну ок

https://ria.ru/20201020/nalichnye-1580541977.html

Ответить
Развернуть ветку
Андрей Крамарь

Просто вброс. Не вникайте

Ответить
Развернуть ветку
Never Again

Если меня разбудят через сто лет и спросят какие тренды в дизайне будут в следующем году, я отвечу: ассиметричная верстка и микровзаимодействия

Ответить
Развернуть ветку
Илья Ефимов

Градиенты и экосистемы же)

Ответить
Развернуть ветку
Андрей Крамарь

Спасибо за статью. Недовольство проявляют лишь те, кто не видит своего участия в этих трендах.

Ответить
Развернуть ветку
Гордей Басик

Спасибо за неплохую статью!

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

Непонятно чем мини-приложения лучше чем отправить клиента на моб.версию сайта для оформления заказа или другого "одноразового" действия?

Ответить
Развернуть ветку
Сергей Копылов

Тем, что люди как-то разом разучились делать работающие веб-приложения на мобилах, а ещё тем, что так какая-никакая, а привязочка к сервису будет )

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

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

Ответить
Развернуть ветку
Андрей Крамарь

Кстати да.

Ответить
Развернуть ветку
Кирилл Иващенко

Кстати, про QR коды абсолютно согласен.
Для своих кафе подключил онлайн-меню, сгенерировал QR и вообще супер.

Ответить
Развернуть ветку
Кирилл Иващенко

Забыл добавить ссылку для создания онлайн-меню для кафе и ресторанов - https://menu.gd/

Ответить
Развернуть ветку
Зина Легзина

Хорошая статья))

Ответить
Развернуть ветку
Мария Ютько

Хорошая статья!

Ответить
Развернуть ветку
Платон Щукин

Ожидал увидеть разбор решений, а не "воду". Много изменение в motion, в модальности, копирайтинг в формате мессенджеров и т.д. Реально ещё "одна" "джинса", возможно просто перевод статьи какого-то индуса.

Ответить
Развернуть ветку
ADCI Solutions
Автор

Увы, мы не можем читать мысли и писать статьи под ваши ожидания.
Но!
Будем рады, если вы поделитесь здесь статьями на эту тему, которые понравились вам.

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

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

Развернуть ветку
Виктория Совина

Жду уже, когда можно будет все примерять онлайн) забавно, что когда-то и просто посмотреть вещь со всех сторон онлайн было "вау", и то не все до этого дошли до сих пор. Задумалась об этом, только когда увидела кейс по приложению рандеву у https://surf.ru/

Ответить
Развернуть ветку
36 комментариев
Раскрывать всегда