Designing with GitHub

Transcript

1. 1.

   Designing with GitHub

2. 2.

   Hi, I’m Steve @orderedlist

3. 3.

   How our Designers Work

4. 4.

   Who are we? 28 designers, many disciplines

5. 5.

   HTML/CSS Front-end designers, developers

6. 6.

   Native Applications Desktop, iOS, Android

7. 7.

   Illustration Octocats, animations, branding

8. 8.

   Print Material Marketing, business ops

9. 9.

   Video Marketing, education, events

10. 10.

    Research User studies, product research

11. 11.

    Our Tool Belt What we use to do what we

    do
12. 12.

    Words Yes, words

13. 13.

    In order to communicate visually to your users, you must

    be able to communicate verbally to your team.
14. 14.

    Photoshop Dem PSDs

15. 15.

    Sketch The software, and the book

16. 16.

    Illustrator Vector Victor

17. 17.

    Web Browsers Inspectors man…

18. 18.

    Text Editors Atom, Sublime, Emacs, etc.

19. 19.

    Text Chat Campfire, Hubot

20. 20.

    Video Chat Google Hangouts, BlueJeans

21. 21.

    GitHub Use GitHub to design GitHub

22. 22.

    How we Collaborate Design better together

23. 23.

    Serendipitous Interactions Great ideas from unexpected places

24. 24.

    Annual Summit Everyone in one place

25. 25.

    Team Mini-summits Strategy and planning

26. 26.

    Face to Face Contact Understand tone and personality

27. 27.

    Remote Working ~70% of GitHub is remote

28. 28.

    But Why? Isn’t it easier to work in an office?

29. 29.

    Good People are Everywhere Limiting to geography is, well, limiting

30. 30.

    243 GitHubbers 103 cities, as of 9pm yesterday

31. 31.

    Freedom to Travel Experience the world, while staying productive

32. 32.

    None
33. 33.

    Family Life Allows for family freedom

34. 34.

    None
35. 35.

    Personal Happiness Some people don’t want to live where you

    do, and that’s ok
36. 36.

    But How? How do you ensure productivity?

37. 37.

    Remote First Mindset Assume remote in most situations

38. 38.

    Communication Use your words

39. 39.

    Asynchronous Workflows Don’t assume people are available whenever you need

40. 40.

    Text is the Best Searchable, transcripts, notifications, etc.

41. 41.

    Give People Time to Respond Patience is a virtue, and

    all that
42. 42.

    Chat Rooms We have a lot of them

43. 43.

    None
44. 44.

    Everyone Uses Chat Even if you’re in the office

45. 45.

    /virtual office me Video chat for that in-office experience

46. 46.

    None
47. 47.

    GitHub Team Our Internal Status App

48. 48.

    None
49. 49.

    Don’t Email People No history, terrible threading, it’s just bad

50. 50.

    And of Course, GitHub Communication with results

51. 51.

    How we use GitHub Ideas and workflows

52. 52.

    Teams Permissions, mentions, notifications

53. 53.

    None
54. 54.

    None
55. 55.

    Design-specific Repos Repos aren’t just for code

56. 56.

    Assets, sometimes Not always, but it can be great

57. 57.

    None
58. 58.

    Issues For problems, not solutions

59. 59.

    None
60. 60.

    Design Documents and Projects Keep an up-to-date record of current

    efforts
61. 61.

    Markdown Files Text with benefits

62. 62.

    History See changes to project direction over time

63. 63.

    Discussion See the thoughts that lead to conclusions

64. 64.

    Pull Requests A workflow for proposing changes

65. 65.

    Woah, Woah, Woah I don’t want to use Git

66. 66.

    Deal with it, it’s not difficult

67. 67.

    Let Me Show You github.com/orderedlist/design-example-repo

68. 68.

    Questions?

69. 69.

    How Design Works

70. 70.

    GitHub Zen Finding your design center

71. 71.

    Features are Expensive Creation, maintenance, complexity, real estate

72. 72.

    Approachable is Better Than Simple Simple ideas don’t mean simple

    execution
73. 73.

    Mind Your Words They are important

74. 74.

    Communicate Concisely Your customers deserve it

75. 75.

    Communicate Thoughtfully Your colleagues deserve it

76. 76.

    Put Effort Into Your Words They are more important than

    your designs
77. 77.

    Speak Like a Human Please

78. 78.

    Non-blocking is Better Than Blocking Don’t get in people’s way

79. 79.

    Block by Interruption Confirmation, popups, dialogs

80. 80.

    Block by Overstimulation Over-design, too many options, distractions

81. 81.

    Block by Complication Requiring too much from the user

82. 82.

    None
83. 83.

    Favor Focus Over Features Say no to things

84. 84.

    Perfection is achieved, not when there is nothing more to

    add, but when there is nothing left to take away. Antoine de Saint-Exupery
85. 85.

    None
86. 86.

    Anything Added Dilutes Everything Else Be careful about additions

87. 87.

    When many good ideas present themselves, it's easy to become

    distracted. Don't let good ideas get in the way of great execution.
88. 88.

    Starting is Easy, Finishing is Hard The process of shipping

    is incredibly difficult
89. 89.

    Wrapping Up A Few Key Points

90. 90.

    Communication is Important For your designs and your colleagues

91. 91.

    Design Happens Anywhere Not just your office

92. 92.

    Backup Your Designs with Words Keep those words meaningful and

    documented
93. 93.

    Design Better Together It’s better than designing alone

94. 94.

    Questions?

95. 95.

    Thank you!