Юрий Ветров

Дизайн в 2020 году

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

Инструменты дизайна интерфейсов

Кажется, это самый лучший год для инструментов дизайна интерфейсов. Во-первых, большинство рабочих вопросов закрывается вполне современными и мощными продуктами. Во-вторых, люто схлестнулись Figma и Sketch, что двигает развитие вперёд мощными темпами — бьются две очень динамичные молодые компании, а не новичок и старая корпорация. Благодаря конкуренции наконец-то появляются основополагающие возможности, которых просили уже года четыре. Например, автоматическое изменение размера кнопки при изменении текста в ней.

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

Тёмная тема оформления

Одна из главных забот дизайнеров в этом году. Правда, читая аргументацию для тёмной темы, испытываешь дежавю. Ровно те же слова и схожесть решения были в Windows Phone (экономия батарейки в OLED-экранах, меньше устают глаза — 9 лет назад!). Photoshop перекрасился в тёмный в 2012 году. Главное, что хотя бы в таком виде это доехало до массового пользователя. Новую волну интереса породила прошлогодняя macOS Mojave с тёмной темой оформления.

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

Одна из проблем — это почтовые клиенты, где тело письма приходит в виде HTML и картинок (там может быть что угодно). В ближайшем будущем это коснётся и сайтов — Chrome и Firefox поддерживают тёмную тему на уровне браузера. Если сайт имеет её, она включится автоматом.

Гибкие телефоны и экраны в целом

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

Дизайн-системы: стандарт для токенов и живых гайдлайнов

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

В этом году Storybook взял курс на универсальный стандарт для живых гайдлайнов и дал уйму возможностей делать красиво. А ещё интегрировался с кучей инструментов. Есть вероятность, что скоро отдельную дизайнерскую витрину пилить не придётся. А это значит, что порог входа для создания дизайн-систем становится ещё ниже.

Ещё одна ключевая новость — появилась рабочая группа, которая хочет сделать токены стандартом W3C. Это просто пушка, ведь токены — самый простой способ начать технологическое решение для дизайн-системы. Ребята также хотят сделать его и для инструментов вроде InVision Design System Manager — тогда одна из главных проблем (нет связи между компонентами в коде и шаблонами в инструментах дизайна) станет чуть ближе к решению.

Токены в дизайн-системах

Трусость и перебор с ностальгией

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

1) Цвет 2020 года от Pantone — классический синий. Занятно, что в эпоху гипер-скоростных изменений участники этих изменений испугались и захотели покоя. Ок, бумер!

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

3) Ловушки для краски в шрифтах. Это интересный способ сделать отсылку к какой-то эпохе или выразить маньеризм бренда. Но когда этот технологический скеоморфизм используют передовые технологические компании типа Figma, у меня в голове что-то не складывается.

4) Tesla Cyber Truck. Synthwave / retrowave и другие отсылки к 80-м в кино, дизайне и других областях приятно греют ностальгические чувства. Но когда давно отыгранный промдизайн из того же периода объявляется прорывом, становится немного грустно. Кажется, что нас должны двигать вперёд новые проблемы, технологии и материалы, а не фильмы 40-летней давности.

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

Большой спрос на дизайн-менеджеров

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

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

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

Разница между трендами, жанрами и стандартами

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

Сравнительно новая болезнь — попытка объявить метод дизайна новым. Хотя это просто в жизни автора он стал важен только сейчас, а на деле существует лет 10-20. Тексты в интерфейсах — самый яркий из примеров.

Формат ежегодных обзоров трендов работает плохо — отрасль меняется медленнее. Поэтому я выделяю три типа трендов:

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

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

Визуальные
Свежие приёмы визуального выражения. Это добавляет эстетики утилитарным решениям и позволяет дифференцировать бренды. Они постоянно ремикшируются, а многие — цикличны, сменяя друг друга раз в несколько лет (например, минимализм и декоративность).

Самое интересное — наблюдать, как эти тренды друг на друга влияют. Например, постоянное увеличение телефонных экранов мешает дотянуться пальцем до верхней части, не разбив телефон об асфальт. Поэтому мобильные ОС стараются перенести управление вниз (как прошлогодний Android или оболочка Samsung One) и переводят часть действий в жесты (где точность попадания в элемент интерфейса уже не так важна).

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

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

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

Так что для действующих профессионалов ежегодные обзоры трендов полезны только в этом контексте — разделение на просто популярные практики (как та же избитая анимация или крупная типографика, изометрическая иллюстрация), набирающие обороты (кинетическая типографика, перламутровые и голографические цвета, 3D-персонажи в иллюстрации, голосовые интерфейсы и умные колонки, Jobs to Be Done) и выходящие из моды (чат-боты, метод персонажей, Мемфис). Это помогает понимать, в какие направления нужно вписываться, а где поезд уже ушёл.

Я вижу их скорее как диаграмму в духе Geoffrey Moore (картинка на момент презентации для Design Prosmotr в апреле.)

Стараюсь рассматривать всё новое через эту призму и вам советую.

Бонус: Обзоры трендов от других авторов

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

Fjord Trends 2020

Прогнозы на стыке дизайна, технологий, экономики и общества в целом.

2020 Design Trends

Традиционный обзор трендов от Milo. Скорее перечисление того, что всё ещё хорошо работает, чем открытие чего-то нового, зато самое подробное.

9 creative app design trends for 2020

Неплохой обзор актуальных приёмов в дизайне мобильных приложений от 99 Designs.

Runway Palette by Cyril Diagne, Google Arts & Culture Lab, The Business of Fashion

Анализ цветов, использовавшихся в показах модной одежды. Отличный способ отслеживать цветовые тренды шире, чем Dribbble и Behance — к каждому цвету идёт мудборд.

Visualizing Every Pantone Color of the Year

Все цвета года от Pantone за последние 20 лет с ключевым визуалом к каждому.

Color Trends 2020 — See the Spectrum

Цветовые тренды от Shutterstock.

Depositphotos Visual Trends Guide 2020

Тренды в фотографии и видео от Depositphotos.

The 78 Best Book Covers of 2019

Обзор лучшего дизайна обложек книг за 2019 год.

5 Type Trends for Brands 2020

Monotype собрали обзор шрифтовых трендов в брендинге на 2020 год. Помимо стандартных вещей вроде вариативности и геометрических гротесков говорят о постоянном ребрендинге.

Looking Forward to 2020, Here are 10 Themes for News

Прогноз трендов потребления новостей от команды New York Times.

2019 End-of-Year Thoughts Archives

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

Gartner Identifies the Top 10 Strategic Technology Trends for 2020

Прогноз 10 главных технологических трендов 2020 года от Gartner.

Для сравнения: что обещали на 2019 и 2018 год.

Поделиться
facebook
vk
twitter

Раз в неделю мы присылаем письмо с подборкой новых выпусков Точки зрения