Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>14 дек 2021</li>

3 <li>0</li>

4 </ul>Рассказываем, что пришло к нам в 2021 году и что останется надолго, а что, скорее всего, оказалось лишь быстротечным трендом.

5 Иллюстрация: Meery Mary для Skillbox Media

6 UX/UI- и веб-дизайнер. Делает сложные вещи простыми и пишет об этом.

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

8 Похоже, пандемия с нами надолго и отступать не собирается, а значит, важность UX и UI будет только расти. В нашей статье мы рассмотрим, какие тренды в вебе и мобайле принёс нам 2021 год, и попробуем спрогнозировать, как они будут развиваться дальше.

9 Мы расскажем про:

10 <ul><li><a>UX-тренды</a>;</li>

11 <li><a>UI-тренды</a>;</li>

12 <li><a>типографику</a>;</li>

13 <li><a>главный тренд на ближайшие годы</a>.</li>

14 </ul>Этим термином можно назвать UX-приёмы, которые побуждают пользователя совершить определённое действие. Например:

15 <ul><li>На букинговом сайте появляется карточка номера с сообщением "Последний вариант по этой цене!".</li>

16 <li>На сайте авиакомпании рядом с выбранной датой загорается надпись "Осталось 5 билетов".</li>

17 <li>В маркетплейсе во время скроллинга по каталогу, всплывают надписи "Иван А. только что заказал этот товар".</li>

18 </ul>Эти триггеры заставляют пользователя скорее купить, забронировать, заказать, написать. Тренд не нов, но его активное внедрение в этом году связано со значительным ростом онлайн-коммерции. В 2021 году люди используют интернет для большинства бытовых действий - сильно вырос рынок онлайн-продаж и услуг, увеличилась конкуренция.

19 С этого года при просмотре вакансии на сайте hh.ru указывается, сколько человек просматривает её в данный момент. Скриншот: сайт<a>hh.ru</a>В 2021 году увеличивается количество использования приёмов, влияющих на поведение, и в приложениях:

20 <ul><li>мотивирующие сообщения;</li>

21 <li>персонализированные рекомендации;</li>

22 <li>бонусы за регулярное использование приложения.</li>

23 </ul>Это побуждает пользователя заходить чаще, чтобы получить "награду".

24 Функция "Моя волна" на "Яндекс.Музыке" - бесконечный плейлист на основе интересов пользователей, запущена в 2021 году. Скриншот: приложение "Яндекс.Музыка"Поведенческий дизайн используют приложения и в бытовых целях. Функция отсчёта времени мытья рук в Apple Watch. Изображение:<a>apple.com</a>Останется ли тренд?Тренд работает хорошо и появляется во всё новых областях. Но пользователи достаточно негативно относятся к назойливости - если на сайте постоянно появляются сообщения "Купи скорее, не то опоздаешь!", это воспринимается как информационный шум. Первый восторг от такого рода маркетинга пройдёт, и функции, влияющие на поведение, станут мягче - в ненавязчивых, нативных формах, не продающих в лоб. А вот анализ поведения пользователя при помощи нейросетей будет расширяться и проникать во все сферы.

25 Какое-то время назад многие десктопные приложения пали под натиском мобильных приложений и онлайн-сервисов - их развитие практически полностью остановилось. Во многом этому способствовала офисная работа - зачем ставить приложения на чужой (рабочий) компьютер или личный ноутбук (который включаешь ненадолго лишь вечерами). С распространением удалёнки десктопные приложения переживают второе рождение. Так, пользоваться мессенджерами в течение рабочего дня удобнее именно в приложении, нежели постоянно переключаться между вкладками браузера для решения рабочих вопросов или набирать сообщения на экранчике телефона.

26 Созданные в 2016 и 2017 годах десктопные приложения для WhatsApp и Telegram с начала пандемии стали выпускать обновления каждый месяц, устраняя ошибки или добавляя новые функции. А Instagram*, ранее доступный только на телефоне, теперь полноценно работает и в стандартном браузере.

