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

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

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

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

Transcript

1. Дизайнер в гостях у программиста 
 и дата-сайентиста Андрей Шапиро, Byndyusoft
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
35. Дизайнер «нарисовал» в графическом редакторе
36. График на основе реальных данных Как было «нарисовано» изначально
37. Дизайнер «нарисовал» в графическом редакторе
38. График на основе реальных данных Как было «нарисовано» изначально
39. Дизайнер «нарисовал» в графическом редакторе
40. График на основе реальных данных Как было «нарисовано» изначально
41. Всё дело в неправильном процессе дизайн > разработка > данные >
42. Должно быть так данные > дизайн >
43. Данные до начала дизайна. Как? На примере задач визуализации данных
44. +
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!