Каким был 2017 год в дизайне интерфейсов: главные тренды, которые актуальны и в 2018

14.02.2018
6209
Подпишитесь, чтобы получать новые статьи на почту

Глеб Летушов, редактор-фрилансер, специально для блога Нетологии адаптировал статью Tubik Studio про популярные тренды в дизайне интерфейсов прошлого года.

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

Программа обучения: «Проектирование интерфейсов: UI-UX дизайн от стратегии до тестирования»

Функциональный минимализм

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

Минимализм в интерфейсе строится на таких базовых принципах:

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

Конечно, этот список можно продолжить, но уже названных принципов достаточно, чтобы убедиться, что минимализм в интерфейсе удобен для пользователя. Он помогает увидеть основные элементы интерфейса, делая перемещение пользователя по интерфейсу интуитивно понятным и целенаправленным. Кроме того, такой дизайн обычно выглядит завершенным и лаконичным и приносит эстетическое удовлетворение, а это один из желаемых результатов в 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

Промовидео для интернет-маркетинга

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

Видео активирует несколько каналов восприятия: визуальный и звуковой, и усиливает их повествованием.

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

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


Promo Video design for Binned

Геймификация интерфейса

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


Upper App

Боксы и карточки как элементы верстки

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


StarDust Biker Website

Геометрические элементы как часть стиля

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


Wedding Theme

Необычные цветовые палитры и комбинации

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


Book Swap App

Без Lorem Ipsum

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


Dating App Landing Page

Заключение

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

Читать ещё: «Лучший UX и веб-дизайн по версии пользователей Behance»

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


Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Глеб Летушов
Редактор
Университет интернет-профессий
Мы используем файлы cookie
Чтобы улучшить работу сайта и предоставить вам больше возможностей для обучения. Продолжая использовать сайт, вы соглашаетесь с условиями использования файлов cookie.