Генеративный дизайн — возможность для любого стать арт-директором для своего продукта, переложив рутину на машину. В рамках цикла переводов о том, как нейросети применяются в дизайне, публикуем статью Джона Голда — дизайнера и инженера в Airbnb, ранее работавшего над проектом алгоритмической типографики для стартапа Grid.
История этого незапущенного проекта натолкнула на интересные мысли нашу команду при разработке uKit AI.
Школа дизайна для роботов (перевод)
На дворе май 2016-го года и я выкладываю в сеть всё, что накопилось у меня в голове. Отчасти потому, что это интересная тема для обсуждения, отчасти в качестве заметок для себя на будущее и главным образом для того, чтобы больше людей задумались над этими вопросами. Около года назад я начал работать над совмещением типографики и искусственного интеллекта.
Предыстория
На протяжении всей моей дизайнерской карьеры я увлекался чистой математикой в системах проектирования. Я всегда был большим поклонником швейцарского дизайна. Пожалуй, мой самый любимый представитель — Карл Герстнер с его работой по программному дизайну. В 2011-м я впервые попробовал свои силы в систематизированных алгоритмах вёрстки в Prismatic (покойся с миром). Затем, увлечённый статьёй от 2014-го года об алгоритмах вёрстки в Flipboard, я решился изменить курс дизайнерской карьеры, вступить на путь абстракций и поработать с системами и инструментами ((мета-)мета-)метапроектирования, чтобы дать дизайнерам возможность мыслить более значительными категориями.
Перенесёмся в весну 2015-го. Я начал работать в The Grid — стартапе, позволяющем строить сайты при помощи искусственного интеллекта (ИИ). Для понимания, продукт был в определённой степени сродни Squarespace или Wix [и uKit — прим. пер.] — он позволял далёким от дизайна людям быстро создавать красивые сайты. Особенность заключалась в том, что вместо шаблонов и тем, сложные дизайн-алгоритмы работали с содержанием и создавали для пользователя персонализированный сайт. Круто. Как раз в одном из тех мест, где можно исследовать системы проектирования, креативный и генеральный директора поручили мне «улучшить» систему типографики.
Задача не ограничивала меня по срокам и привела к самым интересным исследованиям и размышлениям в моей карьере. Насколько я знаю, соглашение о неразглашении всё ещё не позволяет мне делиться ранее существовавшими наработками по системе типографики, но, если в общих чертах, она носила человеческий характер. Ориентируясь на это, себе я поставил задачу следующим образом: «Создать систему, которая сможет понимать, выбирать и применять типографику так тонко, как это бы сделал человек — профессиональный дизайнер». Пара пустяков.
Определения
Порой, когда я говорю о работе над типографикой при помощи искусственного интеллекта, люди предполагают, что я проектирую новые генеративные шрифты. Это интереснейшая область и, может быть, в конечном счёте я попробую себя в ней, но причина этих предположений кроется в ошибочной терминологии. Пока мы не начали и вы не разочаровались в моём эссе, я внесу ясность:
Типографика (typography): использование шрифтов;
Разработка шрифтов (type design): создание новых шрифтов.
Спасибо Стивену Коулзу за лаконичное определение. Если вам интересно использование нейросетей при разработке шрифтов, у Эрика Берна есть замечательный проект Deep Fonts, предлагающий приблизительную оценку и визуальный анализ 50 000 шрифтов. С терминологией разобрались, теперь перейдём к типографике при помощи ИИ — это когда компьютеры используют шрифты при проектировании.
Разработка системы искусственного интеллекта, которая сможет воссоздать фундаментальную дисциплину сложной профессии, оказалась непростой задачей. Для начала, мне нужно было изучить ИИ и все входящие туда дисциплины: без отрыва от работы и начиная с базовых принципов (у меня нет багажа знаний по информатике и я был единственным дизайнером-инженером на проекте — у нас была небольшая команда). Тогда я ходил на ежедневные вечерние прогулки по району Пасифик-Хайтс, чтобы отдохнуть от монитора, наблюдать за закатом и размышлять о грандиозности задачи. Во время одной из таких прогулок я вспомнил высказывание Алана Тьюринга.
«Почему бы нам, вместо того, чтобы пытаться создать программу, имитирующую ум взрослого, не попытаться создать программу, которая бы имитировала ум ребёнка? Ведь если ум ребёнка получает соответствующее воспитание, он становится умом взрослого человека», — Алан Тьюринг («Вычислительные машины и разум», 1950)
Что если вместо того, чтобы рассматривать дизайн как единое целое, посмотреть на него как на набор образовательных моделей, на которых основывается обучение дизайнера?
Я думаю, что за прошедшие 65 лет эта методология была по большей части признана пуристами ИИ ошибочной, но в качестве наивной отправной точки она казалась достаточно приемлемой.
18-летние юнцы с похмелья на занятии
Каждый раз, когда я рассказываю об алгоритмическом дизайне, обычно критикуют то, что такая утончённая дисциплина не подходит для алгоритмического воссоздания, что творчество не может сводиться к набору правил (как же! Типографика больше всего подчинена правилам из всех направлений искусства). Предполагаю, что критики не берут во внимание, как построено преподавание в школах дизайна — учебная программа загружается на информационный носитель с потерями — в головы 18-летних юнцов с похмелья. Многие из нас когда-то были ими. Поразительно, но на первом курсе мы не только веселились, но ещё и изучали дизайн. Будем надеяться, что с появлением более внимательных вычислительных платформ, мы ещё больше улучшим результаты.
Несомненно, дизайну можно научить, и у меня разработана 4-ступенчатая программа для преподавания машинам. Программа описана ниже применительно к типографике, но она также может использоваться по отношению к вёрстке, цвету и любому другому разделу графического дизайна.
Я комбинировал псевдокод и иллюстрации, приношу извинения, если я переусердствовал с технической стороной вопроса, или наоборот.
Часть 1: Учимся видеть
Загвоздка дизайна заключается в том, что не нужно быть дизайнером, чтобы ощутить его. На Западе у нас уже сотни лет существует коллективная визуальная культура — мы чувствуем, какой посыл несут вещи априори, даже если мы и не совсем можем классифицировать их.
Цель графического дизайна — пробудить чувство в целевой аудитории. При случае — чувства дизайнеров, но чаще — «широкой публики». Той самой, которая не разбирается в чёрной магии цветов, фигур и банальных спорах о кернинге. И всё же при помощи дизайна получается завязать с ними разговор. Если бы люди далёкие от дизайна не понимали семиотические намёки, исходящие от дизайнерских примитивов, мы бы остались без работы. Непрофессионалы получают эмоциональный заряд от дизайна, хотя и не совсем понимают причину.
Компьютеры, с другой стороны, совсем не понимают дизайн. Для компьютера шрифты — это набор файлов .otf и строка кода, назначающая им имя. Для компьютера цвета — это набор значений HEX, RGB или HSL. По умолчанию компьютеры проигрывают даже людям, не разбирающимся в дизайне.
То, что для компьютеров является неприметным кодом — ничем не выдающимися структурами данных — для людей мощные, побуждающие на эмоции формы коммуникации. Человек не может проектировать только с помощью названий шрифтов. Нам необходимо их видеть и знать. Компьютеры должны следовать по тому же пути. Для этого нам нужно отправить алгоритмы в школу дизайна.
Школа дизайна устанавливает соответствие между эмоциональным и рациональным — мы узнаём, почему элементы создают эмоциональные реакции у нас в голове и как использовать эти мотивы, чтобы вызвать эмоции у других. Мы изучаем профессиональный жаргон, учимся отличать Grotesque от Humanist, Didone от Transitional, Fraktur от Rotunda. Мы учимся узнавать шрифт по его метаатрибутам: высоте строчных букв (x-height), контрасту (contrast), ширине (width), верхним выносным элементам (ascenders), внутрибуквенным просветам (counters) и многим другим.
«Цель абстракции — не напустить тумана, а создать новый семантический уровень, на котором она будет абсолютно точна», — Эдсгер Дейкстра (Смиренный программист, 1972)
Эта новая, точная терминология даёт нам основание изучать и применять правила и системы в нашей работе. Мы можем задавать шрифт с помощью высоты строчных букв (x-height) или контраста (contrast), или любого другого атрибута, который нам нужен. Мы определяем шрифты по их специфике, а не основываясь на голом суждении «мне, кажется, это нравится».
Поэтому наша задача — дать компьютерам ту же терминологию для классификации и выбора шрифта.
На первый взгляд мы бы могли прокомментировать каждый шрифт вручную, создав табличку с предположительными значениями компонентов их анатомии. Но отсюда вытекают две проблемы:
- Нужно много времени, а я безнадёжно ленив.
- Неизящное решение, не будет масштабироваться — система не сможет расти без человеческого вмешательства «руками». Это может сработать, но пропадает весь интерес при таком раскладе.
Первого аргумента для меня было более чем достаточно, чтобы решить никогда не браться за что-либо, где машины не могут прийти на помощь. Для вас, возможно, сработал второй пункт. Итак, как нам классифицировать шрифты алгоритмически?
Растровый подход
Моей первой реакцией было посмотреть на шрифты. Возможно, как-то привлечь компьютерное зрение и классификацию. Я подумал, что если я пойму, как выстроить отдельные символы, то смогу разбить их на отдельные части и проанализировать их внешний вид. Я сильно отклонился от курса, передвигая пиксели, рисуя шрифты и оценивая результаты — они выходили размытые, со сглаженными «зубцами» серого, технического цвета.
Данная исходная точка была логичной, но не самой эффективной. Мне нужно было что-то, что я бы мог запускать быстро и в повторяющемся режиме, я выбрал PhantomJS и холст HTML5. Отрисовка шрифтов на холсте оставляла желать лучшего. Мои попытки сделать что-нибудь визуально сложное в PhantomJS также провалились. Прошло 9 месяцев и я вытеснил из сознания большую часть тех неудачных попыток, но я подумал, что всё же напишу об этом, так как это привело меня к...
Векторам!
Был разгар беспощадного берлинского лета, и, в миллионный раз проклиная PhantomJS и растровую графику, я решил начать заново. Я работал попиксельно, потому что рассматривал задачу в визуальной плоскости, ведь компьютерное зрение связано с пикселями. Должен же быть другой способ!
Шрифты — это векторы, значительно упрощающие вычисления. Это просто геометрия. Я начал писать маленькую библиотеку, чтобы парсить шрифтовые файлы и превращать их в SVG, но быстро нашёл решение получше. Opentype.js — это парсер для файлов OpenType и TrueType, который позволяет осуществлять доступ ко всем частям буквы в векторном виде наряду со встроенными данными OpenType в node.js и браузере. Превосходно!
На руках у меня был верный способ, чтобы разобраться со шрифтами, и я перешёл к созданию алгоритмов по классификации свойств. Вот несколько примеров:
х-height — высота строчной «х», с этого легко начать! Чтобы получить значение, нормируемое для всех шрифтов (которые могут быть нарисованы в несовместимых размерах), мы можем записать его как процент от заглавной «A». Получаем значения от ~0.45 до 0.8, что похоже на правду.
(defn x-height [font] (/ (char-height font :x) (char-height font :A)))
Определённые буквы наглядно демонстрируют контраст шрифта. В особенности наложение «O», «o» или «A» хорошо даёт понять, как различаются шрифты. Контраст можно выразить следующим образом:
(defn contrast [font] (/ (char-area font :O) (char-bounding-box font :O)))
Рассматривая буквы, которые больше всего изменялись при настройке ширины шрифта, я выделил «M» и «N». За ними и ещё некоторыми другими было увлекательно наблюдать. Мы не можем просто измерить их ширину (так как шрифты рисуют в различных размерах), поэтому я взял среднее значение соотношения их высоты и ширины. Круто.
(defn width-ratio [font]
(mean [(/ (char-width font :M) (char-height font :M))
(/ (char-width font :N) (char-height font :N))]))
А затем родилась занятная идея. Я рассматривал похожие шрифты у себя в редакторе и обратил внимание на следующие: Gotham, Proxima Nova и Avenir, Tiempos Headline, Leitura Display, San Francisco, Aktiv Grotesk и Helvetica или Aperçu, Patron и Maison Neue.
Проверенное временем правило при подборе шрифтовой пары — создавать достаточно контрастные сочетания. Пара Gotham-Proxima Nova будет исключительно редкой, а вот комбинация Gotham с интересным шрифтом с засечками будет более любопытной.
У вас также может возникнуть желание использовать шрифты со схожими атрибутами. Возможно вы захотите создать пару, в которой шрифты будут иметь одно похожее свойство, например, высоту строчной буквы (x-height), но отличаться по всем остальным параметрам.
Я создал показатель подобия, который выражает евклидово расстояние между произвольными группами свойств. По умолчанию он показывает расстояние между каждым из свойств шрифта, но также может применяться, чтобы показать разницу между шрифтами, учитывая только, скажем, высоту строчных букв и контраст.
После создания ряда подобных алгоритмов, я запустил их на демонстрационных данных, задал диапазон от 0 до 1 и оформил результаты в виде графика.
Я бы назвал это успехом! В классификации по подобию Proxima Nova и Gotham действительно оказались рядом, в то время как Didot в самом конце списка. Я предполагал такой результат, но было здорово увидеть, что код сам в этом разобрался.
Безусловно, сложно назвать набор данных, состоящий из 9 элементов, большим достижением, поэтому я пошёл дальше и обработал всё хранилище Google Fonts.
И снова, результаты подтверждали мои надежды о том, как сработает код. Сравнивая образцы шрифтов с их показателями, мы видим, что цифры не врут — невероятно!
<table> не является шрифтовой системой, поэтому я перешёл к первой ступени в теории школы дизайна — к правилам.
Часть 2: системы, основанные на правилах
Так или иначе, дизайн — это набор правил. Существуют простые, явные правила. Длина строки должна составлять около 66 символов. Цвет текста должен быть достаточно контрастным, чтобы обеспечить хорошую читабельность. В параграфах нужно избавляться от «висячих» строк и коридоров. При использовании нескольких размеров шрифтов, нужно учитывать, чтобы разница между ними была видна, когда они находятся рядом. Это явные правила, те, о которых легко можно писать книги.
Наряду с ними существуют неявные правила. Неявные правила — это копилка дизайнерского опыта. Каждый проект, над которым вы работали; каждая мелочь, которая вам удалась, или, наоборот, провалилась; каждая находка, которой вы пополнили свою коллекцию. Каждое решение, которое не совсем сработало, когда это было необходимо, но вы нашли ему отличное применение позднее.
Даже те, кто высмеивает модернистов и строит карьеру, ломая правила, имеют свои принципы. Втайне. У Дэвида Карсона свои правила, также как и у Невилла Броуди. Они могут быть неканоничными и не зафиксированными в письменной форме, но у каждого из нас при себе имеется система правил. Фреймворки, с которыми мы садимся за проектирование; набор функций, которые превращают задачу в рабочий продукт. Они могут быть незаметными с первого взгляда, но мы можем копнуть поглубже и извлечь их на свет.
Работая над системами, основанными на правилах, я сделал дизайнеро-ориентированное API для создания правил. Меня вдохновили библиотеки логического программирования, такие как core.logic и miniKanren, и я стремился к системе, которая бы являлась декларативной и композиционной.
Если это кажется слишком абстрактным, вот несколько примеров инструментов проверки на основе логического условия, которые мы используем каждый день:
Было круто — шрифты понимались на более высоком уровне. Мы могли указать метаправила, например, «покажи мне шрифты с такими-то свойствами», вместо того, чтобы просто просить вывести шрифты с определёнными именами. «Учитывая, что такой вид шрифта используется как заголовок, для тела текста подберём ему в пару шрифты с такими видами свойств». «Если такой шрифт появляется на странице, никогда не комбинируйте его с таким шрифтом». Я думаю, что практическая реализация правил вызывает меньший интерес, нежели теория (потому что правила можно менять). Основная идея — работать со шрифтами на более высоком уровне, а не только перебирать их по именам.
План был таков — дать дизайнерам интерфейс, чтобы они могли создавать и менять правила, которые отдаются системе, но вскоре я осознал, что существенной части образовательной программы не хватало…
Часть 3: Макронаблюдение
Создание этих правил требовало всё больше ручного труда и я стремился найти решение, которое бы училось у индустрии, черпало практические знания оттуда и переводило их обратно в теорию. Это третья часть образовательной программы: макронаблюдение.
В студенчестве у нас были герои из профессиональной среды — исторические личности и современные. Растущие компетенции в сфере дизайна позволяют нам сопоставить их работы со своими и обозначить для себя вектор развития.
Моими самыми любимыми студиями в студенчестве были Experimental Jetset, Spin и Non-Format. Зимними дождливыми лондонскими вечерами я усердно изучал их работы, пытаясь понять, как они добились индивидуальной эстетики. Я вычислял, какие шрифты они используют, а потом изучал, почему они оказывают такое воздействие. Я смотрел, какие цвета они используют, и разбирался, из какой палитры они были взяты. Я никогда не задумывался о том, чтобы задействовать их работы в настоящих проектах, но эта форма наблюдения чрезвычайно ценна в образовательных целях.
Я смоделировал ту самую форму обучения, когда наблюдаешь, как и что дизайнеры используют в реальных проектах. Некоторые из моих любимых сайтов для вдохновения специализировались на типографике и классифицировали работы по используемым шрифтам, таким образом формируя богатую базу данных из паттернов и задействованных техник. Я мог бы ничего не автоматизировать, но было намного интереснее написать парсер для сбора этих данных. В любом случае, несколько строк кода, парочка HTTP-запросов — и я был счастливым обладателем большой базы данных с реальными примерами использования шрифтов.
Самым логичным способом для визуализации было создание графа с вершинами, отображающими взаимосвязи между шрифтами согласно их применению. Достаточно непривычно воспринимать информацию в такой форме, но данные обширны и увлекательны.
Однако, у графа такая же проблема, как и у FontBook. Хотя взаимосвязи и интересны, они строятся на названиях шрифтов. Если вы читали предыдущий раздел и думали: «Система ограничений задана людьми, где же будет применяться машинное обучение?» — то как раз здесь настаёт его время. Создавая систему, которая может анализировать произвольные шрифты и сортировать их, основываясь на их геометрических признаках, мы можем перевести взаимосвязь между названиями во взаимосвязь между широким спектром атрибутов.
Мы можем задать поиск, чтобы выявить распространённые шрифтовые пары, но в то же время мы можем путешествовать по графу, чтобы найти похожие и интересно сочетающиеся шрифты с далёкой степенью родства. Мы можем увидеть, что определённые группы шрифтов набирают популярность, но в то же время сделать вывод, что это обусловлено наличием у них определённых свойств. Граф сообщает нам, что популярно, геометрическая система сообщает, почему.
Не составляет большого труда просмотреть блоги о дизайне и понять, что Aperçu, Maison Neue, GT Walsheim и LL Circular популярны. Меня глубоко восхищает то, что система сама может различать эти паттерны. Система может разобраться, почему определённые шрифты становятся популярными, и использовать это знание типографики для предсказания трендов дизайна; предложить комбинации, которые люди могли не учесть, но которые имеют право на существование.
Часть 4: Микронаблюдение
В то время как комплексное наблюдение за профессиональной сферой позволяет нам понимать тренды на более высоком уровне, не менее важно следить за дизайнерами вблизи. За тем как они работают. Какие решения принимают. Какие пути пробуют, от каких отказываются и каких придерживаются. Как отвечают на поставленные вопросы и какими способностями к решению задач обладают.
Мы учимся этому в школе, во время стажировок и на первой работе. Завязываются отношения с другими дизайнерами, которые немного и намного старше нас. Мы в равной степени учимся у наших ровесников, равняемся на тех дизайнеров, которые на несколько лет взрослее, а также исследуем работы наших креативных директоров и преподавателей.
Будучи людьми, мы берём пример с других дизайнеров: отдельных личностей, маленьких групп и больших сообществ. В студийной среде зарождаются мемы, географически близкие группы дизайнеров делятся своими характерными идеями и отличиями со всем миром. Среди лондонских школ дизайна «стиль Рэйвенсборн» сильно выделялся по сравнению с подходами студентов из учебных заведений Кингстона, Челси, Лондонского Колледжа Коммуникаций и Центрального Колледжа Имени Святого Мартина. Но в то же время существовал единый «лондонский стиль». А также британский стиль и европейский стиль. Едем дальше, «йельский стиль» моментально узнаваем. Помимо школ есть группы по интересам. Они не находятся в одном физическом пространстве, но их объединяют общие представления — тренды среди дизайнеров и иллюстраторов, которые доступны на Dribbble, Behance и других площадках, где можно полюбоваться работами друг друга.
Самый верный способ перенять представления других дизайнеров — сойтись с ними и подглядеть за их артбордами и рабочим процессом. Самое замечательное — алгоритмы тоже могут этому научиться и в цифровой форме «заглядывать через плечо дизайнерам».
У меня есть несколько инструментов для исследования этого пути, наблюдения за тем, как работают дизайнеры (с разрешения). Замечательно то, что чем умнее алгоритмы, тем больше нужных нам данных мы можем анонимизировать и резюмировать, при этом сохраняя контекст. Так мы получаем на руки богатые и разнообразные данные для обучения и можем распознавать тренды среди дизайнеров. Используя внутренние инструменты дизайна в больших продуктовых компаниях и дизайн-студиях, мы, возможно, сможем построить модели характеристик их участников. Подробнее о скрещивании инструментов дизайна чуть позже.
Постскриптум
Я ушёл из The Grid в начале 2016-го. За несколько месяцев до того, как проект типографики поставили на паузу ввиду других потребностей компании. У меня так и не было возможности запустить его в продакшн. Я до сих пор сильно огорчён по этому поводу. #startuplife.
Конечно, оглядываясь назад, сразу видишь, что можно было бы сделать лучше, и это скажется на моих будущих работах. The Grid нацелен на систему дизайна, которая полностью убирает всю конкретику для конечного пользователя. После всех интеллектуальных изысканий вокруг системы типографики, мне нужно было представить её при помощи одного ползунка .
Друзья-дизайнеры, интересующиеся, как можно использовать систему, без сомнения, были бы разочарованы. Если не брать в расчёт работу, которую я проделал там, и оценить будущее искусственного интеллекта в сфере дизайна, я восхищён тем, насколько можно улучшить работу дизайнеров, если не замещать, а дополнить их алгоритмами.
«По оценке исследовательской группы, к 1980 году достижения в области искусственного интеллекта позволят машинам самостоятельно мыслить и решать задачи военного значения. У нас будет пять лет, чтобы разработать симбиоз компьютера и человека, и 15 лет, чтобы применить его. Будь то 15, 10 или 500 лет, но эти годы будут самыми творческими и интересными в истории человечества», — Джозеф Ликлайдер («Симбиоз человека и компьютера», 1960)
Грустно оценивать текущее состояние инструментов дизайна, после того, как мы заглянули в будущее. Наши программы совершенно не ориентированы на контекст и индустрию. Инструменты манипулируют строками кода, векторами и логическими условиями, но не дизайном. А ведь именно инструменты — двигатели перемен. Поэтому я занимаюсь инструментами для дизайна, которые интегрируют умные алгоритмы в процесс проектирования, инструменты, которые пытаются улучшить работу дизайнеров путём изучения того, чем они занимаются. Чем мы занимаемся. Инструменты, которые нарастят мощь дизайнеров, а не заместят их.
Дизайнер всегда должен задумываться над тем, как он использует инструменты. Оптимизация — это интересная возможность для алгоритмического дизайна и лично я не задаюсь целью сделать интернет визуально однородным, но такой подход определённо актуален для некоторых дисциплин дизайна. Однако, это не обязательно должно сводиться к ограниченному набору вариантов, существует много способов для выявления и использования этих данных. Наши инструменты могут приближать нас к трендам, или наоборот отдалять. Мы можем прямо сейчас порекомендовать популярный шрифт, но мы в то же время можем копнуть поглубже и достать сундучок с сокровищами для тех, кто не хочет быть в мейнстриме. Мы можем рекомендовать, давать советы и корректировать, основываясь на прочных принципах дизайна и нашего суммарного дизайнерского опыта. Всё это нам под силу.
Дизайн — это набор правил, которые мы изучаем.
В области дизайна Ликлайдер опередил своё время на несколько десятилетий. Macintosh, несомненно, дал нам возможность работать быстрее, но мы с 1984-го года застряли на том же семантическом уровне взаимодействия. Прошли десятилетия и, кажется, мы делаем прорыв в новую эру самых захватывающих и интеллектуально плодотворных лет в истории развития индустрии, апогея настоящего симбиоза человека и компьютера.
***
Перевод: Татьяна Жукова, менеджер по локализациям uKit Group
Редактура: Виктор Кадников, арт-директор uKit Group
Ваш комментарий