Генерация дизайна для генератора дизайна • Часть I
Изнанка дизайна для Recraft AI
Рекрафт — это мощный AI-редактор, где можно сгенерировать векторные иллюстрации, иконки, 3D и другие изображения. Мы начали над ним работу осенью 2022 года.
Первая и самая главная задача была определиться с принципиальной моделью интерфейса. Что это будет? Чат с машиной? Фигма на стероидах? Пустой канвас с минимумом контролов? На тот момент генерация изображений у других сервисов была придумана разработчиками для разработчиков. Пишешь promp, выставляешь seed и метод семплирования. Или в худшем случае, пишешь /imagine в дискорде и гуглишь нечитаемый промпт-инжиниринг типа trending on artstation | 19:9, great anatomy и т.д.
Поэтому ключевым отличием продукта должен был стать дружелюбный и простой интерфейс, где не будет всего этого программерского задротства.
Обычно, первое что приходит на ум, когда думаешь про интерфейс графического редактора — п-образный проём, который со всех сторон сдавливает рабочую область:
Пробуем забыть про все эти редакторы и подумать с нуля. Чтобы понять, что это вообще будет за интерфейс, я начал с быстрого прототипрования идей. Пробовал совершенно разные подходы, чтобы с одной стороны, представить насколько это будет удобно в регулярном использовании, и с другой — понять, какие будут особенности со стороны ML.
Первая очевидная мысль была сделать диалоговый интерфейс вообще без контролов. Чтобы текстом описывать картинки и давать указания. Типа, сгенери диван, посади кошку рядом с диваном, перекрась в синий и так далее.
А историю изменений визуализировать в колбаску, чтобы было видно, как меняется изображение:
На этом этапе визуальная часть была абсолютно не важна. Можно было бы проектировать простыми блок-схемами, но я люблю делать наоборот — аляповато и грубо.
Серые ваерфреймы вообще не вызывают никаких эмоций, а здесь волей–неволей начинаешь формировать визуальный язык хотя бы на уровне «нее, так точно не надо».
Ещё была идея превратить интерфейс в древовидную историю изменений, чтобы всегда была возможность вернуться назад к предыдущим результатам генерации:
Потом думал, как создание промпта можно сделать нагляднее. Например, собирать запрос из «кубиков», где поочерёдно от общего к частному создаётся изображение:
Были даже шальные мысли с нодовым интерфейсом, в котором можно верстать макеты с иллюстрациями:
И был заход на ввод запроса через синтаксис. Типа дизайнеры-инженеры, все дела:
Ну и конечно же попробовал интерфейс а-ля фигма-скетч с боковой панелью.
Всё это время мы формулировали, кто будет пользоваться рекрафтом. Поисследовали, собрали статистику и решили, что пока ориентируемся на три группы. Дизайнеры продукта, которым нужно быстро сгенерить графику. Иллюстраторы, кто мог бы с быстрым скетчем получить нужную картинку. бренд-дизайнеры, кому нужно генерить часто и много. А ещё держали в голове, что это могут быть вообще не дизайнеры, а менеджеры или маркетологи.
Остановились на нескольких ключевых идеях: промпт состоит из короткого текстового описания и визуальных контролов, есть лента с результатами генерации и в основе лежит канвас, на котором можно организовать пространство под любую задачу.
Собрал прототипы, чтобы можно было прокликать ключевые сценарии: генерацию, загрузку стайлрефа, редактирование вектора и т.д.
Даём концепции полежать и через некоторое время понимаем, что панельки занимают довольно много полезного места, рисовать скетчи в маленьком окошке неудобно, а на ленте истории слишком большой акцент. Пробую больше сфокусироваться на канвасе, а интерфейс построить вокруг него.
Ищу, как бы скомпоновать панель слоёв, историю, тулбар, меню и прочие элементы:
Теряется простота и изначальное желание максимально облегчить интерфейс. Параллельно понимаем, что слоёв вряд ли будет много, поэтому убираем акцент со списка элементов. Убираем всё лишнее и вместо того, чтобы разбрасывать по экрану, компонуем плотнее:
Проверяем на разных сценариях:
Останавливаемся на этом варианте, верстаем первую версию, подключаем бэк, векторизацию и запускаем MVP для тестирования.
Продолжение следует…
Меня зовут Ваня Оленкевич, я дизайнер и арт-директор. Отвечаю за продукт и дизайн в Рекрафте. Ранее строил бренд и делал дизайн для умных устройств Яндекса, а потом Сбера. Давно вёл курс в БВШД, делал рекламу в ББДО и дизайнил в Студии Лебедева.
olenkevich.com • Ушной канал в телеграме