Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
АЛГОРИТМИЧЕСКИЙ ДИЗАЙН
ЭКЗО-СКЕЛЕТ ДЛЯ ДИЗАЙНЕРА
ЮРИЙ ВЕТРОВ
MAIL.RU GROUP
ДАВНИЙ ИНТЕРЕС
За 4 года скопилась пара десятков примеров и полдюжины
статей в привязке к дизайну цифровых продуктов, хотя...
РОБОТЫ ЗАМЕНЯТ ДИЗАЙНЕРОВ?
В 2016 году тема алгоритмов, нейронных сетей,
искусственного интеллекта и всего что с этим связ...
THE GRID CMS
Сама подбирает шаблоны, оформление контента, обрабатывает
фото. Делает A/B-тесты для выбора лучшего решения.
НА САМОМ ДЕЛЕ НЕТ?
Продукт уже пару лет в закрытой бете и судить о нём можно
было только по рекламным материалам и статьям...
ПОЛНАЯ ЗАМЕНА
ДИЗАЙНЕРА АЛГОРИТМОМ?
АГА, КОНЕЧНО…
Об этом говорил The Grid и некоторые технологи – звучит
красиво и соврем...
По ходу работы он принимает огромное количество решений,
причём многие из них невозможно описать чёткими
процедурами; кром...
ТВОРЧЕСКОЕ
ПАРТНЁРСТВО
Дизайнер в паре с алгоритмами решает
продуктовые задачи.
ЖОНГЛЁРЫ
Дизайнеры здорово научились
жонглировать кучей инструментов и
навыков, так что на смену классическим
приставкам н...
Это активные участники продуктовой команды, которые
понимают, как работают пользовательские исследования,
могут спроектиро...
ТЯЖЕЛОВАТО…
Правда, распыление навыков не позволяет посвятить
достаточно времени всем аспектам продуктовой работы.
Бум нов...
ПОСТРОЕНИЕ
ИНТЕРФЕЙСА
ПРОСТЫЕ
ИНСТРУМЕНТЫ ПАБЛИШИНГА
Medium, Readymag и Tilda уже сократили количество ручной
работы – в них полно добротных шаб...
WIX ADVANCED DESIGN INTELLIGENCE
Похожий на The Grid полу-автоматизированный
способ создания сайтов для непрофессионалов.
Они обучают алгоритм, скармливая ему множество примеров
хороших современных сайтов. Кроме того, он старается
учитывать тем...
FIREDROP
Идея похожа на The Grid. Вбиваете контент, а дальше виртуальный
помощник помогает выбрать лейаут и визуальный сти...
ПАРНЫЙ ДИЗАЙН
С КОМПЬЮТЕРОМ
Конечно, как и в случае с The Grid, полный отказ от дизайнера
приведёт к штампованным и не все...
Например, дизайнер собирает мудборд на Dribbble или
Pinterest, а алгоритм быстро примеряет эти стили на макет, а
дальше по...
ОСВОБОДИТЬСЯ ОТ РУТИНЫ
Да, таким путём не создать революционный продукт. Но
можно освободить себе время для этого. Да и на...
ДИЗАЙН-СИСТЕМЫ 3.0
Если компания зрелая и имеет дизайн-
систему, то подключение к ней
алгоритмов позволит делать больше
ме...
Например, дизайнер и разработчик описывают логику
обработки входящих сигналов – контента, контекста,
информации о пользова...
ИНТЕРПОЛЯЦИЯ
Florian Schulz показывает пример интерполяции промежуточных
состояний интерфейса на основе краевых значений.
МОЙ ИНТЕРЕС:
АВТОМАТИЗИРОВАННАЯ
ЖУРНАЛЬНАЯ ВЕРСТКА
Мы описывали для одного из проектов в 2012. Контент не имел
семантики, ...
DUPLO
Похожую модель недавно реализовал Flipboard.
VOX MEDIA: CHORUS CMS
Из коллекции паттернов алгоритм собирает гармоничные
варианты главной страницы, оценивает их эффекти...
ГИБЧЕ И ПРОДУКТИВНЕЕ
Ручная работа редактора проигрывает алгоритмам,
что доказывает опыт рекомендательных систем вроде Rel...
SMALL VICTORIES
Собирает сайт из кусков контента и графики в Dropbox.
RIDERO
Система автоматической книжной вёрстки
максимально упрощает процесс создания книги.
ПОДГОТОВКА ГРАФИКИ
И КОНТЕНТА
РУТИНА :(
Создание однотипной графики в разных вариациях – одна из
самых унылых частей работы дизайнера.
Это отнимает уйму...
АВТОПОДБОР ЦВЕТА
В Yandex.Launcher подбирается цвет для карточек приложений,
который сам задаёт сочный и гармоничный фон н...
…И С УЧЁТОМ ФОНА
Сюда же можно отнести автоматическую
смену цвета шрифта в зависимости от цвета фона.
ВЫДЕЛЕНИЕ ГЛАЗ НА ФОТО
Эмоциональное усиление статей
в экспериментальном проекте студии Berg для The Guardian.
ПАРАМЕТРИЧЕСКИЕ ШРИФТЫ
Интерполяция разных начертаний от нескольких основных.
БАЗОВЫЕ ПАРАМЕТРЫ
ИЛИ
ГЕНЕРАЦИЯ ВСЕЙ КОМПОЗИЦИИ?
Но все эти автоподборщики – управление одной переменной.
Другое дело, ког...
ПОДБОРКИ НА ЯНДЕКС.МАРКЕТЕ
Маркетолог выбирает название и иллюстрацию, генератор
предлагает бесконечные вариации в духе га...
ГЕНЕРАТОР БАННЕРОВ NETFLIX
Скрипт вырезает персонажей для постеров, накладывает тексты
и делает автоматические эксперимент...
РОБО-РЕДАКТОР ENGADGET
Воспитали робота-подмастерье для написания
простых новостных заметок о новых гаджетах. Уф-ф-ф!
ПЕРЕНОС СТИЛЯ: PRISMA
Чёрная магия происходит в нейросетях. Prisma сделала перенос
стиля известных художников на фото быст...
ПЕРЕНОС СТИЛЯ: ARTISTO
Наш сервис Artisto первым научился обрабатывать
таким способом видео (причём даже потоковое).
НЕЙРОСЕТИ В РАННЕЙ СТАДИИ
Эти приложения можно скачать на телефон и получить
результат за пару секунд, вместо того чтобы с...
НЕЙРОСЕТИ ОТБЕРУТ РАБОТУ
У ИЛЛЮСТРАТОРОВ?
У тех, кто имеет хороший стиль – вряд ли.
Но это, опять же, снизит порог входа н...
БЫСТРЫЕ НАБРОСКИ НА РАЗ-ДВА
Для сложных стилистик можно быстро получить набросок в духе
«а что если мы попробуем нарисоват...
WOLFF OLINS: OI
Живая айдентика, которая реагирует на звук. Такое точно
невозможно сделать без творческого партнёрства с а...
ПЕРСОНАЛИЗАЦИЯ
ИНТЕРФЕЙСА
Для узкого сегмента аудитории
или конкретного пользователя.
ДАВНО ПОНЯТНЫЙ ПРИМЕР
Мы видим это каждый день в ленте Facebook, результатах
поиска Google, рекомендательных системах Netf...
КАКОВА ТУТ РОЛЬ ДИЗАЙНЕРА?
Главный вопрос. Для создания подобных алгоритмов
обработки пользовательских данных у нас мало н...
SPOTIFY DISCOVER WEEKLY
Giles Colborne: из привычного дизайна интерфейсов это список
треков, а вся основная работа – реком...
КОПАЙ!
Но Giles даёт советы дизайнерам на тему того,
как не оказаться бесполезными в новую эпоху и использовать
множество ...
ПОДДЕРЖКА ПРИНЯТИЯ РЕШЕНИЙ
Дизайнеры Airbnb общались с инженерной командой и научились
прогнозировать цену в определённом ...
ЭКСПЕРИМЕНТЫ С ДИЗАЙНОМ
Я приводил выше примеры автоматического тестирования
вариаций дизайна от Netflix и Vox Media, заяв...
ANTICIPATORY DESIGN
Сравнительно новый термин – смотрит на персонализацию
интерфейса и предугадывание желаний пользователя...
GOOGLE NOW, SIRI И ДРУГИЕ
Например, автоматически предлагают путь от работы к дому
на основе данных о перемещении владельц...
ПЕРСОНАЛИЗИРОВАННЫЙ ТЕКСТ
Persado оптимизирует рекламу для конкретного пользователя.
Пробуют применить наработки и к интер...
МУТИРУЮЩИЙ ДИЗАЙН
Идеология интерфейсов от Liam Spradlin – они подстраиваются
под пользователя с учётом множества параметр...
ЭКЗО-СКЕЛЕТ ДЛЯ
ДИЗАЙНЕРА
ИНСТРУМЕНТЫ
Если заглянуть в середину прошлого века, то компьютер
изначально должен был стать способом расширения
человече...
1.
УВЕЛИЧЕНИЕ ВОЗМОЖНОСТЕЙ
Первое поколение перевело аналоговые инструменты
в программы и развивается по пути увеличения
в...
2.
УБИРАНИЕ РУТИНЫ
Второе научилось брать на себя часть рутинных операций,
которые раньше требовали профессиональной экспе...
3.
СОАВТОРСТВО
Третье должно стать соавтором решений, помогая находить
новые интересные направления.
ПРАВИЛЬНЫЙ ФОРМАТ
Алгоритмический дизайн должен стать эдаким «экзо-
скелетом» для продуктового дизайнера, значительно
увел...
1.
ПРОСТРАНСТВО ПРОБЛЕМ
Изучить пространство проблем и взять для решения те,
что дадут максимальную ценность бизнесу и пол...
2.
ПРОСТРАНСТВО РЕШЕНИЙ
Исследовать пространство решений и выбрать те, что лучше
всего закрывают проблему.
Анализ
3.
ПРОИЗВОДСТВО
Произвести, запустить и распространить продукт, решающий
выбранную проблему.
Синтез
4.
ОЦЕНКА
Оценить эффективность выбранного решения на практике
и оптимизировать его.
Анализ + синтез
5.
СВЯЗКА ПРОДУКТОВ
Обеспечить связку решения с остальными продуктами
и решениями компании, а также внешними сервисами.
Си...
HARRY WEST (FROG DESIGN)
Наша профессия прошла путь от дизайна
объектов к дизайну experiences, а сейчас
всё чаще занимаетс...
ИНСТРУМЕНТЫ
Всё это задачи двух типов – анализ неявно выраженной
информации и уже работающих решений, а также синтез
требо...
ИНСТРУМЕНТЫ
АНАЛИЗА
ИССЛЕДОВАНИЯ
Анализ неявно выраженной информации о пользователях,
которую можно узнать в ходе качественных исследований,
в...
Нам нужно выделить поведенческие паттерны и сегменты
аудитории, для которых затем будет оптимизирован
интерфейс.
Это хорош...
МАШИННОЕ ОБУЧЕНИЕ
Чтобы научить алгоритм оптимизировать интерфейс и
контент для этих групп аудитории, дизайнерам пора копа...
КАК ЭТО РАБОТАЕТ
Хороший пример от Jon Bruner: алгоритм получает описание
идеального результата – расписание авиаперелётов...
КУРАТОР
В таком сценарии специалист выступает куратором алгоритма
и может добавлять или снимать ограничения.
А получившиес...
MACHINE LEARNING FOR DESIGNERS
Хотя этой работой занимается скорее аналитик, дизайнеры
должны быть в курсе основных принци...
ИНСТРУМЕНТЫ СИНТЕЗА
AUTODESK DREAMCATCHER
Основан на идее генеративного дизайна, который давно используется в
перфомансах, одежде, архитектуре...
ПАРАМЕТРИЧЕСКИЙ ДИЗАЙН
Все знают о бюро Zaha Hadid Architects –
они называют этот подход «параметрическим дизайном».
LOGOJOY
Заменяет недорогого фрилансера для создания логотипов.
Генерирует варианты, показывает примерный фирстиль.
ГЕНЕРАТИВНЫЙ ПОДХОД
Не особо заметен в продуктовом дизайне – пока не помогает
решать утилитарные задачи.
Конечно, в работе...
Процесс работы продуктового дизайнера может стать таким:
1. С помощью заранее заданных правил и паттернов
генерируется мно...
ФИЛЬТРАЦИЯ КОНЦЕПТОВ
Как именно мы сможем отфильтровать поток концептов в
продуктовом дизайне, где сценарии использования ...
CREATIVE AI
Roelof и Samim запустили сайт на эту тему,
там появляется много интересного.
КОМПЬЮТЕРНЫЙ БРЕЙНШТОРМ
Мы и так занимаемся генеративным дизайном
на брейнштормах, когда рисуются десятки идей; или по ход...
RENE
Инструмент от Jon Gold показывает пример реализации такого подхода.
Он работал над той самой CMS The Grid и рассказыв...
Jon посчитал, что это мало чем отличается от обучения
дизайнеров, и разбил процесс на несколько этапов: сначала
анализ сим...
ДИЗАЙН-БРУТФОРС
Хотя Jon и называет в шутку этот подход «дизайн-
брутфорсом» или «multiplicative design», он подчёркивает
...
ЕСТЬ ЛИ ПРИМЕРЫ
НА РЫНКЕ?
Маловато :(
ПРИМЕРОВ МАЛО
К сожалению, на рынке особо не видно продуктов, которые
помогают с анализом и синтезом на уровне того, что у...
ADOBE PHOTOSHOP
Компания регулярно добавляет «умные» функции. Photoshop
научился дорисовывать недостающую часть фотографии.
DESIGNSCAPE
Автоматически улучшает композицию макета.
Решает мелкие косяки и предлагает другую компоновку.
ADOBE SENSEI
Платформа, которая использует машинное обучение и станет
основой для будущих «умных» функций продуктов Adobe.
JOHN MCCARTHY
Автор понятия
«Искусственный интеллект» говорил:
«Как только сложная технология начинает
просто работать, ни...
Многие вещи, которые раньше казались
технологическими прорывами
в искусственном интеллекте,
теперь – само собой разумеющее...
Смотрите на экспериментальные решения,
завтра они станут частью
повседневных продуктов.
STYLIT
StyLit создаёт 3D-изображение из бумажного скетча.
ANIMATION AUTOCOMPLETE
Microsoft научился дорисовывать часть иллюстраций
и их анимации.
ОБРЫВОЧНЫЕ
НАБРОСКИ БУДУЩЕГО
Так что, скорее, речь должна идти о собственных решениях
компаний, заточенных под конкретные ...
В своём основном посыле она снимает с дизайнера основную
часть нагрузки по поддержке линейки продуктов,
обеспечивая и гара...
ЭТИКА
Является ли такой дизайн ценным и самостоятельным?
Не застрянет ли генерация вариантов в локальном
максимуме?
И кто ...
OLIVER ROEDER
Алгоритмические инструменты создаются
людьми на основе ими же придуманных
теорий и концепций, с помощью прав...
ВЫВОДЫ
История красивая, но надо понимать,
что алгоритмы строятся
по чётко описанным правилам,
пусть даже здорово прокачавшимся
с...
Сила дизайнера именно в том,
что он может сломать эти правила
и задать новые, так что через год
красивым будет считаться
ч...
Конечно, не все специалисты в нашей
профессии сильны и алгоритмам
будет несложно заменить ленивых.
Но тем, кто умеет и соб...
Снять рутину по подготовке вспомогательной графики
и контента, а это почти механическая работа.
Расширить возможности твор...
Речь пока идёт в основном про кастомные решения конкретных
компаний под свои задачи. Их нужно не только создать, но также
...
ПУСКАЙ ЛУЧШЕ КОМПЬЮТЕР
ПОИГРАЕТ СО ШРИФТАМИ
Сами продукты становятся всё сложнее – нам нужно
поддерживать множество платфо...
P.S.Эта революция всё равно вовсю идёт, так что может быть
стоит возглавить её?
СПАСИБО!
ЮРИЙ ВЕТРОВ
www.jvetrau.com twitter.com/jvetrau
САЙТ-КОЛЛЕКЦИЯ
http://algorithms.design/
Upcoming SlideShare
Loading in …5
×

Юрий Ветров — Алгоритмический дизайн

36,195 views

Published on

Презентация Юрия Ветрова "Алгоритмический дизайн: Экзо-скелет для дизайнера" с конференции User Experience Russia 2016. Обновлено для конференции Krupa Product Design Conference 2017.

Published in: Design

Юрий Ветров — Алгоритмический дизайн

  1. 1. АЛГОРИТМИЧЕСКИЙ ДИЗАЙН ЭКЗО-СКЕЛЕТ ДЛЯ ДИЗАЙНЕРА ЮРИЙ ВЕТРОВ MAIL.RU GROUP
  2. 2. ДАВНИЙ ИНТЕРЕС За 4 года скопилась пара десятков примеров и полдюжины статей в привязке к дизайну цифровых продуктов, хотя это были скорее отдельные всплески безо всякой системы.
  3. 3. РОБОТЫ ЗАМЕНЯТ ДИЗАЙНЕРОВ? В 2016 году тема алгоритмов, нейронных сетей, искусственного интеллекта и всего что с этим связано стала особенно горячей, так что самое время переосмыслить современную роль дизайнера.
  4. 4. THE GRID CMS Сама подбирает шаблоны, оформление контента, обрабатывает фото. Делает A/B-тесты для выбора лучшего решения.
  5. 5. НА САМОМ ДЕЛЕ НЕТ? Продукт уже пару лет в закрытой бете и судить о нём можно было только по рекламным материалам и статьям. А недавно на Designer News откопали примеры созданных сайтов и реакция сообщества неоднозначная – критикуют слабые с дизайнерской точки результаты и мусорный код. В общем, скептики открыли шампанское.
  6. 6. ПОЛНАЯ ЗАМЕНА ДИЗАЙНЕРА АЛГОРИТМОМ? АГА, КОНЕЧНО… Об этом говорил The Grid и некоторые технологи – звучит красиво и современно, но посыл изначально неверный. Продуктовый дизайнер помогает команде превратить сырую идею в целостный интерфейс с хорошей логикой работы, информационной архитектурой и визуальным стилем, которые решают бизнес-задачи и усиливают бренд.
  7. 7. По ходу работы он принимает огромное количество решений, причём многие из них невозможно описать чёткими процедурами; кроме того, входящие требования бывают ошибочны и противоречивы в отдельных деталях, так что дизайнер помогает менеджеру решить эти коллизии – это делает продукт лучше. Всё это сильно больше чем подбор правильного шаблона и раскраска его современной стилистикой.
  8. 8. ТВОРЧЕСКОЕ ПАРТНЁРСТВО Дизайнер в паре с алгоритмами решает продуктовые задачи.
  9. 9. ЖОНГЛЁРЫ Дизайнеры здорово научились жонглировать кучей инструментов и навыков, так что на смену классическим приставкам несколько лет назад пришёл термин «продуктовый дизайнер».
  10. 10. Это активные участники продуктовой команды, которые понимают, как работают пользовательские исследования, могут спроектировать интерфейс, предложить интересный визуальный стиль, оживить его анимацией и даже заверстать несложный код. Такие специалисты ценны для любой продуктовой команды.
  11. 11. ТЯЖЕЛОВАТО… Правда, распыление навыков не позволяет посвятить достаточно времени всем аспектам продуктовой работы. Бум новых инструментов для дизайнеров сильно сократил время создания проектных артефактов и расширил возможности. Но этого недостаточно – рутины всё ещё много, а новые зоны ответственности съедают сэкономленное время. В общем, нужно упрощать и автоматизировать дальше. * *
  12. 12. ПОСТРОЕНИЕ ИНТЕРФЕЙСА
  13. 13. ПРОСТЫЕ ИНСТРУМЕНТЫ ПАБЛИШИНГА Medium, Readymag и Tilda уже сократили количество ручной работы – в них полно добротных шаблонов, с помощью которых можно и без дизайнера собрать неплохой результат. Улучшение шаблонов сделает порог входа ещё ниже.
  14. 14. WIX ADVANCED DESIGN INTELLIGENCE Похожий на The Grid полу-автоматизированный способ создания сайтов для непрофессионалов.
  15. 15. Они обучают алгоритм, скармливая ему множество примеров хороших современных сайтов. Кроме того, он старается учитывать тематику создаваемого сайта, чтобы лучше попадать в стиль. Ведь непрофессионалу сложно выбрать подходящий шаблон из всего многообразия и продукты вроде Wix и The Grid выступают тут дизайнером-экспертом.
  16. 16. FIREDROP Идея похожа на The Grid. Вбиваете контент, а дальше виртуальный помощник помогает выбрать лейаут и визуальный стиль сайта.
  17. 17. ПАРНЫЙ ДИЗАЙН С КОМПЬЮТЕРОМ Конечно, как и в случае с The Grid, полный отказ от дизайнера приведёт к штампованным и не всегда хорошим результатам (хотя в любом случае поднимет общий уровень качества). Но если рассматривать эту работу как своего рода «парный дизайн» с компьютером, можно сгрузить часть рутины.
  18. 18. Например, дизайнер собирает мудборд на Dribbble или Pinterest, а алгоритм быстро примеряет эти стили на макет, а дальше подбирает наиболее близкий шаблон из имеющихся. По сути – дизайнер становится арт-директором своего подмастерья, компьютера.
  19. 19. ОСВОБОДИТЬСЯ ОТ РУТИНЫ Да, таким путём не создать революционный продукт. Но можно освободить себе время для этого. Да и надо признать, что огромная часть повседневных задач более чем утилитарная и не требует революций.
  20. 20. ДИЗАЙН-СИСТЕМЫ 3.0 Если компания зрелая и имеет дизайн- систему, то подключение к ней алгоритмов позволит делать больше меньшими средствами.
  21. 21. Например, дизайнер и разработчик описывают логику обработки входящих сигналов – контента, контекста, информации о пользователе и его действиях, а дальше алгоритм сам формирует экраны на основе готовых паттернов и принципов. Это позволяет добиться тонкой подстройки под конкретную узкую ситуацию или сценарий без необходимости вручную прорисовывать и разрабатывать десятки состояний экрана.
  22. 22. ИНТЕРПОЛЯЦИЯ Florian Schulz показывает пример интерполяции промежуточных состояний интерфейса на основе краевых значений.
  23. 23. МОЙ ИНТЕРЕС: АВТОМАТИЗИРОВАННАЯ ЖУРНАЛЬНАЯ ВЕРСТКА Мы описывали для одного из проектов в 2012. Контент не имел семантики, а переверстать архив вручную – затратно. Скрипт разбирал статью и исходя из её контента (количество абзацев и слов в каждом, фотографии и их форматы, врезки с цитатами и таблицами и т.п.) выбирал типовой паттерн для представления каждого куска в эффектном журнальном виде. И следил, чтобы паттерны чередовались и материал не выглядел однообразно.
  24. 24. DUPLO Похожую модель недавно реализовал Flipboard.
  25. 25. VOX MEDIA: CHORUS CMS Из коллекции паттернов алгоритм собирает гармоничные варианты главной страницы, оценивает их эффективность и выбирает оптимальный.
  26. 26. ГИБЧЕ И ПРОДУКТИВНЕЕ Ручная работа редактора проигрывает алгоритмам, что доказывает опыт рекомендательных систем вроде Relap.io.
  27. 27. SMALL VICTORIES Собирает сайт из кусков контента и графики в Dropbox.
  28. 28. RIDERO Система автоматической книжной вёрстки максимально упрощает процесс создания книги.
  29. 29. ПОДГОТОВКА ГРАФИКИ И КОНТЕНТА
  30. 30. РУТИНА :( Создание однотипной графики в разных вариациях – одна из самых унылых частей работы дизайнера. Это отнимает уйму времени и демотивирует, при том что эти силы можно было бы потратить на более осмысленную продуктовую работу.
  31. 31. АВТОПОДБОР ЦВЕТА В Yandex.Launcher подбирается цвет для карточек приложений, который сам задаёт сочный и гармоничный фон на основе иконки.
  32. 32. …И С УЧЁТОМ ФОНА Сюда же можно отнести автоматическую смену цвета шрифта в зависимости от цвета фона.
  33. 33. ВЫДЕЛЕНИЕ ГЛАЗ НА ФОТО Эмоциональное усиление статей в экспериментальном проекте студии Berg для The Guardian.
  34. 34. ПАРАМЕТРИЧЕСКИЕ ШРИФТЫ Интерполяция разных начертаний от нескольких основных.
  35. 35. БАЗОВЫЕ ПАРАМЕТРЫ ИЛИ ГЕНЕРАЦИЯ ВСЕЙ КОМПОЗИЦИИ? Но все эти автоподборщики – управление одной переменной. Другое дело, когда алгоритм готовит всю композицию.
  36. 36. ПОДБОРКИ НА ЯНДЕКС.МАРКЕТЕ Маркетолог выбирает название и иллюстрацию, генератор предлагает бесконечные вариации в духе гайдлайнов.
  37. 37. ГЕНЕРАТОР БАННЕРОВ NETFLIX Скрипт вырезает персонажей для постеров, накладывает тексты и делает автоматические эксперименты со всем этим. Магия!
  38. 38. РОБО-РЕДАКТОР ENGADGET Воспитали робота-подмастерье для написания простых новостных заметок о новых гаджетах. Уф-ф-ф!
  39. 39. ПЕРЕНОС СТИЛЯ: PRISMA Чёрная магия происходит в нейросетях. Prisma сделала перенос стиля известных художников на фото быстрым и массовым.
  40. 40. ПЕРЕНОС СТИЛЯ: ARTISTO Наш сервис Artisto первым научился обрабатывать таким способом видео (причём даже потоковое).
  41. 41. НЕЙРОСЕТИ В РАННЕЙ СТАДИИ Эти приложения можно скачать на телефон и получить результат за пару секунд, вместо того чтобы самому разбираться с технологией, как это было в прошлом году. Но загрузить и применить свой стиль сходу нельзя – без самостоятельного обучения нейросети получается так себе.
  42. 42. НЕЙРОСЕТИ ОТБЕРУТ РАБОТУ У ИЛЛЮСТРАТОРОВ? У тех, кто имеет хороший стиль – вряд ли. Но это, опять же, снизит порог входа на получение добротных иллюстраций для статьи или сайта там, где совсем уникальный подход не требуется. Прощайте, унылые стоковые фото!
  43. 43. БЫСТРЫЕ НАБРОСКИ НА РАЗ-ДВА Для сложных стилистик можно быстро получить набросок в духе «а что если мы попробуем нарисовать кота в нашем стиле». Например, при работе над мультфильмом «Рататуй» художники Pixar пробовали сразу несколько стилей; что если бы эти наброски делались нейросетью? Можно делать сториборды и описывать сценарии в виде комиксов (фото легко превращается в скетч). Думаю, скоро этот список применений сильно расширится.
  44. 44. WOLFF OLINS: OI Живая айдентика, которая реагирует на звук. Такое точно невозможно сделать без творческого партнёрства с алгоритмами.
  45. 45. ПЕРСОНАЛИЗАЦИЯ ИНТЕРФЕЙСА Для узкого сегмента аудитории или конкретного пользователя.
  46. 46. ДАВНО ПОНЯТНЫЙ ПРИМЕР Мы видим это каждый день в ленте Facebook, результатах поиска Google, рекомендательных системах Netflix и Spotify, да и многих других массовых продуктах. Это снимает необходимость самому фильтровать потоки информации. Да и такое проявление заботы со стороны продукта создаёт лучшую эмоциональную привязку.
  47. 47. КАКОВА ТУТ РОЛЬ ДИЗАЙНЕРА? Главный вопрос. Для создания подобных алгоритмов обработки пользовательских данных у нас мало необходимых навыков и эти задачи, как правило, решаются инженерами и аналитиками больших данных.
  48. 48. SPOTIFY DISCOVER WEEKLY Giles Colborne: из привычного дизайна интерфейсов это список треков, а вся основная работа – рекомендательная система.
  49. 49. КОПАЙ! Но Giles даёт советы дизайнерам на тему того, как не оказаться бесполезными в новую эпоху и использовать множество источников данных для построения и обучения алгоритмов. Важно учиться работать с большими данными и уметь кластеризовать их в инсайты.
  50. 50. ПОДДЕРЖКА ПРИНЯТИЯ РЕШЕНИЙ Дизайнеры Airbnb общались с инженерной командой и научились прогнозировать цену в определённом городе в определённый сезон, так что пользователям проще задать конкурентоспособный тариф.
  51. 51. ЭКСПЕРИМЕНТЫ С ДИЗАЙНОМ Я приводил выше примеры автоматического тестирования вариаций дизайна от Netflix и Vox Media, заявляет такое и The Grid CMS. Это ещё один из аспектов персонализации, которую можно переложить на плечи алгоритмов.
  52. 52. ANTICIPATORY DESIGN Сравнительно новый термин – смотрит на персонализацию интерфейса и предугадывание желаний пользователя более широко. Хотя для этого важно доверие пользователей. Чтобы такая персонализация работала, сервисы должны получить разрешение на сбор личной информации.
  53. 53. GOOGLE NOW, SIRI И ДРУГИЕ Например, автоматически предлагают путь от работы к дому на основе данных о перемещении владельца телефона.
  54. 54. ПЕРСОНАЛИЗИРОВАННЫЙ ТЕКСТ Persado оптимизирует рекламу для конкретного пользователя. Пробуют применить наработки и к интерфейсам.
  55. 55. МУТИРУЮЩИЙ ДИЗАЙН Идеология интерфейсов от Liam Spradlin – они подстраиваются под пользователя с учётом множества параметров.
  56. 56. ЭКЗО-СКЕЛЕТ ДЛЯ ДИЗАЙНЕРА
  57. 57. ИНСТРУМЕНТЫ Если заглянуть в середину прошлого века, то компьютер изначально должен был стать способом расширения человеческих возможностей. Roelof Pieters и Samim Winiger во всех деталях изучают историю компьютеров, как помощников дизайнеров. Они выделяют три уровня развития инструментов.
  58. 58. 1. УВЕЛИЧЕНИЕ ВОЗМОЖНОСТЕЙ Первое поколение перевело аналоговые инструменты в программы и развивается по пути увеличения возможностей.
  59. 59. 2. УБИРАНИЕ РУТИНЫ Второе научилось брать на себя часть рутинных операций, которые раньше требовали профессиональной экспертизы.
  60. 60. 3. СОАВТОРСТВО Третье должно стать соавтором решений, помогая находить новые интересные направления.
  61. 61. ПРАВИЛЬНЫЙ ФОРМАТ Алгоритмический дизайн должен стать эдаким «экзо- скелетом» для продуктового дизайнера, значительно увеличивая количество и глубину проработки решений. Как могут взаимодействовать продуктовый дизайнер и компьютер в такой связке? Можно посмотреть на общий процесс продуктовой работы.
  62. 62. 1. ПРОСТРАНСТВО ПРОБЛЕМ Изучить пространство проблем и взять для решения те, что дадут максимальную ценность бизнесу и пользователям. Анализ
  63. 63. 2. ПРОСТРАНСТВО РЕШЕНИЙ Исследовать пространство решений и выбрать те, что лучше всего закрывают проблему. Анализ
  64. 64. 3. ПРОИЗВОДСТВО Произвести, запустить и распространить продукт, решающий выбранную проблему. Синтез
  65. 65. 4. ОЦЕНКА Оценить эффективность выбранного решения на практике и оптимизировать его. Анализ + синтез
  66. 66. 5. СВЯЗКА ПРОДУКТОВ Обеспечить связку решения с остальными продуктами и решениями компании, а также внешними сервисами. Синтез
  67. 67. HARRY WEST (FROG DESIGN) Наша профессия прошла путь от дизайна объектов к дизайну experiences, а сейчас всё чаще занимается дизайном сложных систем.
  68. 68. ИНСТРУМЕНТЫ Всё это задачи двух типов – анализ неявно выраженной информации и уже работающих решений, а также синтез требований и решений на их основе. Какие инструменты и методы работы нужны для каждого из типов?
  69. 69. ИНСТРУМЕНТЫ АНАЛИЗА
  70. 70. ИССЛЕДОВАНИЯ Анализ неявно выраженной информации о пользователях, которую можно узнать в ходе качественных исследований, вряд ли можно автоматизировать. А вот изучение поведения аудитории уже работающих продуктов – подходящая задача.
  71. 71. Нам нужно выделить поведенческие паттерны и сегменты аудитории, для которых затем будет оптимизирован интерфейс. Это хорошо удаётся в таргетинге рекламы, когда по явным и неявным признакам поведения пользователя (в конкретном продукте или рекламной сети) его относят к той или иной группе.
  72. 72. МАШИННОЕ ОБУЧЕНИЕ Чтобы научить алгоритм оптимизировать интерфейс и контент для этих групп аудитории, дизайнерам пора копать в сторону машинного обучения.
  73. 73. КАК ЭТО РАБОТАЕТ Хороший пример от Jon Bruner: алгоритм получает описание идеального результата – расписание авиаперелётов, оптимизированное под экономию топлива и комфорт для пассажиров. Добавляются новые ограничения – авиапарк, список аэропортов, количество мест в каждом самолёте. Алгоритму дают примеры тысяч рейсов; он обучается и улучшает оптимальное расписание.
  74. 74. КУРАТОР В таком сценарии специалист выступает куратором алгоритма и может добавлять или снимать ограничения. А получившиеся решения компьютер может проверить в ходе экспериментов с реальными пользователями – получается цикл постоянной обратной связи.
  75. 75. MACHINE LEARNING FOR DESIGNERS Хотя этой работой занимается скорее аналитик, дизайнеры должны быть в курсе основных принципов машинного обучения.
  76. 76. ИНСТРУМЕНТЫ СИНТЕЗА
  77. 77. AUTODESK DREAMCATCHER Основан на идее генеративного дизайна, который давно используется в перфомансах, одежде, архитектуре. Породил несколько публикаций на тему его применимости к дизайну цифровых продуктов.
  78. 78. ПАРАМЕТРИЧЕСКИЙ ДИЗАЙН Все знают о бюро Zaha Hadid Architects – они называют этот подход «параметрическим дизайном».
  79. 79. LOGOJOY Заменяет недорогого фрилансера для создания логотипов. Генерирует варианты, показывает примерный фирстиль.
  80. 80. ГЕНЕРАТИВНЫЙ ПОДХОД Не особо заметен в продуктовом дизайне – пока не помогает решать утилитарные задачи. Конечно, в работе архитектора и промышленного дизайнера тоже полно ограничений и специфики, но интерфейсы не статичны – со временем меняется не только способ их использования, но и содержимое, функциональность.
  81. 81. Процесс работы продуктового дизайнера может стать таким: 1. С помощью заранее заданных правил и паттернов генерируется множество вариантов дизайна. 2. Результаты отфильтровываются по качеству визуальных решений и близости к решению задачи. 3. Дизайнер и менеджер продукта выбирают из них наиболее интересные и адекватные, после чего дорабатывают их при необходимости. 4. Один или несколько вариантов запускаются в сплит- тестирование, по результатам остаётся наиболее эффективный.
  82. 82. ФИЛЬТРАЦИЯ КОНЦЕПТОВ Как именно мы сможем отфильтровать поток концептов в продуктовом дизайне, где сценарии использования так разнообразны – вопрос открытый. Если перебор будет не совсем ручным, а компьютер поможет ещё и в фильтрации получившегося потока – работа станет ещё более продуктивной и креативной.
  83. 83. CREATIVE AI Roelof и Samim запустили сайт на эту тему, там появляется много интересного.
  84. 84. КОМПЬЮТЕРНЫЙ БРЕЙНШТОРМ Мы и так занимаемся генеративным дизайном на брейнштормах, когда рисуются десятки идей; или по ходу решения задачи, когда макет много раз дорабатывается. Так почему не отдать часть этой работы алгоритмам?
  85. 85. RENE Инструмент от Jon Gold показывает пример реализации такого подхода. Он работал над той самой CMS The Grid и рассказывает, как он научил компьютер принимать осмысленные шрифтовые решения.
  86. 86. Jon посчитал, что это мало чем отличается от обучения дизайнеров, и разбил процесс на несколько этапов: сначала анализ символов в шрифтах для понимания сочетаемости, затем базовые правила совмещения шрифтов, после этого «скормил» модные примеры сочетаний для понимания трендов, а в конце приставил детально следить за работой опытных дизайнеров. Общий посыл у него аналогичен Roelof и Samim – инструменты должны стать творческими партнёрами дизайнера, а не тупыми исполнителями.
  87. 87. ДИЗАЙН-БРУТФОРС Хотя Jon и называет в шутку этот подход «дизайн- брутфорсом» или «multiplicative design», он подчёркивает важность профессионала «за рулём». Кстати, в начале года он ушёл из команды The Grid, который как раз ратовал за полностью автоматизированный подход.
  88. 88. ЕСТЬ ЛИ ПРИМЕРЫ НА РЫНКЕ? Маловато :(
  89. 89. ПРИМЕРОВ МАЛО К сожалению, на рынке особо не видно продуктов, которые помогают с анализом и синтезом на уровне того, что умеет тот же Autodesk Dreamcatcher. Хотя The Grid и Wix можно считать более-менее массовыми и понятными решениями.
  90. 90. ADOBE PHOTOSHOP Компания регулярно добавляет «умные» функции. Photoshop научился дорисовывать недостающую часть фотографии.
  91. 91. DESIGNSCAPE Автоматически улучшает композицию макета. Решает мелкие косяки и предлагает другую компоновку.
  92. 92. ADOBE SENSEI Платформа, которая использует машинное обучение и станет основой для будущих «умных» функций продуктов Adobe.
  93. 93. JOHN MCCARTHY Автор понятия «Искусственный интеллект» говорил: «Как только сложная технология начинает просто работать, никто больше не называет её ИИ».
  94. 94. Многие вещи, которые раньше казались технологическими прорывами в искусственном интеллекте, теперь – само собой разумеющееся.
  95. 95. Смотрите на экспериментальные решения, завтра они станут частью повседневных продуктов.
  96. 96. STYLIT StyLit создаёт 3D-изображение из бумажного скетча.
  97. 97. ANIMATION AUTOCOMPLETE Microsoft научился дорисовывать часть иллюстраций и их анимации.
  98. 98. ОБРЫВОЧНЫЕ НАБРОСКИ БУДУЩЕГО Так что, скорее, речь должна идти о собственных решениях компаний, заточенных под конкретные задачи. Один из оптимальных путей – интеграция таких алгоритмов в общую дизайн-систему организации.
  99. 99. В своём основном посыле она снимает с дизайнера основную часть нагрузки по поддержке линейки продуктов, обеспечивая и гарантируя унифицированный интерфейс, а также упрощая запуск новых продуктов и поддержку существующих. Современные дизайн-системы начинались с живых гайдлайнов, но всё это первый шаг – внедрение правил дизайна типовых компонентов в код, из которого дальше разработчики всё равно собирают страницы руками. Вторым должна стать полуавтоматическая сборка и тестирование страниц по определённым правилам.
  100. 100. ЭТИКА Является ли такой дизайн ценным и самостоятельным? Не застрянет ли генерация вариантов в локальном максимуме? И кто вообще его автор?
  101. 101. OLIVER ROEDER Алгоритмические инструменты создаются людьми на основе ими же придуманных теорий и концепций, с помощью правил и материалов, также созданных человеком. Так что это такая же часть деятельности человека, только на новом уровне.
  102. 102. ВЫВОДЫ
  103. 103. История красивая, но надо понимать, что алгоритмы строятся по чётко описанным правилам, пусть даже здорово прокачавшимся с помощью машинного обучения.
  104. 104. Сила дизайнера именно в том, что он может сломать эти правила и задать новые, так что через год красивым будет считаться что-то совсем другое.
  105. 105. Конечно, не все специалисты в нашей профессии сильны и алгоритмам будет несложно заменить ленивых. Но тем, кто умеет и соблюдать, и нарушать правила, открывается совершенно новый инструментарий и возможности.
  106. 106. Снять рутину по подготовке вспомогательной графики и контента, а это почти механическая работа. Расширить возможности творческих поисков, когда комбинаторику разных параметров делает компьютер, а дизайнер фильтрует результаты. Оптимизировать интерфейс под узкие группы аудитории и даже конкретных пользователей. Быстро адаптировать интерфейс под разные платформы и устройства, пусть даже в примитивном виде. Экспериментировать с частями интерфейса и конкретными паттернами, в идеале – автоматически.
  107. 107. Речь пока идёт в основном про кастомные решения конкретных компаний под свои задачи. Их нужно не только создать, но также поддерживать и развивать – а всё это постоянные вложения времени и денег. Как показывает пример The Grid, сами по себе инструменты не могут сотворить чудес – без дизайнера «за рулём» они часто выдают посредственный результат. Впрочем, как и многие другие профессиональные инструменты. Сложнее выйти за пределы существующих стилей и решений – зачастую для этого нужно полностью отвязаться от существующих паттернов и правил, а алгоритмический дизайн основан на них. Упрощается клонирование чужого дизайна, если инструменту генеративного дизайна можно «скормить» ленту готовых работ на том же Dribbble.
  108. 108. ПУСКАЙ ЛУЧШЕ КОМПЬЮТЕР ПОИГРАЕТ СО ШРИФТАМИ Сами продукты становятся всё сложнее – нам нужно поддерживать множество платформ, подстраивать интерфейсы под всё большее количество сегментов пользователей, проверять всё больше гипотез. И вместо того, чтобы закидывать проблему всё большим количеством дизайнеров, лучше отгрузить часть рутины компьютеру.
  109. 109. P.S.Эта революция всё равно вовсю идёт, так что может быть стоит возглавить её?
  110. 110. СПАСИБО! ЮРИЙ ВЕТРОВ www.jvetrau.com twitter.com/jvetrau
  111. 111. САЙТ-КОЛЛЕКЦИЯ http://algorithms.design/

×