Дизайнеру необходимо быть в курсе последних тенденций дизайна. Стиль работы должен меняться и развиваться, чтобы поддерживать свежесть работы и резонировать с клиентами и продуктами. 2019 год собрал много трендов прошлого года, а также добавил несколько новых. Итак, взгляните на самые яркие тенденции в этом году, которые мы выбрали.
Мощные браузеры
Браузер - это не только средство доступа в Интернет, но и орудие влияния. Браузеры становятся быстрее, мощнее и привлекательнее.
- Тестирование показало значительный прирост производительности большинства популярных браузеров.
- Увеличение скорости за счет потоковой компиляции сильно влияет на развитие дизайна. Mozilla сообщили, что их новый компилятор будет работать в 10-15 раз быстрее, чем предыдущий оптимизирующий компилятор.
- Все современные браузеры поддерживают WebGL 2, технологию, которая выводит 3D-текстуры и рендеринг, глубину фрагментов и VAO на новый уровень.
Однако все эти продвижения в работе браузеров до сих пор говорят об их ценности исключительно в качестве обособленного продукта, не оказывая влияния на отрасль на более высоком уровне. В веб-дизайне столько всего происходит, и разработчикам браузеров трудно найти универсальные решения и навести веб-порядок.
Современные браузеры, возможно, и круты, но, отправляя юзера на плохие веб-сайты, они заражаются плохим UX-дизайном. Нужно делать выбор в пользу лучшего дизайна, чтобы раскрыть актуальный потенциал веб-браузеров.
Целенаправленная анимация
Помимо всего прочего, новые возможности браузеров дают дорогу развитию анимации. Причем такой анимации, которая не просто приводит элементы в движение, но и помогает довести сам дизайн до совершенства. Существует такая дисциплина - интерактивный дизайн, которая объединяет аспекты проектирования с психологией и биологией.
В 2019 году люди еще глубже, чем прежде, начали изучать анимацию и интерактивный дизайн. Сложные формы пришли на смену модным поветриям в качестве отличительной черты анимации в дизайне. Если бы не интерактивность и переходы, большинство информации, которую они передают, было бы утеряно.
Чтобы теснее привязать к себе клиента, необходимо непрерывно поддерживать с ним связь - каждая секунда дорога. Дизайнеры хватаются за эту возможность до того, как пошлый маркетинг начнет отравлять дружбу с потребителем.
Интерактивный дизайн гораздо глубже обычной презентации и заполнения пустоты. Сейчас это - часть брендинга. До сих пор мы воспринимали лого как идолов. Именно наше воображение и ощущения воплощают их в реальность. Так почему бы нам не заглянуть в это воображение поглубже и не направить его в нужную сторону?
Движение несет в себе гораздо больше, чем свет, расположение элементов и оформление. Движение рассказывает историю. Если сможете сделать фирменный знак частью своей истории, добавив в него немного осмысленности, то вперед.
Однако все, включая анимацию, существует в определенном контексте. Ваше дизайнерское видение чаще всего не совпадает с видением пользователя. Если разрабатываемый продукт должен призывать к конкретному действию или связан с мрачной историей, нельзя использовать анимацию, даже если она несет в себе глубокий смысл. При возникновении эмоциональных несоответствий всегда выбирайте нейтральный вариант.
3D в интерфейсах и глубина в плоском дизайне
3D-рендеринг и технология дополненной реальности давно у всех на слуху. Дизайнеры привыкли избегать сложных 3D-моделей в UI-дизайне ради скорости и производительности, а также ради удобочитаемости. Благодаря более продвинутым браузерам теперь эти предметы роскоши нам по карману. Мегасложные визуальные эффекты переносят эффекты, до сих пор существовавшие только в кино, на веб-страницы.
Эта тенденция особенно понравится компаниям-производителям, применяющим сложные, но не предназначенные для визуализации, технологические процессы. С помощью 3D-визуализации можно вникнуть в любой технологический процесс и сформировать понимание его сути на более глубоком уровне.
В фильмах и видеоиграх эта технология хорошо работает потому, что изображения присутствуют на экране в течение короткого времени. Технология в этом случае направлена на то, чтобы создать поверхностное впечатление, а не вдохновить наблюдателя на тщательное изучение. В сочетании с целенаправленной анимацией 3D становится мощным инструментом проектирования.
Мобильная индустрия с новыми мощными чипами позволила не только рендерить 3D-объекты, но и включать их в интерфейс. Маленький экран для этого идеально подходит.
Плоский UI-дизайн - уже на протяжении 5 лет главный тренд в проектировании, и с момента его появления ничего особо не изменилось. В последнее время можно заметить явный сдвиг в плоском дизайне в сторону глубины и прорисовки измерения, но основная концепция осталась прежней. Глубина важна, и именно поэтому появился плоский дизайн - люди обожают символизм, и все вокруг себя превращают в символы. А плоский дизайн - это самый что ни на есть символизм.
Сочетание Real 3D и CG показало, как пользователи реагируют на возможность взаимодействовать с правдоподобными визуальными объектами. Плоский дизайн открывает уникальные, ранее неизведанные, возможности для взаимодействия. Его даже прозвали «псевдо-3D». Плоские слои укладываются так, чтобы создавалось ощущение трехмерности. Основные средства, с помощью которых плоскости можно добавить глубины - это расположение теней и света, а также отражений.
Популярность набирает и фейковый 3D-тренд, в котором для симуляции движения используются привычные инструменты проектирования вроде Principle и After Effects. В 2019 году можно было наблюдать и возрождение обновленного скевоморфизма. Если плоскости можно придать глубины, то и можно сделать ее изометрической. Интересно посмотреть, как нам удастся сохранить символизм плоского дизайна, когда все вокруг пытаются придать изображениям реалистичности.
Однако, в конце концов, у нас просто не останется выбора. Уже сейчас сложно понять, в каком направлении развивается 3D-дизайн пользовательского интерфейса. Людей так просто уже не впечатлить, нужно все больше и больше технологий - а потому требуется особое мужество, чтобы отбросить в сторону сложные структуры и представить на суд свою безумную концепцию. Однако, если мы не сможем наполнить сложный интерфейс смыслом, он никому не будет нужен.
Сюрреалистичный дизайн
Все 3D-технологии и интерактивный дизайн - пустое место, если они не вызывают эмоций. Парадокс, но, чтобы воздействовать на эмоции, необязательно мудрить. Причина, по которой изменнические настроения всегда сопутствуют мейнстриму, заключена в его естественной подаче.
Несколько крупных примеров редизайна и связанные с ними иллюстрации получились максимально игривыми:
Этот мультяшный стиль иллюстрации и даже сам пользовательский интерфейс подчиняются одной цели - сохранить новизну внешнего вида. Если ваша торговая марка еще и ваш основной товар, пусть вокруг него будет как можно больше шумихи. Неважно, на какую аудиторию нацелен этот стиль; он должен быть чудаковатым или даже уродливым. Ожидается, что 2019 год принесет еще больше авангарда и сюрреалистического дизайна.
Однако не все компании могут позволить себе подобное бесстыдство. Чем шире аудитория, тем нейтральнее должен быть дизайн. Даже если сюрреализм сработает в случае с зарекомендовавшими себя брендами, компаниям поменьше или с меньшей аудиторией стоит пойти по проторенной дорожке и придерживаться классики.
Градиент 2.0, кричащие цвета и тени
Новые дисплеи прекрасно передают цветовую палитру. Цветопередача так и кричит, так и хвастается своим совершенством с обоев, установленных на телефоне по умолчанию. Дизайнеры исследуют новые возможности градиентов в дизайне пользовательского интерфейса.
Градиент 2.0 изящен и прост. Никаких несочетающихся цветов. Цвета растут из чистого источника света, на который накладываются тени - так формируется глубина. Яркие, пульсирующие цвета никуда не делись. Мы еще увидим различные сочетания цветов и слоев. На самом деле, даже монохромная палитра может нести в себе уникальную визуальную эстетику благодаря глубине и трехмерности.
Что еще круче - яркие цвета и грамотный градиент выгоднее смотрятся на темном фоне. Еще нескоро мы разлюбим темные темы, а значит, на них будет еще приятнее смотреть. Здесь можно почитать, почему темные темы так популярны и эффективны с антропологической точки зрения. Все, кому удастся отыскать гармонию между удобством восприятия темного пользовательского интерфейса и воздействием ярких цветов на эмоции, в следующем году окажутся на высоте.
Однако удобочитаемость - не единственная проблема градиентов, цветов и темных тем. Яркие цвета всегда использовались для усиления акцента. А если все будет цветное - как тогда расставить акценты? Ведь не у всех пользователей есть OLED-дисплеи. Некоторые градиенты просто затеряются на общем ярком фоне. А излишний контраст не даст пользователю сконцентрироваться на изображении. Темные темы неудобно рассматривать на улице в солнечный день. Но вообще все эти штуки довольно интересные и полезные.
Вариативные шрифты
Как правило, визуальная информация воспринимается как статичный объект с ограниченным набором настраиваемых параметров. Дизайнерам и редакторам приходится постоянно выверять высоту, контуры и ширину букв.
Если в дизайне нужно представить визуальную информацию в разных формах, разработчику хранить все использованные шрифты в разных файлах. Нельзя полностью погрузиться в богатую на шрифты типографику, пока не пройдены все начальные стадии дизайна. В случае с вариативными шрифтами вам понадобится всего один файл, потому что с ними ширину и вес шрифта можно менять и настраивать столько, сколько душе угодно.
Вариативные шрифты - находка для адаптивного дизайна и локализации. А еще для дизайнеров, которые прежде ломали голову над тем, как бы адаптировать текст под маленький дисплей без стилистических потерь, или как растянуть текст под другой язык, в котором по определению меньше букв. Когда веб-шрифты только появились, им не хватало адаптивности. Недостаток гибкости привел к потерям в удобочитаемости и ошибкам в самом дизайне. Вариативные шрифты появились совсем недавно. Так добавлять шрифты в веб-дизайн стало гораздо легче и быстрее, а сам процесс проектирования в целом стал более упорядоченным.
И это только начало. Нам еще предстоит исследовать творческие возможности вариативных шрифтов. Однако сколько времени пройдет, прежде чем продвинутые настраиваемые шрифты станут средством продвижения? Если ваш текст резко реагирует на все тонкости любого доступного цифрового контекста, как это убережет читателя от манипуляций?
Параметрические тексты берут свое начало в книгопечатании; а книга - это ограниченный объективной физикой контекст. Благодаря этому люди не жалели бумаги и чернил, а чтение книг стало одной из главных причин прогресса.
Figma
Сегодня рассмотрим древний вопрос: “А надо ли дизайнерам уметь кодить ?” И еще один: “А надо ли разработчикам знать UX?”. Суть проста — избежать головной боли и возникновения расхождений при выполнении проекта. Так что, если речь идет о цели, то стоит поговорить и о том, как ее достичь.
Научиться писать код – это неизбежный и логичный вариант развития событий. Если вы в одиночку работаете над проектом, то сможете избежать целого вороха вопросов. Тем не менее, сумма знаний, необходимых для того, чтобы стать успешным дизайнером и крутым разработчиком, впечатляет. Осилите? Поздравляю. А для тех, кто не осилит, есть ряд других вариантов.
Еще один способ достичь этой цели – использовать и продвигать более качественные инструменты. Один из них - Figma. Раньше дизайнерам приходилось учитывать много переменных: операционные системы, интеграция, плагины, хранилища, синхронизация, взаимодействие, и, наконец, - как все это собрать в одном месте. Те, кто разработал алгоритм, достойны всяческого уважения. Но нам нужно меньше стресса.
Figma – инструмент проектирования, созданный пользователями для пользователей. Этот инструмент предвидел многие альтернативные сценарии и заткнул многих скептиков.
Figma уничтожила Sketch
Figma делает то же, что и Sketch, и Adobe XD, только в большем объеме и гораздо лучше. Что еще важнее, Figma нацелена на разработку продукта, которым будет легко и удобно пользоваться. Каждый компонент инструмента Figma можно превратить в компонент React при помощи базового интерфейса, и применить во внешней части интерфейса. Пока что Figma уделывает конкурентов по цене, скорости работы, взаимодействию, совместному пользованию, встраиванию, поддержке и прочему. При всем при этом, Figma по-прежнему развивается, и по состоянию на 2019 год, ожидать от нее можно еще многого.
Так-то оно так, но раз уж мы разрабатываем продукты более высокого качества и не можем обеспечить их этичное использование, то сами выроем себе могилу. Посмотрите-ка на Twitter, и его борьбу за возврат себе доброго имени. 2018 год выдался урожайным на дачу показаний в суде топ-менеджерами. Похоже, нельзя просто так взять и выложить инструмент в пользование, нужно еще и следить за тем, как люди им пользуются. Защитит ли Figma своих пользователей от мрачных тенденций UX, недобросовестного дизайна и дезинформации?
Голосовые интерфейсы
Чтобы работать, проект не должен быть визуальным или видимым. Набив не один десяток шишек, мы додумались, что для создания нетактильных ощущений инструменты не так важны. Логика проектирования – это психология работы. Создание голосового управления означает решение задач по обработке естественного языка.
Голосовой интерфейс реализует концепцию отсутствия пользовательского интерфейса как нельзя лучше. Этот процесс является внутренним и в большей степени связан с написанием, формированием контекста и синтезом данных, чем с реальным проектированием. Тем не менее, дизайнеры одержимы поиском способов представления голосового пользовательского интерфейса. В основном это достигается за счет впечатляющих интерфейсов и анимации, сходных с работами небольших независимых разработчиков.
В большинстве случаев они не имеют ничего общего с реальными голосовыми интерфейсами, зато готовят пользователя к отсутствию элементов управления и учат обращаться с технологиями, которые не нуждаются в таких элементах.
В 2019 году мы надеемся стать свидетелями углубления знаний о голосовых интерфейсах по мере того, как все больше дизайнеров переходят от простой визуальной эстетики дизайна к осмысленному опыту. Но самая большая проблема с голосовым пользовательским интерфейсом, по иронии судьбы, заключается не во взаимодействии человека с машиной, а во взаимодействии человека с человеком, осуществляемого при помощи технологии, которая должна быть умнее их обоих. Мы живем в чрезвычайно несбалансированном глобальном обществе. Мы боремся с непониманием множества аспектов, включая технологию. Телефоны, автомобили и дома с голосовым управлением могут просто увеличить разрыв между нами.
Будучи дизайнерами, мы должны ставить во главу угла благополучие человечества. Если технология, даже великолепно спроектированная, служит кому-то одному в ущерб кому-то другому, то с таким положением дел следует неустанно бороться. А этого не происходит.
UX-тексты и UX-редактура
В прошлом году дизайнеры стали обращать внимание на значения слов, представленных в информационных блоках. У беллетристов и технических писателей, любителей эпистолярного жанра и журналистов появилась новая смежная индустрия, в которой они могли продемонстрировать свои умения. Все это в итоге привело к тому, что была определена роль написания текстов в дизайне:
Раньше существовала смесь напыщенной нарциссической ерунды и технической номенклатуры. То, чем занимался бизнес, было ошибочно принято за нечто ценное, что он мог дать своим клиентам. Несмотря на успехи, бизнес страдал от отсутствия лаконичных, простых и убедительных формулировок, которые можно было бы использовать в общении с целевой аудиторией.
UX-тексты, или UX-writing, основываются на двух простых принципах: уважение и полезность. Все остальное растет из этих двух критериев. Лаконичность - признак уважения к людям, говорящий о том, что их время вы цените больше, чем свое. Корпеть надо над текстом, а не над привлечением потребителей. Простота означает, что нужно избегать двойственности, и, таким образом, представлять полезность для людей. Убедительность значит говорить правду и не скрывать недостатков продукта. Всегда фокусируйтесь на том, чтобы, в первую очередь, помочь пользователю, а не выставлять напоказ свое красноречие. Забудьте на время о SEO. И никогда не используйте маркетинговые клише. Хватит. Всему есть предел.
Людям неинтересно, как ты изворачиваешься и продвигаешь свой продукт. Им интересно, сможешь ли ты им помочь. Пусть ваш продукт сам расскажет, почему он всем так нужен.
В 2018 году было очевидно, что крупные компании стали чаще обращаться к концепциям тона и голоса в дизайне. Они оставили стремления к изобретательности и сосредоточились на потребительской ценности. В 2019 году UX-редактура, или UX-editing, все еще не оформилась в четкую дисциплину.
Различие между UX-writing и UX-editing заключается в пропускной способности. UX-писатели создают текст, обращенный к пользователю. UX-редакторы этот текст анализируют, изменяют, переиначивают и выворачивают наизнанку, чтобы получить простой, удобоваримый, человеческий текст. Не существует ускоренного курса изучения UX-редактуры. Это сплошной опыт, наблюдение и внимательность.
Однако любой тренд проходит несколько ступеней развития. Первая - скептицизм, затем - восхищение, и, в конце концов, скука. Восхищение опаснее всего, потому что очень часто оно выходит из-под контроля. Восхищение способно извратить ценность тренда и превратить его в карикатуру. UX-тексты - как раз такой тренд, когда простоту ошибочно принимают за тупость. Когда четкость становится дерзостью, а убедительность превращается в снисходительность.
В дизайне по-прежнему есть место для креативного письма. Но не там, где продукт встречается со своим пользователем. Например, Nike и Boeing платят научным фантастам за предсказания будущего.
Разработчик продуктов, как должностной статус
UX-дизайн - достаточно широкое понятие. Он рассматривается как часть проектирования услуг, которое само по себе является междисциплинарным. Как следствие, отдельные дизайнеры и компании, занимающиеся дизайном, собирают обширные портфолио проектов, которые разнятся в пределах от простых утилит до сложных финансово-технологических платформ.
У разработчиков услуг может быть собственный стиль, который они могут применять к любому продукту. Это приносит им известность, и именно за это готовы платить компании-заказчики. Процесс похож на закупку деталей у уважаемого поставщика.
Однако большинство компаний являются производственными предприятиями, и они могут потребовать от разработчика более глубокого понимания. Таким компаниям нужен разработчик продукции, который был бы глубоко интегрирован в коллектив, и имел бы все доступные данные и все инструменты для влияния на систему в целом.
Разработчики продуктов имеют возможность сфокусироваться на специфике продукта, над которым они работают, и пренебрегать всем остальным. Они хорошо информированы о демографии потребителей, для которых они разрабатывают продукт, и опираются в своей работе на реальные данные, в противовес предположениям, с которыми вынуждено работать большинство проектировщиков услуг.
Однако же, переход к проектированию продуктов требует рвения и усердия. Когда мы рискуем прибиться к той или иной отрасли и посвятить себя тому или иному продукту, то делаем выбор, от которого не сможем отказаться. В таком случае, решение должно быть продуманным и обоснованным. Необходимо учитывать жизнеспособность отрасли и перспективы профессионального развития в ней.
Удача любит смелых, и в 2019 году появится еще больше преданных делу разработчиков, которые отважатся стать специалистами в своем деле, сузив широкий профиль навыков. Время покажет!
Оригинал статьи находится здесь: https://waytostart.ru/blog/trends-ux-ui-2019
