WhatsApp запускает функцию видеозвонков
Previous
выбрать за меня
Google выпустил приложение для оцифровывания старых фотографий
Next
ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета
Юзабилити

Топ-10 UI трендов на 2017 год

Автор: Ия Пфанштиль16.11.2016

Мир UI-дизайна постоянно меняется, поэтому бывает непросто следить за всеми новыми веяниями и разработками.

В сегодняшней статье мы собрали для вас 10 самых важных UI трендов, которые нужно будет освоить в 2017.

1. Захватывающее полноэкранное видео

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

Как известно, лучше один раз увидеть, чем сто раз услышать. Это правило работает и в современном UI-дизайне. Полноэкранное видео привлекает внимание и более эффективно передает как ваше сообщение, так и тон обращения к пользователям.

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

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

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

Зачем использовать?

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

2. Длинный контент и прокрутка

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

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

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

Зачем использовать?

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

3. Градиенты и яркие цвета

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

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

В 2016 каноны плоского дизайна пошатнулись и все больше брендов и дизайнеров начали фокусироваться на индивидуальности, экспериментируя с яркими цветами и градиентами. Новый тренд наиболее ярко проявился в ребрендинге Instagram.

Нравится вам этот стиль или нет, готовьтесь в предстоящем году увидеть больше нестандартных цветовых решений.

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

Зачем использовать?

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

4. Иллюстрации

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

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

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

Зачем использовать?

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

5. Отказ от сетки

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

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

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

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

Зачем использовать?

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

6. Параллакс

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

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

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

Зачем использовать?

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

7. Больше карточек!

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

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

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

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

Зачем использовать?

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

8. Микро-взаимодействия

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

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

С точки зрения пользовательского опыта это не только развлекательный элемент, но и форма отклика на действие. Микро-взаимодействия помогают понять, что происходит сейчас и что произойдет дальше.

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

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

Зачем использовать?

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

9. Шрифты

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

С появлением новых недорогих или бесплатных шрифтов все больше брендов будет использовать красивую типографику вместо уже надевшего всем san serif.

Дизайнеры начинают активнее использовать необычные и креативные шрифты. В 2017 этот тренд будет только усиливаться.

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

Зачем использовать?

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

10. Экспериментальная навигация

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

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

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

ui, ux, Тренды, веб дизайн, видео, креатив, юзабилити, UX-дизайн, карточный дизайн, плоский дизайн, шрифты, типографика, навигация, анимация, параллакс скроллинг, иллюстрации, цвета

Зачем использовать?

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

Выводы

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Ия Пфанштиль

Перевожу и адаптирую лучшие статьи для любимых читателей.

Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИСЫВАЙТЕСЬ НА НАС!
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.