27 Desktop-версия приложения Telegram. Скриншот: Skillbox MediaОстанется ли тренд?Да, поскольку удалённая работа плотно вошла в нашу жизнь, и мессенджеры заменили личное общение между сотрудниками. Следующий шаг - создание десктопных приложений для программ, существующих сейчас только онлайн, и развитие десктопной версии для мобильных приложений. Не исключено, что часть из них наконец начнёт работать без подключения к интернету.

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

29 Голосовой помощник от "Мегафона". Изображение: "<a>Мегафон</a>"Анонс функций мобильного голосового помощника от компании Macroscop - он работает с системами видеонаблюдения. Изображение:<a>Macroscop</a>/ Satellite Innovation LLCПереломным для развития голосовых сервисов стал прошлый год, а в этом году о подготовке к запуску голосовых помощников заявили "Мегафон", "Билайн", ВТБ, "Альфа-Банк". Совершенствуются и имеющиеся помощники - в этом году Siri обрела два голоса, один из которых женский, а второй мужской.

30 Останется ли тренд?Однозначно. Аналитики Juniper Research прогнозируют, что к 2023 году на одного человека будет приходиться 2-3 голосовых помощника. Во-первых, в современном ритме жизни голосовое управление - это действительно удобно. Во-вторых, с распространением удалёнки и сокращением "живых" контактов пользователям всё чаще хочется общаться голосом, что даёт развитию технологии дополнительный стимул. В-третьих, миллениалы и зумеры вообще не очень любят вводить текст, что показывает популярность голосовых сообщений в тех же мессенджерах. За этой технологией - будущее, и она плотно войдёт в проектирование интерфейсов.

31 С самого момента появления смартфон стал неотъемлемой частью жизни современного человека, а с развитием удалёнки он превратился в полноценный гаджет для работы, тренировок, учёбы и саморазвития. В этому году качественный UX для гаджета - это не только расположение элементов и выбор шрифтов. Расширяются возможности взаимодействия человека со смартфоном, а смартфона - с человеком.

32 Управление часами Apple Watch при помощи жестовТак, например, с этого года умными часами Apple Watch можно управлять с помощью жестов - сжимая и разжимая кулак, сводя пальцы и при этом не прикасаясь к экрану. Поменялась и обратная связь от смартфона к человеку - выросло количество микровзаимодействий, то есть незначительных изменений интерфейса как откликов на действия при работе с устройством.

33 Останется ли тренд?Каждое улучшение качества взаимодействия ведёт к повышению продаж. И с ростом производительности устройств будет расти и количество разнообразных реакций на действия пользователя.

34 Большинство активных и платёжеспособных пользователей интернета - миллениалы, чьё детство пришлось на девяностые. Именно поэтому ностальгия по этим "тёплым ламповым" временам отражается и в дизайне. Приглушённо-плёночные или, наоборот, яркие цвета, неон, простые наивные рисунки, геометрические фигуры в качестве украшений - всё это новый тренд.

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

36 Трёхмерная анимация колонки Apple HomePod mini. Изображение:<a>Apple</a>Ещё одно явление можно назвать термином "новый монохром". Тёмная тема по-прежнему с нами, но в этом году она приобрела новые черты - на пике имитация свечения и контраст. Это тоже связано с ностальгией по "неоновым девяностым". Сайты в таком стиле смотрятся достаточно свежо и интересно, но при этом лаконично.

37 Сайт студии Advanced Team с неоновым свечением и 3D-эффектом. Скриншот: сайт<a>advanced.team</a>Останется ли тренд?Пока миллениалы у руля, тренды из девяностых точно будут популярны. Тем более что этой "давно забытой" атмосферой начинает проникаться и более молодое поколение, вдыхая в неё новую жизнь. Ностальгия по девяностым точно останется, но "выживут не все": вслед за неоморфизмами в небытие могут кануть и неоновые огни. Но это будет после, а пока они только приходят в моду.

