UI/UX, Анимация, Дизайн

19 трендов UI дизайна, стоящих внимания в 2019

19 трендов UI дизайна, стоящих внимания в 2019

Новый сезон творческих задач в разгаре, а значит, самое время уделить немного внимания тому, что популярно в дизайне интерфейсов для вебсайтов и мобильных приложений в этом году. Здесь мы собрали быстрый обзор горячих трендов UI дизайна в 2019: некоторые из них только начали отвоевывать внимание, другие укрепили свои позиции или обрели новые очертания. Разнообразие примеров […]

19 трендов UI дизайна, стоящих внимания в 2019

Новый сезон творческих задач в разгаре, а значит, самое время уделить немного внимания тому, что популярно в дизайне интерфейсов для вебсайтов и мобильных приложений в этом году. Здесь мы собрали быстрый обзор горячих трендов UI дизайна в 2019: некоторые из них только начали отвоевывать внимание, другие укрепили свои позиции или обрели новые очертания. Разнообразие примеров прилагается.

Hero Иллюстрации

Hero image никак не назовешь новомодным изобретением: в последние несколько лет эти изображения активно используются, чтобы сделать веб-страницы понятными, привлекательными и наполненными смыслом. И это не удивительно. Hero-изображения улучшают восприятие информации, ведь большинство пользователей замечают и «расшифровывают» картинки гораздо быстрее, чем слова. А значит, изображение становится не только элементом, привлекающим внимание, но и носителем информации, передающим быстрое сообщение о контенте страницы.

Вдумчивое использование hero image на веб-странице может улучшить навигацию и привлечь больше внимания к СТА-кнопке. Если обратиться к трендам, в последний год мы наблюдаем широкое и разнообразное применение цифровых иллюстраций для этих целей, тогда как раньше фотографии были гораздо более популярны. Вероятно, это можно объяснить большей гибкостью иллюстраций для целей дизайна пользовательского опыта. Цифровое искусство открывает неограниченные возможности относительно стилей, персонажей, окружения, сюжетов, композиции и перспективы, и комбинации их с остальными элементами на странице.

web design example
Веб-страница, в которой hero image и текстовый контент представляют цельную композицию, задают позитивное настроение и информируют посетителей о теме ресурса — блога о здоровье Health Blog.

Лендинг-страница для конференции по иллюстрации выстраивает композицию вокруг анимированной оригинальной hero иллюстрации.

architecture magazine web design
Веб-страница галереи номинантов и лауреатов Притцкеровской премии в архитектурном онлайн-журнале содержит художественный цифровой портрет Захи Хадид.

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

Веб-страницы, основанные на типографике

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

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

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

Веб-страница для сайта строительной компании основана на анимации и цветовом контрасте элементов тэглайна. Цвет также работает как фактор визуального объединения логотипа компании, тэглайна и CTA-кнопки в единую гармоничную композицию.

Построенная на типографике домашняя страница вебсайта конференции Urban Digital, c привлекающей внимание анимацией текстового контента.

Прозрачность зон навигации

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

Вебсайт с портфолио фотомоделей применяет прозрачный фон для навигации в хедере

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

3D графика и анимация

За последний год интеграция разнообразной 3D графики в мобильные и веб-интерфейсы продемонстрировала космический рост как в количестве кейсов, так и в разнообразии стилей и подходов. Более того, многие дизайнеры переходят от статических изображений к трехмерной анимации, чтобы сделать веб-страницы и экраны приложений еще более динамичными и привлекательными.

Создание такого рода графики — довольно сложная задача, требующая определенных навыков и художественной насмотренности. Кроме того, такая задача отнимает много времени. Тем не менее, в большинстве случаев она оправдывает затраты и усилия: 3D всегда привлекает внимание, пользователи никогда не пройдут мимо. 3D-изображения являются также гибким визуальным контентом. С одной стороны, они часто позволяют добиться фотографической реалистичности, что является большим преимуществом для дизайна пользовательского интерфейса: такая графика может «спасти игру» в тех случаях, когда необходимый вам фотоматериал невозможно получить или он крайне дорогой. С другой стороны, у дизайнеров появляется пространство для творческих экспериментов, в котором они могут создавать и нереалистичные, фантастические изображения, увеличивая оригинальность UI дизайна.

homes of the future website
Вебсайт компании, которая занимается созданием домов с экологичным энергопотреблением, интегрирует 3D визуализацию продукта в ночном и дневном режиме просмотра.

Блог о здоровье применяет 3D анимацию частей тела в качестве тематического визуального контента на страницах

Лендинг-страница авиашколы  включает анимированный 3D hero image самолетика в low-poly стиле

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

Полноэкранные фоновые изображения

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

fashion model portfolio website design
Страница портфолио фотомодели применяет полноэкранное фото как основу композиции, навигация и текстовый контент гармонично нанесены на нее и не портят впечатления от фотографии.

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

mail service landing page
Лендинг-страница приложения по управлению корреспонденцией использует красивую полноэкранную иллюстрацию, в которую элегантно интегрированы текстовый контент и кнопка призыва к действию.

Видео-фоны и разнообразный видеоконтент

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

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

Дизайн домашней страницы с полноэкранным видео для сайта агрохолдинга

Сайт металлургического завода с атмосферным тематическим видео контентом на домашней странице

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

