Тренды UI и UX дизайна на 2019 год
Наш канал в

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

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

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

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

Мощные браузеры

Браузер – это не только средство использования Интернета, но и средство воздействия. Браузеры становятся быстрее, мощнее и привлекательнее.

  • Тесты производительности доказывают значительное повышение производительности для большинства популярных браузеров.
  • Увеличение скорости из-за большого влияния потоковой компиляции на дизайн. Mozilla сообщает, что новый компилятор будет в 10–15 раз быстрее предыдущего оптимизирующего компилятора.
  • Все современные браузеры поддерживают WebGL 2, который обеспечивает совершенно новый уровень 3D текстуры и рендеринга объектов, глубины фрагментов и объектов массива вершин.

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

Жаль, что evolutionoftheweb.com закрылся в 2012. Этот график шикарен
Жаль, что evolutionoftheweb.com закрылся в 2012. Этот график шикарен

?

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

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

Большинство веб-сайтов делают браузеры похожими на дерьмовый софт.

Целенаправленная анимация

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

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

Раньше пространство между экранами было ничейной землей. Теперь это твой задний двор.

Превью страницы Cocoladas Creative Blog Artist от Zhenya Rynzhuk
Превью страницы Cocoladas Creative Blog Artist от Zhenya Rynzhuk

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

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

Fuck от Eduard Mykhailov
Fuck от Eduard Mykhailov

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

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

Lakko — Анимация логотипа от Zlatko Kelemenić
Lakko — Анимация логотипа от Zlatko Kelemenić

?

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

Не анимируйте безрассудно.

3D в интерфейсах и плоскость с эффектом глубины (deep flat)

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

3D графика в интерфейсах размывает границу между реальностью и цифровой анимацией.

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

Baker Hughes Digital от Sanu Sagar
Baker Hughes Digital от Sanu Sagar

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

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

3D переход карточек от Gleb Kuznetsov
3D переход карточек от Gleb Kuznetsov
3D flip menu от Minh Pham
3D flip menu от Minh Pham ✪

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

Плоскость с эффектом глубины – это новая плоскость.

Комбинация реального 3D и CG выявила реакцию клиентов на реалистичные объекты, с которыми они могут взаимодействовать. Плоский дизайн также способен сделать это уникальным и еще не изученным способом. Его называют псевдо 3D. Это плоские слои, складывающиеся вместе, чтобы создать ощущение трехмерности. Основным ресурсом добавления размерности к плоскому дизайну, будет расположение теней и света, а также отражения.

ARTA / Art Gallery от Mike | Creative Mints
ARTA / Art Gallery от Mike | Creative Mints

Существует также фальшивый 3D-тренд, который использует традиционные инструменты дизайна, такие как Principle и After Effects, для создания паттерна движения, эмулирующего 3D.

Астронавт от Markus Magnusson
Астронавт от Markus Magnusson

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

?

Да, но у нас в конечном итоге закончатся варианты. Уже нет определенного направления развития 3D-интерфейсов. Оно идет обеими путями – упрощение и изощренность. Хотя для того, чтобы произвести на нас впечатление, нужны дополнительные технологические усилия, требуется много мужества, чтобы избавиться от сложности и внедрить сумасшедшую концепцию. Однако, если самые сложные интерфейсы не имеют смысла, или самые смелые идеи – не что иное, как ширма, все усилия будут бесполезны.

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

Сюрреалистический дизайн

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

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

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

Как сохранить мотивацию от Justin Tran для Dropbox Design
Как сохранить мотивацию от Justin Tran для Dropbox Design
Shop Small от Joe Montefusco для Mailchimp
Shop Small от Joe Montefusco для Mailchimp

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

?

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

Сперва обретите последователей, а уже потом развлекайте их.

Градиент 2.0, яркие цвета и темный фон

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

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

Grabient 2.0 от Eddie Lobanovskiy
Grabient 2.0 от Eddie Lobanovskiy

Градиент 2.0 утонченный и простой. Он не использует конфликтующие цвета. У него есть чистый источник света, и он совпадает с фигурами, чтобы добавить глубину.

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

Valley Illustration от J.HUA для Tunan
Valley Illustration от J.HUA для Tunan

Нам не хватает доверия и оптимизма. Яркие цвета способствуют позитивности. Доверяете ли вы такому крипто приложению?

Крипто приложение от uixNinja
Крипто приложение от uixNinja

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

Плоскость с эффектом глубины, цвета и 3D в темноте.

Панель приборов от uixNinja
Панель приборов от uixNinja

?