38 Абстрактная графика и цветовые пятна хорошо вписываются в любой дизайн, поэтому этот тренд продолжает быть популярным в 2021 году. Градиенты в этом году становятся сложными, но с очень мягкими переходами. В цветовых пятнах нет чётких границ, они как бы растворяются на поверхности фона. Но иногда приобретают и более резкие очертания, становясь похожими на узоры в технике tie dye.

39 Использование градиента на сайте студии декора Moooi. Скриншот: сайт<a>moooi.com</a>Останется ли тренд?Градиенты и абстракции дают массу вариаций. В сочетании с 3D и интерактивными возможностями для них открываются безграничные перспективы.

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

41 Использование иллюстрации на сайте "Ситимобил". Скриншот: сайт<a>city-mobil.ru</a>Использование иллюстрации в приложении "Ситимобил". Изображение: "<a>Ситимобил</a>"Останется ли этот тренд?Конечно - иллюстрации делают дизайн ярче и снимают с него налёт серьёзности. Учитывая, что во время пандемии мир стал более закрытым и серым, иллюстрации в UI привносят элемент праздника. На что и делают ставку производители сервисов и услуг. Главное, чтобы рынок не перенасытился.

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

43 Анимированные портреты в рамках на сайте pitch.com. Изображение:<a>pitch.com</a>Останется ли тренд?Фото, которые присутствуют на большинстве сайтов, всегда будут нуждаться в подаче - например, взаимодействовать с интерфейсом и играть не только информационную или декоративную роль. Дизайнерам будет интереснее придумывать такие механики, а пользователям - взаимодействовать с ними.

44 Весь год в тренде крупные шрифты в стиле брутализм. Они могут быть анимированными или градиентными. Возвращаются контурные надписи. Также один из "ретротрендов" - надписи с круговым расположением текста, внутри которых тоже может быть размещён элемент - например, лого или фото.

45 Сайт Catapultismo Studio. Скриншот: сайт<a>catapultismo.com</a>Антиквенных шрифтов на сайтах стало ещё меньше, чем в прошлом году. И это неудивительно - им сложно вписаться в новые тренды: они теряются на фоне градиентов, конфликтуют с упрощёнными иллюстрациями и объёмами трёхмерной графики.

46 Останется ли тренд?Круговые надписи скоро уже всем наскучат. Этот тренд интересен, как и всё "хорошо забытое старое", но не очень хорош для восприятия. Что касается крупных и контурных надписей - скорее всего, они останутся, особенно если принять во внимание развитие адаптивного дизайна.

47 Ну и наконец - главный дизайн-тренд 2021 года совпадает с общей повесткой: принятие каждого таким, какой он есть, и обеспечение равных возможностей даже для узких аудиторий. Эту тенденцию можно проследить, начиная оформлением сайтов и приложений и заканчивая UX.

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

49 Хотя на иллюстрации изображён конкретный персонаж - женщина, - она лишена стереотипной гендерной визуализации. Девушка не одета в платье, не обладает "модельной внешностью", а её волосы покрашены в синий - что отражает разнообразие наших вкусов и предпочтений. Изображение: Skillbox MediaЕсли же говорить об интерфейсах, сейчас всё больше крупных компаний и сервисов обращаются к тому, чтобы делать свои сайты удобными для пользователей с ограниченными возможностями. При этом речь идёт не о специальной адаптивной версии продукта, а о разработке основного дизайна таким образом, чтобы его было легко воспринимать любому пользователю.

50 Для создания адаптивных сайтов используется международный стандарт WCAG 2.1. Именно прописанные в нём требования начинают работать как дизайн-тренды. И именно они будут задавать моду на ближайшие годы.