Пример разъяснительного ролика созданного в рамках промо-кампании для приложения OffCents.

Минимальная мобильная навигация

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

 

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

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

nature encyclopedia app design
Приложение энциклопедии о природе представляет интерактивные инфографики на разные темы. Все взаимодействия с контентом происходят только на уровне жестов, в интерфейсе отсутствуют кнопки.

Эксперименты со шрифтами и шрифтовые контрасты

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

Карточка продукта для for the ecommerce сайта чайного бренда использует оригинальный шрифт, выделяющий ресурс среди конкурентов

security app landing page
Лендинг-страница приложения по личной безопасности обыгрывает экспериментальную hero-иллюстрацию с помощью броского шрифта, что в целом создает яркий и эмоциональный визуальный образ страницы.

Разделенные экраны

Тенденция к созданию разделенных экранов и страниц сохраняется в течение последнего года. Эта практика не является чем-то новым — она исчезает и возвращается в различные сферы дизайна, но сейчас она точно живее всех живых. Подход считается эффективным с точки зрения адаптивного дизайна: он позволяет играть с вариациями контента, сохраняя визуальную последовательность. Кроме того, он открывает безграничную область для цветовых комбинаций и экспериментов. Разделенные экраны также могут быть полезны, когда важно показать два варианта одинаковой важности.

car aid landing page design
Лендинг для приложения сервиса по безопасности автомобилей с контрастным разделенным экраном, части которого объединены в одну композицию с помощью тематической иллюстрации

food order website design
Страница сайта сервиса заказа и доставки блюд: в одной части применен светлый фон, тектовое описание и яркая СТА-кнопка, вторая часть экрана использует яркое фото аппетитного блюда как фон.

bug store website ecommerce
Страница продукта для онлайн-магазина насекомых использует разделенный экран с информативной частью слева и интерактивной частью справа, объединяя их изображением продукта, размещенным по центру.

Асимметричные и ломанные сетки

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

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

Вебсайт агрохолдинга использует динамичную сетку, которая меняется в процессе взаимодействия, привлекая и вовлекая посетителей.

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

Ecommerce-интерфейсы, основанные на визуальном контенте

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

ecommerce website mobile
Дизайн hero section для ecommerce сайта и его мобильная версия используют крупные фото в комбинации с изысканным оригинальным шрифтом.

home decor website design
Ecommerce платформа, продающая мебель и декор ручной работы, использует крупные выразительные 3D-визуализации.

fishing ecommerce website
Онлайн-магазин товаров для рыбалки структурирует страницы вокруг достаточно крупных картинок, демонстрирующих товары.

Анимированное наслоение

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

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

Экспериментальная графика, вдохновленная искусством

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

food delivery service website
Экспериментальная иллюстрация используется в качестве hero image на сайте для сервиса доставки еды. Нравится вам стиль или нет, но вы точно не пройдете мимо, не заметив такую графику.

Дизайн сайта для маленькой семейной винодельни включает необычные анимированные иллюстрации.

Интерактивный дизайн интро и онбординга

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

Mywony storyboard design

Интерактивный дизайн бренд-интро для MYWONY, бренда свадебных платьев. 

Ограниченные и монохромные цветовые палитры

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

bauhaus events web design
Целевая страница мероприятия, посвященного движению Bauhaus, демонстрирует ограниченную контрастную цветовую палитру, которая отражает ценности и подходы этой художественной школы.

beauty ecommerce website design
Дизайн интернет-магазина, продающего косметику, демонстрирует изысканный интерфейс в разных «нюд» оттенках, создающих гармоничный фон для товаров.

Домашняя страница веб-платформы по кибербезопасности построена на монохромной раскладке и футуристичной анимации.

Выбор цветовой схемы

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

ui design mobile app
mobile app ui design
Экраны приложения для анализа фондовых рынков Bitex: пользователь может сам сделать выбор между светлой и темной цветовой темой

Цветовой контраст страниц или экранов

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

nature encyclopedia app design
Приложение энциклопедии о природе использует темный фон для экранов энциклопедии и светлый фон для экранов благотворительности.

webdesign wedding dresses
MYWONY вебсайт применяет темный фон для страниц лукбуков и светлый фон для страниц коллекций

Цифры в стиле инфографики

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

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

environment protection community website
Вебсайт сообщества по решению экологических проблем выстраивает визуальную иерархию домашней страницы так, чтобы мгновенно отображать основную информацию, цифры в стиле инфографики и CTA.

Формы в зоне до скролла

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

luggage delivery service website design
Лендинг для службы доставки, которая заботится о багаже клиента и доставляет его в нужный пункт назначения, использует форму для заполнения ключевых данных прямо под хедером.

scuba diving course
Посадочная страница для курсов подводного плавания также использует интерактивную форму расширенного поиска в области до скролла

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

Оригинальная статья была опубликована в блоге студии Tubik

Поделитесь этим контентом:

D4U Вдохновение, UI дизайн, UX дизайн, веб дизайн, графический дизайн, дизайн, дизайн взаимодействий, дизайн для маркетинга, дизайн интерфейсов, мобильные приложения, мобильный UX, пользовательский интерфейс, пользовательский опыт, тренды, цифровая иллюстрация, читабельность вебсайта,
  • English
  • Russian


Этот сайт разработан и курируется Tubik Studio узнать больше о нас Контакты