Каким был 2017 год в дизайне интерфейсов: главные тренды, которые актуальны и в 2018
2 марта 2018, 11:35
2 117
Глеб Летушов,редактор-фрилансер, специально для блога Нетологии адаптировал статью Tubik Studioпро популярные тренды в дизайне интерфейсов прошлого года.
Новый год принес волну новых направлений развития UX-дизайна, но хотелось бы оглянуться назад и вспомнить, что пользовалось успехом в предыдущем году. Здесь собраны все направления, которые были популярны в веб- и мобильных интерфейсах в 2017 году.
Функциональный минимализм
Дизайн множества мобильных приложений и сайтов основан на принципах минимализма. Интерфейс в стиле минимализма характеризуется тщательным вниманием к немногочисленным визуальным элементам, которые всегда передают конкретное сообщение.
Минимализм в интерфейсе строится на таких базовых принципах:
Конечно, этот список можно продолжить, но уже названных принципов достаточно, чтобы убедиться, что минимализм в интерфейсе удобен для пользователя. Он помогает увидеть основные элементы интерфейса, делая перемещение пользователя по интерфейсу интуитивно понятным и целенаправленным. Кроме того, такой дизайн обычно выглядит завершенным и лаконичным и приносит эстетическое удовлетворение, а это один из желаемых результатов в UX.
Мода на брутализм в цифровом дизайне появилась еще в 2016 году и не исчезла в прошлом.
Брутализмом называют стиль, который направлен на нарушение стандартов и предсказуемых методов проектирования. Сайты, созданные в таком стиле, — это своего рода бунт среди продуманного дизайна с симметрией и гармонией, сложных макетов и акцентов на эстетическом визуальном исполнении. Брутализм основан на простом, не загруженном визуальными деталями дизайне, который похож на обычную HTML-страницу. Если использовать его вдумчиво для соответствующих целей и аудитории, то можно добиться оригинального вида цифрового продукта. Такой стиль понравится не всем, но точно не останется незамеченным.
Интегрированная в изображение типографика
Смелая и броская типографика до сих пор присутствует как на сайтах, так и в мобильных приложениях. В прошлом году она получила новое дыхание с помощью техники вырезания или вписывания ключевого слова заголовка в визуальные элементы на странице. Такой метод усиливает гармоническую целостность элементов макета и показывает, что типографика на странице тесно связана с другими элементами интерфейса.
В веб-дизайне hero-баннеры — это большие изображения, привлекающие внимание пользователя, который только что зашел на сайт. Баннеры помогают создавать атмосферу и вносят вклад в визуальное представление основного содержания. Это высокоэффективное средство для создания настроения или передачи сообщения. Кроме того, как и любая другая яркая графика на веб-страницах, это информативный и эмоционально привлекательный контент. Правильно подобранный баннер помогает достичь сразу нескольких целей:
привлечь внимание пользователей,
визуально передать сообщение,
поддержать общую стилистическую концепцию,
создать необходимое настроение или атмосферу,
эффективно продемонстрировать основные преимущества или элементы.
В этом году к таким баннерам часто добавляли оригинальную анимацию, которая придавала жизнь и делала изображения более привлекательными.
Выполненные в разных стилях и на разных уровнях сложности, такие изображения активно используются в веб- и мобильном интерфейсе. Иконки создают интуитивно понятную навигацию, что помогает пользователю быстрее воспринимать информацию. Иллюстрации улучшают внешний вид страницы и создают оригинальный интерфейс. Кроме того, такие изображения помогают ориентироваться в интерфейсе пользователям, у которых есть естественные проблемы с распознаванием текста, например, детям.
В 2017 году наиболее популярными были тематические иллюстрации на сайтах и в приложениях. Они перешли на новый уровень, стали более сложными и стильными.
Большие фоновые изображения или паттерны без каких либо рамок можно было встретить в веб-интерфейсах довольно часто. Такие сайты выглядят более воздушными и просторными, фоновое изображение кажется неограниченным и сильнее передает атмосферу.
Анимация не только оживляет и добавляет движения к процессу взаимодействия, но и значительно улучшает удобство использования. Пользовательский опыт становится более информативным и интересным, в то время как манипуляции с элементами становятся понятнее. В прошлом году дизайнеры хорошо поработали над различными кнопками, вкладками, графиками, загрузчиками и анимацией прокрутки.
Предыдущий год можно назвать годом ребрендинга, потому что многие известные компании, продукты и бренды изменили свои логотипы в сторону упрощения форм и деталей. Одна из причин изменения — стремление к удобству использования и навигации. Как новые, так и переработанные логотипы были созданы для более удобного пользовательского интерфейса и эффективно воспринимаются на различных цифровых устройствах и макетах. А анимированные логотипы стали трендом, повысившим узнаваемость брендов.
Растущий интерес к минималистичному дизайну как к способу достичь максимальной функциональности привел к появлению монохромных UI-решений. Такие макеты обычно выглядят стильно, гармонично и не отвлекают внимание. Однако, дизайнеры должны потратить немало времени и усилий, чтобы сделать их нескучными, и при этом выделить основные элементы взаимодействия.
Мобильных и веб-интерфейсов, в которых присутствует цветовая палитра с темным фоном, стало больше. Такие решения часто используются в цифровых продуктах, основанных на визуальных эффектах. Темный фон ассоциируется с изяществом и престижем, углубляет восприятие изображений и делает интерфейс менее контрастным. Более того, такой дизайн нравится широкой аудитории и соответствует ее предпочтениям.
Еще один популярный стиль в темных интерфейсах. В нем используются боксы или пространство со светлым фоном для основных блоков данных. Для лучшей читаемости дизайнеры добавляют элегантный контраст экрану или странице.
Новые шрифты создают дизайнерам интерфейса широкое поле для творческих экспериментов. Сегодня типографика рассматривается не только как средство коммуникации с пользователем, но и как неотъемлемая часть всей концепции дизайна. Поэтому специалисты уделяют большое внимание выбору и сочетанию шрифтов. В этом году появились новые подходы в контрастировании шрифтов с засечками и без, благодаря которым они создают сильную визуальную иерархию и добавляют привлекательности интерфейсу.
Количество сайтов в интернете уже превышает миллиард, поэтому дизайнеры должны придумывать новые идеи, чтобы сделать их привлекательными и оригинальными. Так, эксперименты с сеткой также заняли свое место в списке общих дизайнерских трендов предыдущего года. Необычные сетки в макете — это способ сохранить чувство гармоничной компоновки и размещения элементов с более высоким уровнем гибкости и оригинальности. Однако такого рода творчество требует тщательного исследования, в то время как эффективный результат часто приходит через несколько итераций, проверенных и проанализированных с точки зрения удобства использования и визуального восприятия.
Разнообразие лендингов
В предыдущем году лендинги вышли на новый уровень развития и разнообразия. Компании и социальные проекты, как правило, регулярно используют их для эффективного представления услуг, продуктов, предложений или вопросов, которым необходимо сосредоточенное внимание пользователя. К тому же лендинги зарекомендовали себя эффективным методом продвижения мобильных приложений. Основываясь на исследованиях пользователей и на тестировании, лендинг можно превратить в удобный инструмент, который предоставляет необходимую информацию в ясной и доступной форме, экономя время и усилия пользователей.
С развитием моушн-дизайна, анимация прокрутки стала широко использоваться в интернете и на мобильных устройствах. Необычный и оригинальный параллакс-эффект делает прокрутку более приятной и естественной для глаз.
Рекламные ролики эффективно служат маркетинговым целям и повышают узнаваемость бренда. Креативное и запоминающееся видео — это хороший способ привлечь внимание клиентов и донести до них нужную информацию.
Видео активирует несколько каналов восприятия: визуальный и звуковой, и усиливает их повествованием.
Эти факторы делают презентацию через видео сильной и запоминающейся, особенно если в её основе высококачественные графический дизайн и анимация. Люди ежедневно перегружены тоннами информации всех видов, поэтому большинство из них не готовы уделять много времени изучению новых продуктов или услуг. В этих условиях видео стали динамичным, информативным и привлекательным форматом.
Однако тут стоит вопрос о скорости загрузки страницы, поэтому сайт нужно тщательно тестировать на различных устройствах.
Геймификация интерфейса
В прошлом году возрос интерес к геймификации, применяемой в различных интерфейсах: не только для развлечений, но и для социальных и бизнес-продуктов. В технологическом мире слово «геймификация» означает технику применения игровой механики в неигровой среде, например, для сайтов и мобильных приложений. Челленджи, награды, очки, значки, таблицы лидеров и другие похожие элементы помогают дизайнерам продумывать способы эффективной мотивации и удержания пользователей.
Еще один тренд в UX-дизайне 2017 года — это разнообразные карточки и боксы в веб- и мобильной верстке, которые помогают выделить главную информацию при беглом сканировании элементов интерфейса. К тому же они способствуют созданию общей гармонии и композиции экрана.
В предыдущем году геометрические элементы появились во многих интерфейсах. Разнообразие простых и сложных форм, паттернов, линий и кривых использовались во многих дизайн-решениях, как в традиционных, так и в новых комбинациях.
На основе теории цвета появились новые оригинальные комбинации. Цвет — это один из самых мощных способов добавить быстро воспринимаемое сообщение и настроение в интерфейс, а также сделать его оригинальным и привлекательным. Эксперименты с цветом — это не только чистое творчество: даже самые креативные и удивительные комбинации основаны на знании теории цвета, психологии цвета и виртуозности дизайнеров пользовательского интерфейса.
В предыдущем году повышенное внимание обращали на качество контента. В пользовательских интерфейсах контент и дизайн взаимосвязаны: нужно заставить их успешно дополнять друг друга вместо того, чтобы бороться за внимание пользователей. Поэтому все больше дизайнеров используют реальный контент в макетах, а не известный Lorem Ipsum. Это приближает дизайнеров, клиентов и создателей контента к реальному опыту и естественному ощущению взаимодействий.
2017 год стал годом разнообразия в дизайне интерфейсов. Каждый день миллионы пользователей с разными вкусами, предпочтениями и любимыми стилями пользуются приложениями и сайтами.
Чем больше вариантов внешнего вида и функций будет разработано, тем выше шанс, что пользователь сможет найти то, что полностью соответствует его потребностям и пожеланиям. В любом случае, 2018 год поставит новые творческие задачи перед дизайнерами интерфейсов.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте нашиусловия публикации.
Глеб Летушов, редактор-фрилансер, специально для блога Нетологии адаптировал статью Tubik Studio про популярные тренды в дизайне интерфейсов прошлого года.
Новый год принес волну новых направлений развития UX-дизайна, но хотелось бы оглянуться назад и вспомнить, что пользовалось успехом в предыдущем году. Здесь собраны все направления, которые были популярны в веб- и мобильных интерфейсах в 2017 году.
Функциональный минимализм
Дизайн множества мобильных приложений и сайтов основан на принципах минимализма. Интерфейс в стиле минимализма характеризуется тщательным вниманием к немногочисленным визуальным элементам, которые всегда передают конкретное сообщение.
Минимализм в интерфейсе строится на таких базовых принципах:
Конечно, этот список можно продолжить, но уже названных принципов достаточно, чтобы убедиться, что минимализм в интерфейсе удобен для пользователя. Он помогает увидеть основные элементы интерфейса, делая перемещение пользователя по интерфейсу интуитивно понятным и целенаправленным. Кроме того, такой дизайн обычно выглядит завершенным и лаконичным и приносит эстетическое удовлетворение, а это один из желаемых результатов в UX.
WineYard App
Брутализм
Мода на брутализм в цифровом дизайне появилась еще в 2016 году и не исчезла в прошлом.
Брутализмом называют стиль, который направлен на нарушение стандартов и предсказуемых методов проектирования. Сайты, созданные в таком стиле, — это своего рода бунт среди продуманного дизайна с симметрией и гармонией, сложных макетов и акцентов на эстетическом визуальном исполнении. Брутализм основан на простом, не загруженном визуальными деталями дизайне, который похож на обычную HTML-страницу. Если использовать его вдумчиво для соответствующих целей и аудитории, то можно добиться оригинального вида цифрового продукта. Такой стиль понравится не всем, но точно не останется незамеченным.
Интегрированная в изображение типографика
Смелая и броская типографика до сих пор присутствует как на сайтах, так и в мобильных приложениях. В прошлом году она получила новое дыхание с помощью техники вырезания или вписывания ключевого слова заголовка в визуальные элементы на странице. Такой метод усиливает гармоническую целостность элементов макета и показывает, что типографика на странице тесно связана с другими элементами интерфейса.
Big City Guide
Анимированные hero-баннеры
В веб-дизайне hero-баннеры — это большие изображения, привлекающие внимание пользователя, который только что зашел на сайт. Баннеры помогают создавать атмосферу и вносят вклад в визуальное представление основного содержания. Это высокоэффективное средство для создания настроения или передачи сообщения. Кроме того, как и любая другая яркая графика на веб-страницах, это информативный и эмоционально привлекательный контент. Правильно подобранный баннер помогает достичь сразу нескольких целей:
В этом году к таким баннерам часто добавляли оригинальную анимацию, которая придавала жизнь и делала изображения более привлекательными.
Dance Academy Landing Page
Индивидуальные иллюстрации
Выполненные в разных стилях и на разных уровнях сложности, такие изображения активно используются в веб- и мобильном интерфейсе. Иконки создают интуитивно понятную навигацию, что помогает пользователю быстрее воспринимать информацию. Иллюстрации улучшают внешний вид страницы и создают оригинальный интерфейс. Кроме того, такие изображения помогают ориентироваться в интерфейсе пользователям, у которых есть естественные проблемы с распознаванием текста, например, детям.
В 2017 году наиболее популярными были тематические иллюстрации на сайтах и в приложениях. Они перешли на новый уровень, стали более сложными и стильными.
Financial Service Website
Безрамочная подложка
Большие фоновые изображения или паттерны без каких либо рамок можно было встретить в веб-интерфейсах довольно часто. Такие сайты выглядят более воздушными и просторными, фоновое изображение кажется неограниченным и сильнее передает атмосферу.
Big City Guide
Анимация в интерфейсе
Анимация не только оживляет и добавляет движения к процессу взаимодействия, но и значительно улучшает удобство использования. Пользовательский опыт становится более информативным и интересным, в то время как манипуляции с элементами становятся понятнее. В прошлом году дизайнеры хорошо поработали над различными кнопками, вкладками, графиками, загрузчиками и анимацией прокрутки.
Watering Tracker App
UI-friendly брендирование
Предыдущий год можно назвать годом ребрендинга, потому что многие известные компании, продукты и бренды изменили свои логотипы в сторону упрощения форм и деталей. Одна из причин изменения — стремление к удобству использования и навигации. Как новые, так и переработанные логотипы были созданы для более удобного пользовательского интерфейса и эффективно воспринимаются на различных цифровых устройствах и макетах. А анимированные логотипы стали трендом, повысившим узнаваемость брендов.
Whizzly Logo Animation
Однотонный интерфейс
Растущий интерес к минималистичному дизайну как к способу достичь максимальной функциональности привел к появлению монохромных UI-решений. Такие макеты обычно выглядят стильно, гармонично и не отвлекают внимание. Однако, дизайнеры должны потратить немало времени и усилий, чтобы сделать их нескучными, и при этом выделить основные элементы взаимодействия.
Jewellery E-Commerce App
Темный бэкграунд
Мобильных и веб-интерфейсов, в которых присутствует цветовая палитра с темным фоном, стало больше. Такие решения часто используются в цифровых продуктах, основанных на визуальных эффектах. Темный фон ассоциируется с изяществом и престижем, углубляет восприятие изображений и делает интерфейс менее контрастным. Более того, такой дизайн нравится широкой аудитории и соответствует ее предпочтениям.
Cinema App
Светлое пространство для основных блоков
Еще один популярный стиль в темных интерфейсах. В нем используются боксы или пространство со светлым фоном для основных блоков данных. Для лучшей читаемости дизайнеры добавляют элегантный контраст экрану или странице.
Watering Tracker App
Изысканность и контраст при выборе шрифтов
Новые шрифты создают дизайнерам интерфейса широкое поле для творческих экспериментов. Сегодня типографика рассматривается не только как средство коммуникации с пользователем, но и как неотъемлемая часть всей концепции дизайна. Поэтому специалисты уделяют большое внимание выбору и сочетанию шрифтов. В этом году появились новые подходы в контрастировании шрифтов с засечками и без, благодаря которым они создают сильную визуальную иерархию и добавляют привлекательности интерфейсу.
The Gourmet Website
Эксперименты с сеткой в макете
Количество сайтов в интернете уже превышает миллиард, поэтому дизайнеры должны придумывать новые идеи, чтобы сделать их привлекательными и оригинальными. Так, эксперименты с сеткой также заняли свое место в списке общих дизайнерских трендов предыдущего года. Необычные сетки в макете — это способ сохранить чувство гармоничной компоновки и размещения элементов с более высоким уровнем гибкости и оригинальности. Однако такого рода творчество требует тщательного исследования, в то время как эффективный результат часто приходит через несколько итераций, проверенных и проанализированных с точки зрения удобства использования и визуального восприятия.
Разнообразие лендингов
В предыдущем году лендинги вышли на новый уровень развития и разнообразия. Компании и социальные проекты, как правило, регулярно используют их для эффективного представления услуг, продуктов, предложений или вопросов, которым необходимо сосредоточенное внимание пользователя. К тому же лендинги зарекомендовали себя эффективным методом продвижения мобильных приложений. Основываясь на исследованиях пользователей и на тестировании, лендинг можно превратить в удобный инструмент, который предоставляет необходимую информацию в ясной и доступной форме, экономя время и усилия пользователей.
Digital Agency Landing Page
Креативный параллакс-эффект
С развитием моушн-дизайна, анимация прокрутки стала широко использоваться в интернете и на мобильных устройствах. Необычный и оригинальный параллакс-эффект делает прокрутку более приятной и естественной для глаз.
Bakery Website
Промовидео для интернет-маркетинга
Рекламные ролики эффективно служат маркетинговым целям и повышают узнаваемость бренда. Креативное и запоминающееся видео — это хороший способ привлечь внимание клиентов и донести до них нужную информацию.
Видео активирует несколько каналов восприятия: визуальный и звуковой, и усиливает их повествованием.
Эти факторы делают презентацию через видео сильной и запоминающейся, особенно если в её основе высококачественные графический дизайн и анимация. Люди ежедневно перегружены тоннами информации всех видов, поэтому большинство из них не готовы уделять много времени изучению новых продуктов или услуг. В этих условиях видео стали динамичным, информативным и привлекательным форматом.
Однако тут стоит вопрос о скорости загрузки страницы, поэтому сайт нужно тщательно тестировать на различных устройствах.
Геймификация интерфейса
В прошлом году возрос интерес к геймификации, применяемой в различных интерфейсах: не только для развлечений, но и для социальных и бизнес-продуктов. В технологическом мире слово «геймификация» означает технику применения игровой механики в неигровой среде, например, для сайтов и мобильных приложений. Челленджи, награды, очки, значки, таблицы лидеров и другие похожие элементы помогают дизайнерам продумывать способы эффективной мотивации и удержания пользователей.
Upper App
Боксы и карточки как элементы верстки
Еще один тренд в UX-дизайне 2017 года — это разнообразные карточки и боксы в веб- и мобильной верстке, которые помогают выделить главную информацию при беглом сканировании элементов интерфейса. К тому же они способствуют созданию общей гармонии и композиции экрана.
StarDust Biker Website
Геометрические элементы как часть стиля
В предыдущем году геометрические элементы появились во многих интерфейсах. Разнообразие простых и сложных форм, паттернов, линий и кривых использовались во многих дизайн-решениях, как в традиционных, так и в новых комбинациях.
Wedding Theme
Необычные цветовые палитры и комбинации
На основе теории цвета появились новые оригинальные комбинации. Цвет — это один из самых мощных способов добавить быстро воспринимаемое сообщение и настроение в интерфейс, а также сделать его оригинальным и привлекательным. Эксперименты с цветом — это не только чистое творчество: даже самые креативные и удивительные комбинации основаны на знании теории цвета, психологии цвета и виртуозности дизайнеров пользовательского интерфейса.
Book Swap App
Без Lorem Ipsum
В предыдущем году повышенное внимание обращали на качество контента. В пользовательских интерфейсах контент и дизайн взаимосвязаны: нужно заставить их успешно дополнять друг друга вместо того, чтобы бороться за внимание пользователей. Поэтому все больше дизайнеров используют реальный контент в макетах, а не известный Lorem Ipsum. Это приближает дизайнеров, клиентов и создателей контента к реальному опыту и естественному ощущению взаимодействий.
Dating App Landing Page
Заключение
2017 год стал годом разнообразия в дизайне интерфейсов. Каждый день миллионы пользователей с разными вкусами, предпочтениями и любимыми стилями пользуются приложениями и сайтами.
Чем больше вариантов внешнего вида и функций будет разработано, тем выше шанс, что пользователь сможет найти то, что полностью соответствует его потребностям и пожеланиям. В любом случае, 2018 год поставит новые творческие задачи перед дизайнерами интерфейсов.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.