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

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

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

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

Transcript

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

   и дата-сайентиста
   Андрей Шапиро, Byndyusoft
   

   View Slide

2. View Slide

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

   View Slide

4. программист дата-сайентист
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Chatra.io
   

   View Slide

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

    View Slide

11. Chatra.io
    

    View Slide

12. Chatra.io
    

    View Slide

13. Every Pixel, 

    дизайнер Влад Зелинский
    

    View Slide

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

    View Slide

15. github.com/x-raizor/epattern
    

    View Slide

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

    View Slide

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

    View Slide

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

    Принцип фигуры: случайное лицо из коллекции Бруно Мунари
    

    View Slide

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

    View Slide

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

    View Slide

21. Nodebox 3
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. Задача: 

    найти
    интересный
    способ
    визуализации
    Facebook-
    мероприятий
    ·
    

    sociograph.io
    

    View Slide

33. Задача: 

    найти
    интересный
    способ
    визуализации
    Facebook-
    мероприятий
    ·
    

    sociograph.io
    

    View Slide

34. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. +
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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)
    

    View Slide

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)
    

    View Slide

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

    View Slide

55. Грамматика
    ggplot
    # Аудитория по дням недели
    ggplot(events_longtime) +
    geom_line(aes(weekday, auditory, group = id))
    

    View Slide

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() # стилизация
    

    View Slide

57. Грамматика
    ggplot
    

    View Slide

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

    View Slide

59. С чего начать
    github.com/Byndyusoft/r-graph-vocabulary
    Попробовать запустить
    и разобраться в примерах
    из доклада
    Установить RStudio
    Установить R
    1. 2. 3.
    

    View Slide

60. Курс «Анализ данных в R.
    Часть 2» на stepik.org
    С чего начать
    Глава про визуализацию в книге 

    ‘R for Data Science’
    r4ds.had.co.nz/data-visualisation.html stepik.org/course/724
    

    View Slide

61. За пределами графического редактора есть
    множество полезных инструментов для дизайнера,
    который хочет расти
    

    View Slide

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

    и дата-сайентиста
    Андрей Шапиро
    andrew@ashapiro.ru
    @xraizor
    That’s all folks!
    

    View Slide