UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Тренды UI/UX дизайна на 2020 год
Редакція
Редакція

Опубліковано

Тренды UI/UX дизайна на 2020 год

#ux

Двадцать трендов UI/UX дизайна на 2020 год.

1. Значимая ценность

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

https://youtu.be/9IkKBLRW\_8g

Falter Inferno от Wild. Изображение сегодняшнего ада на яву, провоцирующее вас взглянуть в зеркало.

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

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

Причина, по которой вы делаете что-то, будет важнее того, что вы делаете.

2. Изумительная анимация

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

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

https://youtu.be/KIDWcVXRiz4

Corn. Revolution от Resn с сайта GreenSock.

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

Время двигаться. В прямом смысле

3. Ассиметрия и разделенный экран

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

https://youtu.be/89eRpyTlcTE

Baas Amsterdamассиметричный макет.

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

https://youtu.be/9dCyCksYBAs

2019 Annual Digestот Abb-d Choudhury и Sara Scobie.

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

Разделение

4. Неброские градиенты

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

Одним из примеров являются нежные цвета, а также упрощение и сокращение. Активно используются светлые и мечтательные оттенки.

#10 Quota – Получите ежедневную цитату ✌️ Анимация Sebastian Jungbluth

2018 год был годом синих и фиолетовых градиентов. 2019 год аналогично, но с более мягкими оттенками. Ожидаем увидеть больше разбавленных цветов в 2020 году.

5. Гармоничные цвета

Цвета 2020 года сочетают в себе «оптимизм со скромностью».

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

A+WQ / Young Lab Slider Animation от Zhenya Rynzhuk.

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

Приглушенные цвета.

6. Человеческий копирайтинг

Прогресс в UX-копирайтинге в последние два года установил высокие стандарты для копирайтеров. Сам термин «UX Writing» исчезнет, ​​поскольку любой копирайтинг продуктов для людей является UX копирайтингом.

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

Исходное сообщение и отредактированное, ориентированное на пользователя, сообщение. Вдохновлено Maxim Ilyahov.

Не существуетволшебных слов.

7. Смешанный опыт

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

Кофейная компания Allpress Culture

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

https://youtu.be/kZrSrmGOFbc

Аниме“OBSOLETE”от JUNNIE.

Создавайте опыт, а не строительные комплекты.

8. Красота вернулась

Здесь нечего сказать. Просто примите это.

Sagmeister & Walsh: Beauty.

«Убедитесь, что это создано людьми, для людей».

_
- Стефан Сагмейстер._

9. Desveloper (Дизайнер разработчик в одном лице)

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

Эта дихотомия должна прекратиться в 2020 году, благодаря таким инструментам будущего, как Webflow. По сути, это визуальный инструмент, который позволяет вам создавать все, что угодно, до тех пор, пока это можно сделать с помощью HTML и CSS. Каждое движение пикселя является изменением кода, что делает этот подход идеальным способом для дизайнеров начать кодить.

Веб-сайт электронной коммерции, сделанный в Webflow. Дизайн Ryan Morrison.

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

Будьте «опасным» дизайнером. Смешайтесь с кодом.

10. Пустое пространство

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

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

Домашняя страница творческой студии Hello Monday с большим количеством пустого пространства.

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

Ничто – это что-то

11. Тяжелые изображения

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

https://youtu.be/NVBn55Yc8rQ

Потрясающая презентация / целевая страница Apple AirPods Pro.

Чтобы представить продукт или услугу в 2020 году, все больше компаний будут использовать супер-детализированные изображения продуктов и людей, использующих эти продукты.

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

Так реально, что я чувствую это.

12. Различный UX

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

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

Веб-сайт изменяет размер изображения iPhone 11 Pro в зависимости от вашего скролла

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

Научите свои дизайны понимать контекст.

13. Новый мобильный опыт

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

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

https://youtu.be/RzBLW7fe4cY

Комик Esther Povitsky демонстрирует мобильный браузер Cake.

Технически это приложение из AppStore, предназначенное для освобождения пользователей от приложений. Но он обеспечивает знакомый опыт работы с приложениями при использовании поисковых систем и просмотра веб-сайтов. PWA станет трендом, и с поддержкой мобильных браузеров, мы можем ожидать, что их еще больше появятся на рынке.

Примите свайп.

14. Перекрывающаяся типографика

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

На домашней странице Orkestra заголовки перекрывают изображения

Студия Spatzek не суетится.

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

https://youtu.be/MsM1wpso7RA

Largo Studio использует наложение текста, чтобы проиллюстрировать видео о том, как они работают над проектом.

Замолвите слово.

15. Другие иллюстрации

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

Это открывает окно возможностей для художников, которые ненавидят стоковые иллюстрации.

Иллюстрации Absurd.design

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

Иллюстрированное меню Qode Interactive Catalog

Сначала веселье, потом бизнес.

16. Кастомная навигация

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

Сайт Corphes перевернул навигацию, призывая вас подняться на вершину, а не спускаться.

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

Меню навигации сайта 2ndstreet повторяет расположение заголовка страницы.

Направляйте к эффекту, а не его остаткам.

17. Полноэкранные визуальные эффекты

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

https://youtu.be/Isfilx8pgxA

Домашняя страница сайта Brand Studio– это глазок в безумный мир.

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

https://youtu.be/SJinzcklY1E

Shimane Misatoиз Японии – это интерактивная полноэкранная история.

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

https://youtu.be/2DVd1TdOPJ4

Сайт Fishing Feedзнакомит вас с проблемой рыболовной индустрии.

Не стройте стены, сносите их.

18. Визуализация данных

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

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

https://youtu.be/Ni4lL3k3JC0

Autoneum это визуализация автомобильного акустического управления. Это целая наука.

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

Визуализируйте, что важно, а не то, что доступно.

19. Непрерывный UX

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

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

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

Bike Configuration от Den Klenkov является потрясающим примером опыта покупок-онлайн, сплетенного в исследование и опробование продукта.

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

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

Речь идет не только о покупках. Любая цель пользователя должна рассматриваться подобным образом. Если вы выиграли битву за внимание пользователя, вы не можете проиграть битву за его удовлетворение.

Не перебивайте человека, который хочет дать вам свои деньги.

20. Достоинство

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

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

Быстрый тест. Прокрутите публикации в своем творческом аккаунте за последний год. Сколько хайповых вещей вы там нашли? Уверен, что тоже самое будет с Cybertruck через год. Нет ничего плохого в том, чтобы зарабатывать деньги, но дизайнеров запоминают за то, что они не такие как другие. Рецепта успеха нет, но есть преимущество в его поиске.

В заключение я приведу цитату из книги Марти Ноймайера «46 правил гения: руководство по креативности для новаторов»:

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


Перевод статьи shakuro.com

Найстарші коментарі (0)