Pro Yearly is on sale from $80 to $50! »

Дизайнер в гостях у программиста и дата-сайентиста

Дизайнер в гостях у программиста и дата-сайентиста

Инструменты дизайнера не ограничиваются графическим редактором. Я поделюсь опытом применения инструментов для программной визуализации и Data Science, пригодными для современного дизайнера цифровых продуктов. Подскажу, как начать их использовать.

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

В пьесе примут участие:
1. инструменты программной визуализации: DrawBot, Nodebox, Processing;
2. инструменты Data Science: R, ggplot2.

61cded30b96dad0e8df0180ae906de09?s=128

Andrew Shapiro

April 13, 2018
Tweet

Transcript

  1. Дизайнер в гостях у программиста 
 и дата-сайентиста Андрей Шапиро,

    Byndyusoft
  2. None
  3. Андрей Шапиро — Арт-директор в Byndyusoft — Проектирую цифровые продукты

    с 2006 — Увлекаюсь автоматизацией дизайна: набор плагинов Efficiency для Sketch, собственные дизайн-инструменты в Nodebox/Processing — Ищу инсайты в данных, обучаю машины, попал в топ-150 курса Open Machine Learning сообщества Open Data Science
  4. программист дата-сайентист

  5. Даёшь алгоритмизацию в графический дизайн!

  6. Графический редактор множит рутину

  7. Лучше бы было так

  8. github.com/x-raizor/nodebox1-generative-tools

  9. Chatra.io

  10. Есть стиль иллюстраций. Как сделать нарядно без иллюстратора?

  11. Chatra.io

  12. Chatra.io

  13. Every Pixel, 
 дизайнер Влад Зелинский

  14. Every Pixel, дизайн — Влад Зелинский, код — Андрей Шапиро

  15. github.com/x-raizor/epattern

  16. Как сделать приличные дефолтные аватарки для сервиса, не сильно перетрудившись

  17. Генеративные аватарки blog.byndyusoft.com/generative-avatars-16bdb15f872d

  18. Принцип фона: суперэллипс поверх заливки 
 Принцип фигуры: случайное лицо

    из коллекции Бруно Мунари
  19. Генеративные аватарки blog.byndyusoft.com/generative-avatars-16bdb15f872d

  20. С чего начать с алгоритмизацией

  21. Nodebox 3

  22. Nicholas Rougeux, c82.net/blog/?id=70

  23. Nicholas Rougeux, c82.net/blog/?id=70

  24. DrawBot Nodebox 1 PlotDevice Программируемые среды на базе языка Python

    на macOS
  25. Processing Программируемая среды на базе языков: Java, JavaScript, Python

  26. Даёшь данные в дизайн!

  27. github.com/x-raizor/ddd-talk — «Дизайн, движимый данными»

  28. Лучше, когда так данные > дизайн >

  29. Хорошо, но при чём здесь Data Science и дизайн?

  30. Иногда один неказистый график может сменить стратегию продукта

  31. Должно быть так данные > дизайн >

  32. Задача: 
 найти интересный способ визуализации Facebook- мероприятий · 


    sociograph.io
  33. Задача: 
 найти интересный способ визуализации Facebook- мероприятий · 


    sociograph.io
  34. None
  35. Дизайнер «нарисовал» в графическом редакторе

  36. График на основе реальных данных Как было «нарисовано» изначально

  37. Дизайнер «нарисовал» в графическом редакторе

  38. График на основе реальных данных Как было «нарисовано» изначально

  39. Дизайнер «нарисовал» в графическом редакторе

  40. График на основе реальных данных Как было «нарисовано» изначально

  41. Всё дело в неправильном процессе дизайн > разработка > данные

    >
  42. Должно быть так данные > дизайн >

  43. Данные до начала дизайна. Как? На примере задач визуализации данных

  44. +

  45. None
  46. None
  47. None
  48. Неполный арсенал геометрических примитивов ggplot

  49. Загрузка данных в RStudio

  50. Грамматика ggplot # Точки ggplot(data = events, aes(x = start_time,

    y = attending_count)) + geom_point()
  51. Грамматика ggplot # Линии ggplot(data = events, aes(start_time, attending_count)) +

    geom_line()
  52. Грамматика ggplot # Линия с риббоном ggplot(events, aes(start_time, attending_count)) +

    geom_line() + geom_ribbon(aes(ymin = attending_count, ymax = attending_count + interested_count), alpha = 0.2)
  53. Грамматика ggplot # Точки с подписями ggplot(events, aes(x = start_time,

    y = attending_count)) + geom_point(color = 'red') + geom_text(aes(label = name), size = 3, hjust = 0, nudge_x = 2)
  54. Грамматика ggplot # Cтолбики друг под другом, но каждый в

    своём бейзлайне ggplot(events_longcount) + geom_col(aes(start_time, count, width = as.integer(end_time - start_time))) + facet_wrap(~ category, nrow = 4) Как было у дизайнера
  55. Грамматика ggplot # Аудитория по дням недели ggplot(events_longtime) + geom_line(aes(weekday,

    auditory, group = id))
  56. Грамматика ggplot, github.com/Byndyusoft/r-graph-vocabulary # Общий шаблон ggplot(data = df, mapping

    = aes(x = ‘x’, y = ‘y’)) + geom_point(color = 'red') + # геометрический слой facet_wrap() + # сборка в грид scale_y_log10() + # трансформация theme_void() # стилизация
  57. Грамматика ggplot

  58. Выгрузка в SVG, PDF

  59. С чего начать github.com/Byndyusoft/r-graph-vocabulary Попробовать запустить и разобраться в примерах

    из доклада Установить RStudio Установить R 1. 2. 3.
  60. Курс «Анализ данных в R. Часть 2» на stepik.org С

    чего начать Глава про визуализацию в книге 
 ‘R for Data Science’ r4ds.had.co.nz/data-visualisation.html stepik.org/course/724
  61. За пределами графического редактора есть множество полезных инструментов для дизайнера,

    который хочет расти
  62. Дизайнер в гостях у программиста 
 и дата-сайентиста Андрей Шапиро

    andrew@ashapiro.ru @xraizor That’s all folks!