Тренды UX & UI дизайна в 2020 году
ТОП 12 трендов UI/UX дизайна на 2020 год
I. Значимая ценность
По мере развития технологий и предоставления дизайнерам и разработчикам безумно мощных инструментов, техническая культура переключает фокус с эмоций и ощущений на смысл и повествование.
Гештальт-теория подразумевает, что целое больше, чем сумма его частей. Когда мы решаем бизнес-проблему с помощью дизайна, мы делаем нечто большее, чем обеспечиваем благополучие компании.
Влиять на людей при помощи продуктов – ответственность далеко не юридическая. Социальное воздействие набирает обороты, и то, что компания представляет, выполняя свою работу, так же важно, как и качество продукта или услуги.
Причина, по которой вы делаете что-то, будет важнее того, что вы делаете.
II. Ассиметрия и разделенный экран
Блочный макет – это классика. Он отражает легко усваиваемый поток информации, когда концепции определили границы. Он формирует ощущение завершенности и просто помогает лучше понять структуру. Блоки означают симметрию. Тем не менее, существует асимметричный тренд, который всегда присутствовал на рынке, но никогда не становился мейнстримом. Он особенно актуален с сегодняшними широкоформатными экранами.
Мы чувствуем, что в наступающем году асимметрия снова вернется. Во-первых, все привыкли иметь дело с несколькими инструментами, борющимися за пространство на экране. Мы чувствуем себя комфортно с разделенным экраном, и этот принцип находит свое отражение в макетах.
То, что изначально было утилитарным подходом для предоставления двух отдельных блоков информации на одном экране, теперь становится визуально привлекательным способом представления информации любого типа.
III. Неброские градиенты
2018 год был годом синих и фиолетовых градиентов. 2019 год аналогично, но с более мягкими оттенками. Ожидаем увидеть больше разбавленных цветов в 2020 году.
IV. Гармоничные цвета
Цвета 2020 года сочетают в себе «оптимизм со скромностью». В целом, цвета, ожидаемый тренд во всех отраслях дизайна. В грядущем году они будут более натуральными, чем палитра прошлых лет.
Animation от Zhenya Rynzhuk.
Однако, это не означает, что все цвета должны быть одной палитры. Яркий неуместный цветной элемент усилит этот эффект еще лучше.
V. Смешанный опыт
Animation от Кофейная компания Allpress Culture
Смешивание контента означает создание полезного опыта на ваших условиях. Позже мы поговорим о настройке опыта на основе поведения пользователя, но основным трендом является веб-сайт, который не состоит из экранов, иллюстраций и видео. Они вместе составляют композицию.
VI. Desveloper (Дизайнер разработчик в одном лице)
Криптонит дизайнера – это разработка. Иногда мы проектируем вещи, которые невозможно реализовать в определенные сроки, бюджет или силами имеющейся команды. Некоторые дизайнеры учатся кодить и становятся «опасными», потому что они знают достаточно, чтобы спорить, но недостаточно, чтобы на самом деле сделать это.
Эта дихотомия должна прекратиться в 2020 году, благодаря таким инструментам будущего, как Webflow. По сути, это визуальный инструмент, который позволяет вам создавать все, что угодно, до тех пор, пока это можно сделать с помощью HTML и CSS. Каждое движение пикселя является изменением кода, что делает этот подход идеальным способом для дизайнеров начать кодить.
Веб-сайт электронной коммерции, сделанный в Webflow. Дизайн Ryan Morrison.
Когда все движется к дизайну, основанному на взаимодействиях, становится все труднее объяснить, как взаимодействие должно работать и выглядеть. Поэтому важность и необходимость такого визуального инструмента трудно переоценить.
VII. Пустое пространство
Когда элементы борются за внимание, ни один из них не получит достаточно внимания. Когда один элемент выделен, он привлекает все внимание. В зависимости от идеи, которую передает интерфейс, важно дать ему пространство, чтобы позволить этой идеи утонуть.
Есть микро и макро пустые пространства, пространства для текста и абзацев, они могут быть активными и пассивными, и все они масштабируются. В этом есть прагматический аспект, поскольку мы склонны обрабатывать сжатую информацию дольше и с меньшим пониманием.
Домашняя страница творческой студии Hello Monday с большим количеством пустого пространства.
Окружение идеи пустым пространством – это способ выделить идею. Теперь давайте удостоверимся, что выделяемая информация, того стоит.
VIII. Тяжелые изображения
Хотя трудно представить дизайнера, чье поведение по умолчанию не включает в себя набор векторных иконок и блок «наши преимущества», верхушка индустрии возвращает нас к простым сценариям и великолепным изображениям.
Потрясающая презентация / целевая страница Apple AirPods Pro.
Чтобы представить продукт или услугу в 2020 году, все больше компаний будут использовать супер-детализированные изображения продуктов и людей, использующих эти продукты.
Изображения в высоком разрешении подражает почти тактильному ощущению, которое находится в одном шаге от покупки. Даже при том, что возможны проблемы со временем загрузки, при правильных технологиях и различном UX, все может стать уродливым.
IX. Перекрывающаяся типографика
Это продолжение тренда смелой типографики. Заголовки перекрывающие постеры являются альтернативой звуку. С его помощью вы можете передать идею графически привлекательным способом.
На домашней странице Orkestra заголовки перекрывают изображения
X. Полноэкранные визуальные эффекты
Расположение контента, стимулируемого социальными медиа, по центру страницы является проблемой на разных уровнях. Во-первых, центр экрана – это то место, куда естественным образом тяготеют наши глаза, во-вторых, мы играем наверняка, размещая значимый контент в середине страницы, однако есть преимущества от использования всего полезного пространства страницы.
Домашняя страница сайта Brand Studio– это глазок в безумный мир.
XI. Непрерывный UX
Нужен продукт? Нажмите здесь и посетите эту страницу. Нужно увидеть больше фотографий? Нажмите здесь и прокрутите. Хотите обзоры? Нажмите здесь и ознакомьтесь с нижним разделом. Хотите купить? Нажмите на значок корзины, затем перейдите на страницу «Оформить заказ», укажите свою кредитную карту, но до этого зарегистрируйтесь, заполните 27 текстовых полей, согласитесь с «Условиями и положениями», получите счет-фактуру по электронной почте, отследите свой заказ.
Каждый шаг этого процесса побуждает вас сомневаться в своем намерении купить. Каждое поле, которое вы должны заполнить, отнимает время. Мотивация должна быть высокой, чтобы пройти процедуру покупки онлайн. Возможно, потому что сегодня люди знают, как продавать вещи.
А что, если бы, сайту для отправки покупки было нужно только ваше намерение совершить покупку. Одна кнопка для управления всем процессом. Мобильный телефон использует этот прием, интегрируя в платежи простые жесты и Face ID. Нам еще предстоит увидеть рост этого тренда в Интернете.
BikeConfigurationот Den Klenkov является потрясающим примером опыта покупок-онлайн, сплетенного в исследование и опробование продукта.
Технологии несут обязательства перед человечеством за халатность в отношении конфиденциальности. Единственный способ исправить это – не отказываться от личных данных, а фактически использовать их для лучшей цели. Пользователь не должен раздумывать, может ли он доверить вам свою личную информацию. Если вы запрашиваете данные, они должны быть в сохранности. И это наша обязанность. Наша задача – принять намерение пользователя и превратить его в удовольствие. Что бы мы ни использовали для этого, это нормально, если наши действия остаются в рамках этических норм и соответствуют современным требованиям безопасности.
Интернет работает на куки. Без них он превратился бы в дерьмо. Теперь очередь за геолокацией. Непрерывный UX начинается там, где к конфиденциальной информации относятся, как торговому таинству, а не товару.
Речь идет не только о покупках. Любая цель пользователя должна рассматриваться подобным образом. Если вы выиграли битву за внимание пользователя, вы не можете проиграть битву за его удовлетворение.
XII. 3D-графика
3D-технологии сегодня не пользуются большим спросом, что немного странно для нашего времени. Кто-то скажет, что это увеличивает время загрузки. Я скажу, что это способ более детальной передачи информации. Соответственно, у клиента создается ощущение, что компании нечего скрывать.
Действительно, 3D требует намного больше ресурсов как для разработки, так и для загрузки страниц. В то же время, она позволяет передать намного больше информации на одной странице. Соответственно, пользователь получит результат быстрее, чем при переходе между веб-страницами. Для убеждения предлагаю посмотреть, как автодилер Genesis решил знакомить пользователей со своими машинами.
Преимущества 3D-дизайна:
- повышает конкурентоспособность;
- упрощает восприятие информации пользователем;
- детализирует визуализацию продукта;
- упрощает внедрение новых тенденций дизайна;
- исключает необходимость создания физических прототипов.
Это небольшой подбор в 11 трендов на 2020 год, которые несомненно оставят свой след в UX & UI дизайне в этом году и не только!
В заключение я приведу цитату из книги Марти Ноймайера «46 правил гения: руководство по креативности для новаторов»: «Творчество – это дисциплина, которую вы используете, когда не знаете ответов, когда путешествуете в неизведанное. В таком путешествии ошибочные шаги тоже шаги. Каждая ошибка приближает вас к решению».
Всем добра и креатива !:)
Добавить комментарий