ИСПОЛЬЗОВАНИЕ ТРЕНДОВ UI-ДИЗАЙНА ДЛЯ ФОРМИРОВАНИЯ КОНКУРЕНТНОГО ПРЕИМУЩЕСТВА

UI — User Interface («пользовательский интерфейс») — это то, как выглядит интерфейс, и какие физические характеристики он приобретает. Определяет, какого цвета будет ваше «изделие», удобно ли будет человеку использовать кнопки, значки, читать текст и т.д. [9].

Одним из основных трендов UI-дизайна является использование полноэкранного видео.

Рисунок 1.  Пример полноэкранного видео на сайте [2]

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

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

Рисунок 2. Пример полноэкранного видео на сайте [4]

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

Следующим трендом UI-дизайна является длинный контент и прокрутка

Рисунок 3. Пример использования прокрутки на сайте National Geographic  [6]

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

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

Следующим трендом UI-дизайна является использование Градиента и яркие цвета

Рисунок 4. Пример использования градиента и ярких цветов [8]

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

Рисунок 5. Пример оформления приложения Instagram после ребрендинга [10]

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

Следующим трендом UI-дизайна является использование Иллюстраций

Рисунок 6. Пример использования иллюстрации [3]

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

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

Следующим трендом UI-дизайна является Отказ от «сетки»

Рисунок 7.  Пример сайта с расположением элементов без "сетки"

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

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

Следующим трендом UI-дизайна является Параллакс

Рисунок 8. Пример использования параллакса [7]

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

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

Следующим трендом UI-дизайна является увеличение количества «карточек»

Рисунок 9. Пример использования множества "карточек"

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

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

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

Следующим трендом UI-дизайна является Микро-взаимодействия

Рисунок 10. Пример использования микро-взаимодействия

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

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

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

Следующим трендом UI-дизайна является использование различных Шрифтов

Рисунок 11. Пример использования различных шрифтов [5]

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

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

Следующим трендом UI-дизайна является Экспериментальная навигация

Рисунок 12. Пример использования необычной навигации на сайте [1]

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

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

Список литературы:

1. Официальный сайт компании Adultswim. 2017. [Электронный ресурс] URL: http://www.adultswim.com/music/singles-2017/1 (дата обращения: 04.06.2017 г.).
2. Официальный сайт компании Campos. 2017. [Электронный ресурс] URL: https://camposcoffee.com/ (дата обращения: 04.06.2017 г.).
3. Официальный сайт компании Dropbox. 2017. [Электронный ресурс] URL: https://www.dropbox.com/ru/?landing=cntl  (дата обращения: 04.06.2017 г.).
4. Официальный сайт компании IFLY. 2017. [Электронный ресурс] URL: http://www.iflyltd.ru/ru/ (дата обращения: 04.06.2017 г.).
5. Официальный сайт компании Mailchimp. 2017. [Электронный ресурс] URL: https://mailchimp.com/holiday-tips/ (дата обращения: 04.06.2017 г.).
6. Официальный сайт компании National Geographic. 2017. [Электронный ресурс] URL: http://www.nat-geo.ru/ (дата обращения: 04.06.2017 г.).
7. Официальный сайт компании Park City. 2017. [Электронный ресурс] URL: http://www.parkcitymountain.com/ (дата обращения: 04.06.2017 г.).
8. Официальный сайт компании Spotify. 2017. [Электронный ресурс] URL: https://www.spotify.com/int/why-not-available/ (дата обращения: 04.06.2017 г.).
9. Различие между UI и UX дизайном [Электронный ресурс] // Официальный сайт UX guru. 2017. URL: http://uxgu.ru/ux-vs-ui/ (дата обращения: 04.06.2017 г.).
10. Ребрендинг аккаунта в instagram. // Официальный сайт портала Promogram 2017. [Электронный ресурс] URL: http://promogram.ru/uslugi/rebrending_akkaunta/ (дата обращения: 04.06.2017 г.).