Да, но доступность – это не единственная проблема с градиентами, цветами и темными темами. Яркие цвета традиционно используются для усиления акцентов. Когда все цветное, как вы можете что-то выделить? Не у всех пользователей есть OLED-экраны. Некоторые из градиентов могут быть потеряны. Слишком большая контрастность может помешать вниманию пользователя. Темные темы не работают в солнечный день на улице. Хотя, это может быть действительно хорошая вещь.

Переменные шрифты

Традиционно шрифты воспринимаются как статические объекты с ограниченным набором настраиваемых параметров. Дизайнеры и копирайтеры должны учитывать удобочитаемость в контексте x-высоты и ширины букв.

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

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

Marvin Visions
Marvin Visions

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

ГОЛОСУЙ от Josh Rinard
ГОЛОСУЙ от Josh Rinard

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

И это только начало. Художественные варианты переменных шрифтов еще предстоит изучить в 2019 году.

Typography.Guru
Typography.Guru

?

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

Figma

Сегодня мы задаем давний вопрос: «Нужно ли программистам кодить?» А затем: «Нужны ли разработчикам знания о UX?». Суть этого проста – избежать боли и несоответствий при создании дизайна. Так что, если речь идет о цели, также следует говорить о способах ее достижения.

Учиться кодить – это логичный вариант. Если вы тот, кто выполняет свой собственный дизайн, вы избежите кучу проблем. Тем не менее, объем знаний, которые вы должны поддерживать, чтобы быть современным дизайнером и потенциальным разработчиком огромен. Вам это по силам? Везет вам. Для остальных должны быть другие варианты.

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

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

Полный переход на Figma
Полный переход на Figma от Alexey Kolpikov

Figma – это инструмент дизайна, созданный дизайнерами для дизайнеров. Его ожидало много скептицизма и «что-если».

Figma уничтожила Sketch.

Она делает все, что делают Sketch и Adobe XD, но больше и лучше. Что еще более важно, Figma направлена ​​на создание того, что будет реализовано. Каждый компонент Figma может быть превращен в компонент React посредством API и реализован во фронт-энд. Пока Figma превосходит конкурентов по стоимости, скорости работы, совместной работе, совместному использованию, внедрению, поддержке и так далее. С учетом сказанного, Figma все еще развивается, и в 2019 году появится еще больше новых функций.

?

Да, но всякий раз, когда мы разрабатываем более качественные продукты и не устанавливаем этическое использование вышеперечисленного, мы только вносим вклад в собственную погибель. Посмотрите на Twitter, который изо всех сил пытается вернуть себе доброе имя. В 2018 году неоднократно директора технических компаний давали показания в суде. Оказывается, недостаточно просто дать инструменты, мы также должны следить за тем, как люди их используют. Защитит ли Figma пользователей от темных паттернов UX, плохого дизайна и фейковых новостей?

Голосовые интерфейсы

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

Голосовой интерфейс настолько же чувственный, насколько и сложный.

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

Organic Artificial Intelligence design от Gleb Kuznetsov
Organic Artificial Intelligence design от Gleb Kuznetsov

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

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

?

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

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

UX копирайтинг и UX редактирование

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

Вы должны контролировать, как ваш бизнес общается с вашими клиентами.

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

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

Писать UX легко, если вы уважительны и полезны.

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

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

В 2018 году мы стали свидетелями заметного роста голосового и тонального дизайна в крупных компаниях. Они сосредоточились на ценности клиента. В 2019 году мы еще увидим развитие UX-редактирования, как дисциплины дизайна.

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

Каждая крупная кампания по редизайну в 2019 году потребует наличие UX-редактора.

?

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

Есть еще место для творческого копирайтинга в продуктовом дизайне. Но не там, где продукт встречает пользователя. Например, Nike и Boeing платят писателям-фантастам за предсказание своего будущего.

Дизайнер продукта, как должность

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

Сервис-дизайн – это одеяло. Он может охватывать все отрасли и применять универсальные методы.

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

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

Продуктовый дизайн имеет значительное преимущество перед сервис-дизайном. Это доступ к аналитике и возможность тестировать дизайн-решения вживую.

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

Дизайн целевой страницы Innovative Eye Pillow от Sasha Turischev
Дизайн целевой страницы Innovative Eye Pillow от Sasha Turischev

?

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

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

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

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Ключевые принципы новой дизайн системы Fluent Design System от Microsoft

Fluent Design System от Microsoft фокусируется на пяти принципах, которые помогают разработчикам создавать более творческие интерфейсы: глубина, материал, свет, масштаб и движение.

20 ярких трендов в дизайне, которые мы увидим в 2018 году

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

Лучшие дизайны мобильных приложений 2017 года

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