Глеб Летушов, редактор-фрилансер, специально для блога Нетологии адаптировал статью Tubik Studio про популярные тренды в дизайне интерфейсов прошлого года.
Новый год принес волну новых направлений развития UX-дизайна, но хотелось бы оглянуться назад и вспомнить, что пользовалось успехом в предыдущем году. Здесь собраны все направления, которые были популярны в веб- и мобильных интерфейсах в 2017 году.
Программа обучения: «Проектирование интерфейсов: UI-UX дизайн от стратегии до тестирования»
Функциональный минимализм
Дизайн множества мобильных приложений и сайтов основан на принципах минимализма. Интерфейс в стиле минимализма характеризуется тщательным вниманием к немногочисленным визуальным элементам, которые всегда передают конкретное сообщение.
Минимализм в интерфейсе строится на таких базовых принципах:
- простота,
- ясность,
- выразительная визуальная иерархия,
- повышенное внимание к пропорциям,
- функциональность каждого элемента,
- большое количество свободного пространства,
- внимание к основным деталям,
- типографика как существенный элемент дизайна,
- устранение нефункциональных декоративных элементов.
Конечно, этот список можно продолжить, но уже названных принципов достаточно, чтобы убедиться, что минимализм в интерфейсе удобен для пользователя. Он помогает увидеть основные элементы интерфейса, делая перемещение пользователя по интерфейсу интуитивно понятным и целенаправленным. Кроме того, такой дизайн обычно выглядит завершенным и лаконичным и приносит эстетическое удовлетворение, а это один из желаемых результатов в UX.
.gif)
Брутализм
Мода на брутализм в цифровом дизайне появилась еще в 2016 году и не исчезла в прошлом.
Брутализмом называют стиль, который направлен на нарушение стандартов и предсказуемых методов проектирования. Сайты, созданные в таком стиле, — это своего рода бунт среди продуманного дизайна с симметрией и гармонией, сложных макетов и акцентов на эстетическом визуальном исполнении. Брутализм основан на простом, не загруженном визуальными деталями дизайне, который похож на обычную HTML-страницу. Если использовать его вдумчиво для соответствующих целей и аудитории, то можно добиться оригинального вида цифрового продукта. Такой стиль понравится не всем, но точно не останется незамеченным.
Интегрированная в изображение типографика
Смелая и броская типографика до сих пор присутствует как на сайтах, так и в мобильных приложениях. В прошлом году она получила новое дыхание с помощью техники вырезания или вписывания ключевого слова заголовка в визуальные элементы на странице. Такой метод усиливает гармоническую целостность элементов макета и показывает, что типографика на странице тесно связана с другими элементами интерфейса.
.png)
Анимированные hero-баннеры
В веб-дизайне hero-баннеры — это большие изображения, привлекающие внимание пользователя, который только что зашел на сайт. Баннеры помогают создавать атмосферу и вносят вклад в визуальное представление основного содержания. Это высокоэффективное средство для создания настроения или передачи сообщения. Кроме того, как и любая другая яркая графика на веб-страницах, это информативный и эмоционально привлекательный контент. Правильно подобранный баннер помогает достичь сразу нескольких целей:
- привлечь внимание пользователей,
- визуально передать сообщение,
- поддержать общую стилистическую концепцию,
- создать необходимое настроение или атмосферу,
- эффективно продемонстрировать основные преимущества или элементы.
В этом году к таким баннерам часто добавляли оригинальную анимацию, которая придавала жизнь и делала изображения более привлекательными.
.gif)
Индивидуальные иллюстрации
Выполненные в разных стилях и на разных уровнях сложности, такие изображения активно используются в веб- и мобильном интерфейсе. Иконки создают интуитивно понятную навигацию, что помогает пользователю быстрее воспринимать информацию. Иллюстрации улучшают внешний вид страницы и создают оригинальный интерфейс. Кроме того, такие изображения помогают ориентироваться в интерфейсе пользователям, у которых есть естественные проблемы с распознаванием текста, например, детям.
В 2017 году наиболее популярными были тематические иллюстрации на сайтах и в приложениях. Они перешли на новый уровень, стали более сложными и стильными.
.png)
Безрамочная подложка
Большие фоновые изображения или паттерны без каких либо рамок можно было встретить в веб-интерфейсах довольно часто. Такие сайты выглядят более воздушными и просторными, фоновое изображение кажется неограниченным и сильнее передает атмосферу.
.png)
Анимация в интерфейсе
Анимация не только оживляет и добавляет движения к процессу взаимодействия, но и значительно улучшает удобство использования. Пользовательский опыт становится более информативным и интересным, в то время как манипуляции с элементами становятся понятнее. В прошлом году дизайнеры хорошо поработали над различными кнопками, вкладками, графиками, загрузчиками и анимацией прокрутки.
.gif)
UI-friendly брендирование
Предыдущий год можно назвать годом ребрендинга, потому что многие известные компании, продукты и бренды изменили свои логотипы в сторону упрощения форм и деталей. Одна из причин изменения — стремление к удобству использования и навигации. Как новые, так и переработанные логотипы были созданы для более удобного пользовательского интерфейса и эффективно воспринимаются на различных цифровых устройствах и макетах. А анимированные логотипы стали трендом, повысившим узнаваемость брендов.
.gif)
Однотонный интерфейс
Растущий интерес к минималистичному дизайну как к способу достичь максимальной функциональности привел к появлению монохромных UI-решений. Такие макеты обычно выглядят стильно, гармонично и не отвлекают внимание. Однако, дизайнеры должны потратить немало времени и усилий, чтобы сделать их нескучными, и при этом выделить основные элементы взаимодействия.
.gif)
Темный бэкграунд
Мобильных и веб-интерфейсов, в которых присутствует цветовая палитра с темным фоном, стало больше. Такие решения часто используются в цифровых продуктах, основанных на визуальных эффектах. Темный фон ассоциируется с изяществом и престижем, углубляет восприятие изображений и делает интерфейс менее контрастным. Более того, такой дизайн нравится широкой аудитории и соответствует ее предпочтениям.
.gif)
Светлое пространство для основных блоков
Еще один популярный стиль в темных интерфейсах. В нем используются боксы или пространство со светлым фоном для основных блоков данных. Для лучшей читаемости дизайнеры добавляют элегантный контраст экрану или странице.
.jpg)
Изысканность и контраст при выборе шрифтов
Новые шрифты создают дизайнерам интерфейса широкое поле для творческих экспериментов. Сегодня типографика рассматривается не только как средство коммуникации с пользователем, но и как неотъемлемая часть всей концепции дизайна. Поэтому специалисты уделяют большое внимание выбору и сочетанию шрифтов. В этом году появились новые подходы в контрастировании шрифтов с засечками и без, благодаря которым они создают сильную визуальную иерархию и добавляют привлекательности интерфейсу.
.png)
Эксперименты с сеткой в макете
Количество сайтов в интернете уже превышает миллиард, поэтому дизайнеры должны придумывать новые идеи, чтобы сделать их привлекательными и оригинальными. Так, эксперименты с сеткой также заняли свое место в списке общих дизайнерских трендов предыдущего года. Необычные сетки в макете — это способ сохранить чувство гармоничной компоновки и размещения элементов с более высоким уровнем гибкости и оригинальности. Однако такого рода творчество требует тщательного исследования, в то время как эффективный результат часто приходит через несколько итераций, проверенных и проанализированных с точки зрения удобства использования и визуального восприятия.
Разнообразие лендингов
В предыдущем году лендинги вышли на новый уровень развития и разнообразия. Компании и социальные проекты, как правило, регулярно используют их для эффективного представления услуг, продуктов, предложений или вопросов, которым необходимо сосредоточенное внимание пользователя. К тому же лендинги зарекомендовали себя эффективным методом продвижения мобильных приложений. Основываясь на исследованиях пользователей и на тестировании, лендинг можно превратить в удобный инструмент, который предоставляет необходимую информацию в ясной и доступной форме, экономя время и усилия пользователей.
.png)
Креативный параллакс-эффект
С развитием моушн-дизайна, анимация прокрутки стала широко использоваться в интернете и на мобильных устройствах. Необычный и оригинальный параллакс-эффект делает прокрутку более приятной и естественной для глаз.
.gif)
Промовидео для интернет-маркетинга
Рекламные ролики эффективно служат маркетинговым целям и повышают узнаваемость бренда. Креативное и запоминающееся видео — это хороший способ привлечь внимание клиентов и донести до них нужную информацию.
Видео активирует несколько каналов восприятия: визуальный и звуковой, и усиливает их повествованием.
Эти факторы делают презентацию через видео сильной и запоминающейся, особенно если в её основе высококачественные графический дизайн и анимация. Люди ежедневно перегружены тоннами информации всех видов, поэтому большинство из них не готовы уделять много времени изучению новых продуктов или услуг. В этих условиях видео стали динамичным, информативным и привлекательным форматом.
Однако тут стоит вопрос о скорости загрузки страницы, поэтому сайт нужно тщательно тестировать на различных устройствах.
Геймификация интерфейса
В прошлом году возрос интерес к геймификации, применяемой в различных интерфейсах: не только для развлечений, но и для социальных и бизнес-продуктов. В технологическом мире слово «геймификация» означает технику применения игровой механики в неигровой среде, например, для сайтов и мобильных приложений. Челленджи, награды, очки, значки, таблицы лидеров и другие похожие элементы помогают дизайнерам продумывать способы эффективной мотивации и удержания пользователей.
.jpg)
Боксы и карточки как элементы верстки
Еще один тренд в UX-дизайне 2017 года — это разнообразные карточки и боксы в веб- и мобильной верстке, которые помогают выделить главную информацию при беглом сканировании элементов интерфейса. К тому же они способствуют созданию общей гармонии и композиции экрана.
.jpg)
Геометрические элементы как часть стиля
В предыдущем году геометрические элементы появились во многих интерфейсах. Разнообразие простых и сложных форм, паттернов, линий и кривых использовались во многих дизайн-решениях, как в традиционных, так и в новых комбинациях.
.png)
Необычные цветовые палитры и комбинации
На основе теории цвета появились новые оригинальные комбинации. Цвет — это один из самых мощных способов добавить быстро воспринимаемое сообщение и настроение в интерфейс, а также сделать его оригинальным и привлекательным. Эксперименты с цветом — это не только чистое творчество: даже самые креативные и удивительные комбинации основаны на знании теории цвета, психологии цвета и виртуозности дизайнеров пользовательского интерфейса.
.gif)
Без Lorem Ipsum
В предыдущем году повышенное внимание обращали на качество контента. В пользовательских интерфейсах контент и дизайн взаимосвязаны: нужно заставить их успешно дополнять друг друга вместо того, чтобы бороться за внимание пользователей. Поэтому все больше дизайнеров используют реальный контент в макетах, а не известный Lorem Ipsum. Это приближает дизайнеров, клиентов и создателей контента к реальному опыту и естественному ощущению взаимодействий.
.png)
Заключение
2017 год стал годом разнообразия в дизайне интерфейсов. Каждый день миллионы пользователей с разными вкусами, предпочтениями и любимыми стилями пользуются приложениями и сайтами.
Читать ещё: «Лучший UX и веб-дизайн по версии пользователей Behance»
Чем больше вариантов внешнего вида и функций будет разработано, тем выше шанс, что пользователь сможет найти то, что полностью соответствует его потребностям и пожеланиям. В любом случае, 2018 год поставит новые творческие задачи перед дизайнерами интерфейсов.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.