51 Светофор, адаптированный для людей с нарушениями цветового зрения. Сигналы обозначены не только цветом, но и формой светового поля. Фото:<a>Wikimedia Commons</a><ul><li>Стандарт выдвигает вполне конкретные требования к контрастности текста и изображений: не менее 4,5 к 1. Исключение делается только для крупных надписей и совсем незначительных с точки зрения UX элементов. Именно поэтому "бледных" и "однотонных" сайтов в ближайшие годы мы будем видеть всё меньше и меньше.</li>

52 <li>Из-за этих же стандартов придётся отказаться от слишком тонкой неконтрастной обводки текста или эффекта свечения.</li>

53 <li>Отдельные требования и к используемым сочетаниям цветов. Людям с нарушениями цветового зрения может быть сложно воспринимать такие сочетания, как красный и зелёный, голубой и фиолетовый, салатовый и жёлтый, зелёный и голубой, синий и серый, - вместо цветовых контрастов они видят близкие по цвету оттенки.</li>

54 <li>Поскольку стандарт рекомендует использовать интуитивно понятный регулировщик масштаба до 200%, то дизайн будет проектироваться с учётом того, что при масштабировании он должен оставаться удобным (и красивым).</li>

55 <li>В адаптивной версии цвет не должен быть единственным способом передачи информации. Например, если поле в форме заполнено неверно, то помимо выделения цветом должно появляться предупреждение или специальный значок. Дизайнеры будут стремиться решать задачу графически, поэтому нас ждёт увеличение количества интересных иконок на сайтах.</li>

56 </ul>Сайты, подобные этой игре от Readymag, отойдут в прошлое. Она не масштабируется, а сочетания зелёного и голубого плохо воспринимается людьми с нарушениями цветового зрения. Скриншот: сайт<a>readymag.com</a>Останется ли тренд?Конечно, ведь сейчас заложена основа для социального взаимодействия на протяжении всего ближайшего десятилетия. Тренд будет развиваться с каждым годом - адаптивные сайты будут заказывать крупные компании, а остальные, следуя за ними, - подхватывать эти визуальные тенденции. Так что к трендам будущего мы смело можем отнести:

57 <ul><li>контрастность;</li>

58 <li>масштабируемость;</li>

59 <li>визуальное структурирование информации.</li>

60 </ul>Уверены, в этом прогнозе мы не ошибёмся!

61 UX/UI-направление продолжает развиваться семимильными шагами - пандемия очень сильно повлияла и на онлайн-сферу, и на реальное потребление услуг. На основе прошедшего года можно выделить следующие тренды-2022:

62 <ul><li>Функции, влияющие на поведение, внедряются теми, кто их ещё не использовал. При этом их количество сокращают те, кто "наигрался" в них в 2021 году.</li>

63 <li>Количество приложений для десктопа увеличивается, а имеющиеся получают активное развитие.</li>

64 <li>Внедряются функции голосового управления в приложениях и готовится почва для их интеграции в вебе.</li>

65 </ul><ul><li>Аллюзии к девяностым сохраняются - уже в новом прочтении.</li>

66 <li>Абстрактная графика будет использоваться по-прежнему, но её стиль будет эволюционировать.</li>

67 <li>Иллюстрация будет востребована до тех пор, пока рынок не перенасытится и маятник не качнётся в другую сторону.</li>

68 <li>Гротески по-прежнему в моде, а вот стилистика их декорирования - очень скоротечный тренд.</li>

69 </ul>В целом пандемия будет так же мощно влиять на процессы развития веб-дизайна. Люди уже осознали, что удобнее и безопаснее пользоваться многими сервисами онлайн. А если даже и не касаться пандемии, впереди нас ждёт много интересного - развитие VR-технологий, дальнейшие разработки в области искусственного интеллекта и включение нейросетей в творческие процессы.

70 * Решением суда запрещена "деятельность компании Meta Platforms Inc. по реализации продуктов - социальных сетей Facebook* и Instagram* на территории Российской Федерации по основаниям осуществления экстремистской деятельности".

71 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>