Код — материал дизайна

Размышления дизайнера об итогах Config и о том, почему основы UX важны как никогда

Курсор, заполненный кодом, указывает на векторный узел на сетке — код и дизайн сливаются на зелёно-синем фоне.

Katie Jacquez — старший UX-дизайнер, работает над следующим поколением инструментов для продавцов и клиентского опыта в Google Store. Здесь она делится взглядом на то, как ИИ ускоряет дизайн-процесс и почему по-прежнему важны фундаментальная мыслительная работа и мастерство.

На Config (ежегодной дизайн-конференции Figma) в этом году зал гудел от блестящих новых фич. Figma Motion делает анимацию проще, чем когда-либо, а shaders дают беспрецедентный контроль над сложными размытиями, градиентами и эффектами. Но настоящей новостью конференции была не конкретная фича. Это была смена парадигмы: код — материал дизайна.

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

То, что раньше казалось закрытой зоной, теперь доступно — если можете это представить, можете это собрать. Нужен кастомный плагин для Figma? Сделайте сами через Generative Plugins. Хотите создавать искусство кодом? Я смотрела, как автор вживую писал код музыки и визуала на сцене перед 10 000 человек. На фоне нескольких докладов, которые схлопывали дистанцию между математическими понятиями вроде кривых Безье и дизайном, нетрудно представить мир, где многие дизайнеры становятся дизайн-инженерами.

Докладчик стоит на тёмной сцене перед большим экраном презентации. В верхней части экрана — математические уравнения бесконечных разложений в ряд Тейлора, набранные аккуратным текстом с цветовой кодировкой.
Сессия Grant Sanderson, Designing Math, была одной из многих на стыке математики и дизайна. Источник: Designing Math
Широкий кадр большой приглушённо освещённой сцены. Два исполнителя стоят за белой фактурной стойкой, работают за ноутбуком и с музыкальным оборудованием. Над ними и позади — огромный экран со сложными светящимися синими фрактальными паттернами, поверх которых идут строки кода.
Смотря, как Switch Angel вживую пишет код музыки и визуала на сцене перед 10 000 человек, я задумалась: «а могла бы я тоже?» Источник: Patterns for restraining the world

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

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

Диаграмма Double Diamond продуктового дизайна под названием "DESIGN X CODE AFTER AI." Она раскладывает разные ИИ-инструменты дизайна, синтеза и вайб-кодинга (в том числе Gemini, NotebookLM, Figma и генераторы прототипов) по фазам Discover, Define, Develop и Deliver и показывает, что код теперь встроен во весь творческий процесс, а не только в финальный хэндофф.
Раньше код был статичной точкой назначения в конце одностороннего хэндоффа. С ИИ-интегрированным процессом границы между Figma и кодом размываются на этапах исследования, идеации и поставки.

Опасность слишком раннего «доведения до идеала»

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

В недавнем проекте внутреннего инструмента для Google Store я использовала ИИ, чтобы сгенерировать ранний прототип — именно то, что нам было нужно, чтобы согласовать основной сценарий работы, набросать PRD (продуктовые требования) и сформировать продуктовую стратегию.

Вайб-кодинг высокодетализированных прототипов в том случае помог, но такой подход может создать ложное ощущение безопасности. Раз концепции выглядят и кажутся готовыми, команды могут слишком рано зафиксировать конкретное направление. Как отметила дизайнерка Catt Small на своей сессии Config: «Скорость без направления заведёт вас в тупик.»

В нашем случае высокодетализированная концепция, которую я сделала, успешно помогла нам согласовать первую версию. Но по мере развития проекта добавлялись дополнитльные сценарии: более ветвистый процесс согласования с несколькими состояниями, который мы не могли предусмотреть на первом этапе. Ранний прототип хорошо сработал на первой фазе, но попытки решать новые задачи через высокодетализированные прототипы только тормозили работу. Разговор снова и снова утягивало в мелочи вроде текстов, а не в базовую архитектуру. До ИИ дизайнеры могли застрять, слишком рано полируя статичные мокапы в Figma; сегодня риск — застрять в «вайб-кодинге» отполированного интерактивного прототипа, пока фундаментальные вопросы ещё не решены.

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

Низкодетализированная блочная модель и схема системы. Слева логика "Values" разветвляется в центре на "standard placements" и "merchandising placements", а затем дальше на шесть разных цветных точек размещения справа.
Убрав высокодетализированный UI, мы смогли нанести на карту базовую логику системы: простая низкодетализированная блочная диаграмма показывает, как Values ветвятся на standard vs. merchandising placements.

Почему мыслительная работа по-прежнему важна

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

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

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

ИИ может дать вам кирпичи и уложить их со скоростью молнии. Но он всё равно не знает, зачем вы строите дом. Именно здесь осязаемый, намеренный процесс создания становится нашим главным активом. Психологи называют это воплощённым познанием — идеей, что мозг не только говорит рукам, что делать, но и руки активно помогают мозгу думать. Когда вы набрасываете концепцию от руки (или на канвасе), вы вынуждены глубоко продумать задачу. Как говорила Anni Albers, одна из важнейших художниц по текстилю и дизайнеров XX века: «Мы должны снова спуститься на землю с облаков наших теорий и спекуляций и коснуться материала, из которого сделаны вещи… мы учимся руками.» Если код теперь материал дизайна, как нам «коснуться» его и думать руками, прежде чем бросаться в следующий прототип?

Роли дизайнеров в будущем ИИ

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

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

Перевод статьи "Code is a Design Material" @Katie Jacquez.

Комментарии