{"id":13466,"url":"\/distributions\/13466\/click?bit=1&hash=891d339b00b86120568ea8e4296ded112a42876a976e2fd335004400f35cbd30","title":"\u0427\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u044f\u0442, \u0447\u0438\u0442\u0430\u044e\u0442 \u0438 \u043a\u0443\u0434\u0430 \u0445\u043e\u0434\u044f\u0442 \u0432\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"24bb823c-c595-5fc8-be0f-fba9e89237c2","isPaidAndBannersEnabled":false}
Дизайн
DD Planet

Автоматизируй это! Как дизайнеру меньше работать и больше творить

Рассказывает арт-директор digital-интегратора DD Planet Александр Обанин.

Работа художника Manolo ide

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

В этой статье объясню, как сейчас мы в DD Planet используем новые технологии в работе, чем это выгодно для самой компании и для наших клиентов.

Что такое генеративный дизайн

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

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

Есть два подхода к разработке инструментов автоматизации:

  1. Дизайнер разрабатывает алгоритм, который генерирует изображение. Результат может быть предсказуемый и одинаковый, или можно вводить случайные отклонения.
  2. Противоположный — дизайнер показывает компьютеру необходимый результат с высокой степенью вариативности, а машина обучается его достигать. Так работают машинное обучение и нейросети.

Зачем автоматизировать дизайн

Работа дизайнера состоит из двух частей: создание нового — сам процесс придумывания нового решения — и тиражирование решения на разные носители.

В процессе выполнения этих задач у дизайнера часто возникают две «боли»:

  1. Огромный масштаб. Больнее всего становится, когда нужно оформить страницы всех школ города или сделать страницы всех институтов Российской академии наук.
  2. Творческий ступор. Когда придумываешь что-то новое, сложно перебирать варианты вручную. Это отнимает много времени — генераторы могут перебирать эти варианты за тебя.

Автоматизация закрывает обе эти «боли». Алгоритмы позволяют сократить ручную работу до минимума, поставить на поток часть задач. Взамен дизайнер получает сэкономленное время и возможность сосредоточиться на создании концепций и идей.

Практика: реальные примеры

Я начал писать генераторы в качестве хобби. Это были не реальные проекты, а просто интересный способ провести досуг по вечерам. Писать скрипты я уже умел: после окончания школы я ходил на курсы для вебмастеров и изучал HTML, CSS и JS. Позже научился писать простенькие программы на Processing — открытом языке программирования, основанном на Java. Такие знания помогли освоить генеративный дизайн.

В DD Planet бывает достаточно много мелких типовых задач по дизайну, поэтому прежде всего мы создали генераторы картинок для социальных сетей, презентаций и визиток. Расскажу о каждой из программ подробнее.

Генераторы картинок для SMM

Первый генератор предназначен для корпоративных целей. В нем PR-отдел делает креативы для публикации вакансий, выступлений спикеров, анонсов мероприятий и статей в социальных сетях.

Второй — для редакции проекта «Выберу.ру» — крупного финансового маркетплейса для подбора банковских и страховых продуктов, собственного проекта DD Planet.

До этого все картинки для постов готовили дизайнеры. С точки зрения дизайна изображения несложные, но их нужно делать часто. Поэтому я решил освободить дизайнеров от рутины — создать шаблоны. Сотрудникам PR и «Выберу.ру» остается самостоятельно открыть нужный, поменять текст и вставить картинку.

Учить сотрудников пользоваться инструментами Figma или Sketch, в которых создаются шаблоны, не имеет смысла. Они могут случайно двигать слои, включать и выключать их по своему усмотрению, что убивает единообразие. Поэтому я решил написать генератор в виде HTML-странички.

Преимущества:

  • нужен только браузер;
  • легко отправить ссылку на генератор другому редактору;
  • интерфейс состоит из нескольких текстовых полей и селекторов.

Недостатки:

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

Генератор презентаций

Часто встречается задача — собрать вручную презентацию на тендер или для клиента. Мы использовали JavaScript-фреймворка PptxGenJS, который с помощью Json (в нем хранится информация о проектах в портфолио) собирает готовую Power Point презентацию.

Достаточно отфильтровать слайды с проектами из портфолио и переместить их в правую часть, после этого нажать кнопку «Сгенерировать». Готовую презентацию можно отредактировать, добавив смету и итоговую стоимость, или удалить лишние слайды.

Генератор визиток

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

Я выбрал две библиотеки:

  1. PDF Kit для PDF. Может работать в рамках NodeJs или просто в браузере, это и был подходящий вариант.
  2. EasyQRCodeJS для QR кодов.

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

Больше возможностей

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

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

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

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

Выводы

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

Мы можем делать не единичные работы, а автоматы, создающие множество работ. Это позволяет быть создателем или инженером, а не работать руками.

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

Интересное по теме

Работы художников с применением технологий генеративного дизайна:

  • Manolo ide — аргентинский художник, использует Processing.
  • Joshua Davis — художник из Нью-Йорка, приезжал в Россию на конференцию для дизайнеров Dribbble Meetup.
  • ines.alpha — художница из Парижа, создающая 3D-мейкап.
  • Николай Иронов — набор скриптов и нейросетей Студии Артемия Лебедева.

Инструменты:

  • Processing — библиотека для работы с изображениями на Java.
  • P5.js — JS-библиотека для креативного кодинга, вдохновленная Processing.
  • ML5.js — библиотека для машинного обучения: создание модели и последующее использование в JS.
  • TensorFlow — библиотека для машинного обучения в JS.

Онлайн-уроки:

0
5 комментариев
Where Areyou

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

Ответить
Развернуть ветку
Andy Ch

Тема интересная, хорошо бы обзорчик по интересным инструментам...

Ответить
Развернуть ветку
Тарас Мукин

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

Ответить
Развернуть ветку
Alexander Obanin

Есть разные решения которые так или иначе могут решать подобные задачи. Есть графические редакторы типа Canva и Adobe Spark — Спарк способен рандомизировать макеты цвета, шрифты.

Мне нужно было решение, которое будет максимально простым для редактора — чтобы он выбрал цветовую схему и вставил текст, поэтому я использовал библиотеку p5.js для генерации картинок. Сами интерфейсы собраны на бутстрапе стандартными контролами. Картинки, когда нужны берутся с Unsplash, переносы расставляются автоматически. В принципе получается, что все создано с помощью готовых библиотек и немного своего кода.

Библиотек в интернете очень много, есть для работы с PDF, PPT. В конце я поставил ссылки на некоторые из них

Ответить
Развернуть ветку
Eugene Galochkin

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

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

Ответить
Развернуть ветку
Читать все 5 комментариев
null