Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

Andrew Shapiro

April 13, 2018
Tweet

More Decks by Andrew Shapiro

Other Decks in Design

Transcript

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Every Pixel, 

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

    View full-size slide

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

    View full-size slide

  11. github.com/x-raizor/epattern

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Задача: 

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

    sociograph.io

    View full-size slide

  28. Задача: 

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

    sociograph.io

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. Грамматика
    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 full-size slide

  43. Грамматика
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Грамматика 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    и дата-сайентиста
    Андрей Шапиро
    [email protected]
    @xraizor
    That’s all folks!

    View full-size slide