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

Генеративный дизайн (англ. Generative Design, далее GD), или порождающий дизайн, — подход к проектированию и дизайну цифрового или физического продукта, при котором человек делегирует часть процессов компьютерным технологиям и платформам.

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

Midjorney — «убийца» дизайнеров (или не совсем)

Летом 2022 года стала публично доступна первая версия нейросети Midjorney, позволяющая генерировать изображения на основе текстового запроса. Тогда это событие наделало много шума, причём не только среди дизайнеров. Постепенно стали появляться похожие нейросети от других компаний: DALL-E, Stable Diffusion, Kandinsky.

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

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

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

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

Adobe подсуетились

Недавно вышел Generative Fill (Генеративная заливка) от Adobe Photoshop (хоть где-то «гигант» не опоздал и подсуетился вовремя).

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

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

Безусловно, ИИ и GD применимы и к интерфейсам. НО здесь есть несколько сложностей:

1. Нейросети типа Midjorney совсем не подходят для генерации сложных интерфейсов. К тому же нам нужен, как минимум, вектор, а не растр, и в идеале — результат сразу в редакторе.

2. Как представить визуальный интерфейс при помощи языковой модели ChatGPT, которая понимает только текст?

3. Как научить текстовую модель мыслить визуальным языком?

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

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

ИИ и GD в интерфейсах. На сцену выходит Figma

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

С тех пор изменилось многое, и порой кажется, что компания двигается куда-то не туда, игнорируя важные запросы своих пользователей. С распространением дизайн-систем и погружением в Figma я всё чаще стал следить за компанией на их YouTube-канале. Ребята стали проводить ежегодные конференции с презентацией новой функциональности и планами на будущее. Команда уже решает важную задачу: перенос ИИ на свою платформу. На последней конференции Figma сообщила, что купила компанию Diagram. Она с 2021 года создавала продукт, который позволил бы интегрировать ИИ в графические редакторы. Уже сейчас некоторые инструменты Diagram доступны в качестве плагина в Figma. Некоторые его возможности:

• Умное переименование слоёв с учётом контекста. Просто выделяете слой, и все остальные слои типа Frame_44 переименовываются так, как будто это делал человек, работает не идеально, но довольно неплохо

• Генерация картинок: аналог Midjorney.

• Генерация векторных иконок: работает пока довольно криво.

А теперь самое интересное — тот самый генеративный дизайн

В ближайшем будущем Figma планирует интегрировать в свой редактор функцию генеративного дизайна на основе текстового запроса. Это будет некий помощник по дизайну под названием «Genius».

Это довольно сложная задача. Сейчас Figma вместе с командой Diagram ищет концепцию, как это могло бы выглядеть и работать. Обнаружилось, что ChatGPT на удивление хорошо генерирует статические сайты при помощи HTML и CSS именно потому, что всё это состоит из текста. Таким образом, можно научить модель понимать мир визуального языка.

Ребята перепробовали много концепций, вот часть из них:

1. Genius Auto. ИИ будет предлагать на основе уже существующего интерфейса его завершение. Например, к фотографии карточки с описанием добавит кнопку «Заказать».

2. Magic elements — «магический» блок, который вы можете разместить в любом месте внутри фрейма или autolayout, и с помощью подсказки превратить во что угодно.

3. Genius в виде курсора-подсказки в рабочей области файла Figma.

К чему пришли

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

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

Видео с примером работы Genius:

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

Видео с презентации, на которой создатели Diagram рассказывают о своём продукте:

FigJam AI

Также Figma представила ИИ-помощника для своего инструмента совместных досок FigJam (аналог Miro). Теперь при работе с проектами инструмент позволяет генерировать по запросу все необходимые материалы, сокращая проектирование.

Так что же нас ждёт?

Теперь давайте посмотрим, каким образом ИИ может проявить себя в будущем.

Генерация интерфейса для поиска вдохновения и стиля. Так же, как это работает в нейросетях и текстовых моделях.

Автоматическое создание дизайн-систем со всеми компонентами и вариантами. Сейчас создание дизайн-системы отнимает много времени. Что если ИИ сможет взять эту рутинную работу на себя для ускорения и масштабирования нашей работы?

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

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

Автоматизация рутинных задач. Например, автоматическое создание цепочки интерактивных прототипов, умное переименование слоёв, написание спецификаций и руководств к макетам для разработчиков, подбор цветовой палитры.

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

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

Ещё несколько интересных инструментов с ИИ

Framer AI — не так давно компания представила своего ИИ-помощника внутри сборщика сайтов. По запросу инструмент может полностью сгенерировать сайт под все основные разрешения.

Galileo — генеративный искусственный интеллект для проектирования пользовательского интерфейса. На платформе уже доступна генерация и примеры.

Вместо заключения

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

Полезные инструменты с ИИ:

• Magican — плагин для генерации векторных иконок и картинок по текстовому запросу, автогенерация названий слоёв.

• Automator — плагин для автоматизации работы в Figma.

• Prototyper — прототипирование с помощью кода.

• UI AI — сайт компании Diagram, где собраны все их инструменты.

• Framer AI — генерация сайтов при помощи ИИ.

• Genius — пока недоступно, можно записаться в лист ожидания (нужно залогиниться на сайте).

• Galileo — генерация дизайна интерфейсов по текстовому запросу.