15 горячих тенденций в дизайне пользовательского интерфейса для Интернета и мобильных устройств в 2018 году
Полноэкранные Фоновые Изображения
Одной из тенденций, широко распространенных на различных веб-сайтах, является использование полноэкранных фоновых изображений, будь то фотографии или специально визуализированные визуализации. Такой подход делает экраны визуально и эмоционально привлекательными. Также он поддерживает ощущение целостности всех элементов макета.
На одном из слайдов для Landing Page путеводителя по большому городу нанесена тематическая фотография: знаменитая и легко узнаваемая достопримечательность представляет пользователям Город Берлин, делая страницу одновременно элегантной и информативной.
А вот Домашняя страница сайта, сделанная для дизайн-студии, специализирующейся на визуализации внешнего и внутреннего дизайна. Качественная оригинальная графика, созданная и визуализированая для страницы, занимает всю фоновую область: таким образом изображение сразу задает тему и представляет услуги компании.
Несколько интерактивных слоев
Дизайнеры UI постоянно проводят творческие эксперименты, чтобы найти новые интересные способы сделать веб-страницу привлекательной и интерактивной. Одной из растущих тенденций является применение нескольких интерактивных слоев, которые делают прокрутку и взаимодействие оригинальными.
Это анимированная концепция благотворительного сайта, посвященного спасению океанов. Дизайнер делает два копии слоя, которые двигаются одновременно при изменении слайдов. Кстати, в концепции присутствует еще один популярный тренд использования текстур и фотографий в качестве текстового под-слоя контента - так называемая типографика, наполненная изображением.
Цифровые иллюстрации
Цифровые иллюстрации не потеряли своих позиций, они все больше и больше присутствуют в интернете и мобильных пользовательских интерфейсах. Выполненная в различных стилях, нестандартная графика эффективно поддерживает быстрое восприятие информации на странице или экране. Более того, они создают прочную основу для оригинальности.
Веб-сайты и приложения применяют пользовательские талисманы, значки и иллюстрации, чтобы улучшить внешний вид страницы или экрана, а также повысить удобство использования и интуитивно понятную навигацию. Кроме того, изображения повышают доступность UX-дизайна раздвигают границы восприятия для пользователей, которые имеют проблемы с распознаванием текста, таких как, например, дислексия.
Еще одна растущая тенденция - создание цифровых иллюстраций в качестве заглавных изображений для статей блога. Это определенно классная тенденция, потому что она добавляет эстетики и красоты блогам и веб-сайтам, которые мы часто читаем, а также расширяет творческие горизонты для художников.
Иллюстрация, созданная для статьи 3d дизайна интерфейса: Цвет, контраст, Контент. Дизайнер выбрал ключевое слово "Color" в качестве основного семантического элемента и показал буквальный процесс окрашивания чего-либо краской. Контраст отражен в цветовой палитре художественного произведения пока содержание показано с элементами мебели в офисе показанном в изображении. Кошка становится яркой деталью, которая добавляет динамичности и юмора сцене.
Иллюстрация для Landing Page цифрового агентства построена на игре с ключевым словом "цели". Образ баскетболиста идеально подошел к теме, так как момент попадания в корзину является реальным отражением достижения цели. Насыщенные броские цвета добавляют уверенности и силы иллюстрации.
Оригинальные иконки, созданные для приложения Cuteen: пользовательская графика выделяет определенные категории Контента в броском и привлекательном стиле. Используя технику закрытия, дизайнер сделал так, чтобы иконки выглядели динамично, чтобы было ощущение застывшего движения.
Сюжет, дизайн персонажей
Без сомнения, тенденция пользовательской графики открыла более широкую перспективу для повествования в интерфейсах. Все больше веб-сайтов и мобильных приложений обращаются к специально разработанным персонажам, демонстрирующим историю, настраивающим атмосферу, отправляющим сообщение или представляющим преимущества таким образом, который соответствует настроению, тону и голосу платформы. Оригинальные персонажи помогают сделать взаимодействие более человечным, установить сильные визуальные ассоциации с реальным миром и мгновенно передать нужное настроение. Более того, в зависимости от композиции, персонажи могут стать эффективным инструментом, чтобы сделать страницу или экран динамичным и живым.
Первый набор пользовательских иллюстраций, сделанных дизайнером Tubik для одного приложения под названием Florence App. Это интернет-рынок, где самозанятые медсестры могут найти высокооплачиваемую аутсорс работу по всей Великобритании. Персонажи создают визуальное повествование и представляют возможности и преимущества приложения.
Это концепция дизайна для простого сервиса, помогающего пользователям найти жилье на берегу моря. Тематическая иллюстрация поддерживает необходимую атмосферу и создает сильную эмоциональную привлекательность.
Эта иллюстрация глубоко социальная: она посвящена Всемирному дню борьбы с раком, который отмечался во всем мире 4 февраля. Лозунгом этого года было “Мы можем. Я могу " - и именно так это увидел дизайнер, на одной иллюстрации показав весь путь от боли к жизни. Объединившись, мы будем бороться!
Этот анимированный набор иллюстраций является учебным пособием для приложения социальной сети. На основе рассказывания историй, она направлена на то, чтобы показать функциональность и характер приложения в приятной и развлекательной форме, которая будет соответствовать общему стилю дизайна пользовательского интерфейса.
Разделенные экраны (Split Screens)
Одним из актуальных трендов этого года является активное использование сплит-экранов (split screens) как в веб, так и в мобильных интерфейсах. В этом тренде нет ничего нового — он уходит и возвращается в различные сферы дизайна, а сейчас он определенно вернулся и ожил. Этот подход считается эффективным с точки зрения адаптивного дизайна, поскольку вы можете играть с вариациями Контента, не теряя согласованности. Более того, он открывает безграничную область для цветовых комбинаций и экспериментов. Некоторые веб-сайты используют разделенные экраны, чтобы представить двойственность вариантов равной важности.
Landing Page для приложения знакомств применяет диагонально разделенный экран с цветовым контрастом, который создает визуальную гармонию и согласованность с диагональными тенями на иллюстрации темы. Это делает образ элегантным и впечатляющим.
Веб-сайт энциклопедии применяет разделенный экран для главной страницы, таким образом отделяя правильно читаемую текстовую часть от красивого фотоконтента.
Что касается мобильных устройств, разделенные экраны становятся удобной тенденцией для интерфейсов, основанных на темной или яркой фоновой схеме. Это шаг к правильной читабельности в них, о чём часто спорят многие дизайнеры: применяя блоки или пространства со светлым фоном для основных блоков данных, дизайнеры решают эту проблему и добавляют элегантный контраст экрану или странице.
Vegan Recipe приложение применяет разделение цвета на фоне, когда пользователи проводя карты рецептов в каталоге, а также есть контрастное разделение ярких и светлых частей, где свет один содержит копию и информацию. Разделенные части экрана преобразованы вместе с взаимодействиями делая процесс работы с приложением живым и ясным.
Приложение Watering Tracker использует горизонтально разделенный экран: верхняя часть с темным фоном благоприятна для элегантного представления диаграмм и визуальных эффектов, а нижняя часть применяет светлый фон, чтобы поддерживать высокий уровень читаемости.
Полужирный шрифт
Смелая и броская типографика продолжает сохранять свое высокое присутствие в веб и мобильных макетах. В большинстве случаев, этот тренд становится одним из ключевых элементов дизайна и дизайнеры уделяют много внимания, чтобы текст читаемым и лаконичным: типографическая иерархия и выбор правильных шрифтов является одними из основных задач проекта проектирование интерфейса.
Landing Page для приложения Big City Guide применяет четкую визуальную иерархию блоков копирования и делает название города самым броским элементом макета. Более того, он применяет технику вырезания или вписывания ключевого слова заголовка или заголовка в визуальные элементы на странице. Такой подход усиливает гармоническую целостность элементов макета и заставляет типографику чувствовать себя тесно связанной со всем в интерфейсе.
Приложение для мобильных Upper простое и минималистичное, оно не использует специальную графику, поэтому текст становится основным элементом дизайна. Продуманная и сбалансированная жирная типографика делает ее элегантной и хорошо читаемой.
Пользовательский интерфейс без кнопок
Хотя кнопки по-прежнему являются одним из жизненно важных элементов дизайна пользовательского интерфейса, в этом году мы видим больше творческих экспериментов над мобильным пользовательским интерфейсом в перспективе взаимодействия пользовательского интерфейса без кнопок. Такой подход экономит драгоценное пространство на экране для получения дополнительной информации и даже считается начальным шагом к виртуальным интерфейсам, основанным только на жестах.
Еще одна образовательная концепция приложения Энциклопедии, представляющее интерактивную инфографику на различные темы, на этот раз слонов. Все взаимодействия с данными происходят на основе жестов без каких-либо кнопок, применяемых в макете.
Яркие и смелые цвета
Еще одна тенденция в дизайне пользовательского интерфейса - большое разнообразие цветовых палитр, которые дизайнеры выбирают для приложений и сайтов, в том числе ярких и темных. Разнообразие новых шрифтов и шрифтов, а также юзабилити-исследования продолжают продвигать стандарты. Таким образом, дизайнеры пробуют новые комбинации, которые будут использовать различные цвета, но не будут испытывать недостатка в удобстве использования. Все больше и больше креативщиков открывают новые горизонты сочетания традиционных методик с инновационными подходами в области выбора цвета.
Это творческая концепция для приложения Music News App, помогает собирает тексты песен, новости и викторины о музыке все в одном месте. Пользовательский интерфейс представлен с помощью яркой цветовой схемы и пользовательских иллюстраций, приложение выглядит очень оригинально. В фоне домашней страницы применяются геометрические фигуры, которые меняют свое место и цвета, когда пользователь проводит по экрану.
Привлекательная Анимация Интерфейса
Анимация интерфейса по-прежнему остается горячей и обсуждаемой темой. Даже с большой армией тех, кто находит анимацию пользовательского интерфейса ненужной функцией, перегружающей UI и усложняющей его, большинство пользователей ожидают, что движение будет неотъемлемой частью взаимодействия. Так, дизайнеры и разработчики ищут изощренные методы, чтобы сделать анимацию приятной на вид и функцией решения проблем современных приложений и сайтов. Микро взаимодействия поддерживается четкое завершение движения через создание быстрой обратной связи для пользователя и делают работу с приложением положительным и эффективным. Навигация проста и интуитивно понятна. Анимированные кнопки, переключатели, переключатели и другие интерактивные элементы информируют пользователя в считанные секунды, активируя весь потенциал быстрого визуального восприятия.
Вот приложение, позволяющее людям отслеживать свои расходы и доходы индивидуально или в группе. Шрифты выбраны для обеспечения высокой читабельности, так как экран полон различных данных. Анимация создает стильный переход от круговой диаграммы к списку, применяя цветовую маркировку.
Приложение Slumber имеет приятную и запоминающуюся точку главного экрана - пользовательскую иллюстрацию, которая анимируется вместе с прелоадером и делает процесс ожидания не скучным и эстетически привлекательным.
Изображения героев для Landing Page
"Баннеры героев" (Hero banners) - это большие изображения, привлекающие внимание пользователя в первые секунды взаимодействия с веб-страницей. Они вносят большой вклад в привлекательное визуальное представление основного контента."Баннеры героев" зарекомендовали себя как высокоэффективные в настройке настроения или передаче послания. Кроме того, как и любая другая яркая графика на веб-страницах, это своего рода контент, который является одновременно информативным и эмоционально привлекательным."Баннеры героев" могут удовлетворить несколько целей, таких как:
- привлечь внимание пользователей
- передача сообщения визуально
- поддержка общей стилистической концепции
- задайте нужную тему, настроение или атмосферу
- продемонстрирует преимущества товаров или услуг более эффектно.
Это может быть причиной, почему дизайнеры часто обращаются к этой технике для улучшения Landing Page.
Вот анимированная версия Landing Page для академии танца под названием HeartBeat. Элегантный и минималистичный макет показывает выдающиеся образы героев. Анимация делает изображение запоминающимся и эмоционально привлекательным.
Вот концепция веб-сайта финансовой службы, помогающей пенсионерам эффективно управлять своими финансами и наращивать свои сбережения. Иллюстрация немедленно передает сообщение, сохраняя его согласованным в сочетании с теглайном и блоком копирования. Таким образом, Веб-страница выглядит броской, в то время как все элементы макета гармонично работают вместе.
Страницы в стиле плаката
Тенденция использования привлекающего визуального контента получила еще одну перспективу в веб-страницах, которые выглядят как плакаты. В случае правильно подобранных изображений и стильной типографики, это позволяет странице выделиться и привлечь внимание пользователя к предложению.
Landing Page для приложения Tasty Burger основана на привлекательной и запоминающейся анимации: свежий вкусный гамбургер создает аппетитный эффект и эмоциональную привлекательность, оригинальная надпись придает ему внешний вид в стиле плаката.
Экспериментальные палитры и макеты
Тенденции цвета и эксперименты макет совмещать несовместимое, не только не потеряла своей популярности, принося из свежих оригинальных решений. В любом случае, эффективные цветовые эксперименты - это не просто творчество: даже самые креативные и удивительные сочетания основаны на знаниях теории цвета, психологии цвета и виртуозности дизайнеров пользовательского интерфейса.
Это сайт гурманов, магазин электронной коммерции, продающий травы, масла и специи. Его пользовательский интерфейс отличает творческий эксперимент: он применяет традиционные в электронной коммерции методы дизайна для моды, но Тип товаров очень отличается - они предназначены для еды и приготовления пищи.
Персонализация пользовательского опыта
В этом году мы видим сильное движение к более сложной и глубокой персонализации пользовательского опыта. Это означает, что дизайнеры представляют больше возможностей, с помощью которых пользователи могут настраивать функции в соответствии с их личными потребностями.
Perfect Recipe приложение позволяет пользователям устанавливать цели, которые они хотят достичь, такие как потеря или увеличение веса, сохраняя здоровое питание и тому подобное. Кроме того, пользователи могут пометить ингредиенты, которые им не нравятся, чтобы приложение не показывало рецепты, содержащие их.
Tasty Burger приложение предоставляет пользователям возможность настроить свой собственный гамбургер добавляя или исключения определенные ингредиенты, прежде чем сделать заказ.
Приложение Slumber имеет простую и понятную систему фильтров, которые позволяют пользователю выбрать наиболее комфортные настройки и звуковые комбинации, чтобы улучшить свой сон. Настраивая фоновые эффекты, пользователи создают персонализированное звучание.
Качественный фото контент
Предыдущие примеры дизайна пользовательского интерфейса также показали еще одну популярную тенденцию этого года-широкое использование высококачественного и художественного фотоконтента. Фотография - это хороший способ произвести впечатление на пользователей своими реалистичными и четкими визуальными эффектами, а также установить необходимые ассоциации. С быстро развивающимися фото-стоковыми сайтами у дизайнеров появляется все больше возможностей для поиска хороших изображений, но для многих проектов, особенно проектов электронной коммерции, креативные команды снимают оригинальный контент, полностью соответствующий целям продукта. Это особенно заметно в сферах, близких к повседневной жизни: одежда, игрушки, еда, напитки и т. д.
Perfect Recipe приложение представляет рецепты аппетитных и стильных фотографий блюд.
Tasty Burger приложение использует фотографии реальных гамбургеров, чтобы сделать положительный опыт и информировать пользователей о том, что они собираются купить.
Веб-сайт пекарни Vinny’s Bakery использует высококачественные фотографии реальных предметов, чтобы сделать онлайн-шоппинг близким к реальному.
2018 год продолжает наращивать разнообразие в дизайне интерфейса - и это то, что можно назвать самым главным трендом. Миллионы пользователей с разными вкусами и предпочтениями, любимыми стилями и персонажами, особыми ощущениями того, что им удобно и приятно, используют приложения и сайты как часть своей повседневной жизни. Чем больше вариантов внешнего вида и функций мы разрабатываем для них, тем более широкий спектр разнообразных вариантов, которые бесконечное глобальное сообщество пользователей сможет найти те, которые соответствуют их конкретным потребностям и пожеланиям. Время покажет, какие тренды мы увидим самыми популярными в конце года.
Перевод статьи: https://uxplanet.org/15-hot-trends-in-ui-design-for-web-and-mobile-in-2018-eff86df6d868