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

Designing with GitHub

Designing with GitHub

Learn how our team at GitHub works, and how we think about design.

Steve Smith
PRO

April 02, 2014
Tweet

More Decks by Steve Smith

Other Decks in Design

Transcript

  1. Designing with GitHub

    View Slide

  2. Hi, I’m Steve
    @orderedlist

    View Slide

  3. How our Designers Work

    View Slide

  4. Who are we?
    28 designers, many disciplines

    View Slide

  5. HTML/CSS
    Front-end designers, developers

    View Slide

  6. Native Applications
    Desktop, iOS, Android

    View Slide

  7. Illustration
    Octocats, animations, branding

    View Slide

  8. Print Material
    Marketing, business ops

    View Slide

  9. Video
    Marketing, education, events

    View Slide

  10. Research
    User studies, product research

    View Slide

  11. Our Tool Belt
    What we use to do what we do

    View Slide

  12. Words
    Yes, words

    View Slide

  13. In order to communicate visually
    to your users, you must be able to
    communicate verbally to
    your team.

    View Slide

  14. Photoshop
    Dem PSDs

    View Slide

  15. Sketch
    The software, and the book

    View Slide

  16. Illustrator
    Vector Victor

    View Slide

  17. Web Browsers
    Inspectors man…

    View Slide

  18. Text Editors
    Atom, Sublime, Emacs, etc.

    View Slide

  19. Text Chat
    Campfire, Hubot

    View Slide

  20. Video Chat
    Google Hangouts, BlueJeans

    View Slide

  21. GitHub
    Use GitHub to design GitHub

    View Slide

  22. How we Collaborate
    Design better together

    View Slide

  23. Serendipitous Interactions
    Great ideas from unexpected places

    View Slide

  24. Annual Summit
    Everyone in one place

    View Slide

  25. Team Mini-summits
    Strategy and planning

    View Slide

  26. Face to Face Contact
    Understand tone and personality

    View Slide

  27. Remote Working
    ~70% of GitHub is remote

    View Slide

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

    View Slide

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

    View Slide

  30. 243 GitHubbers
    103 cities, as of 9pm yesterday

    View Slide

  31. Freedom to Travel
    Experience the world, while staying productive

    View Slide

  32. View Slide

  33. Family Life
    Allows for family freedom

    View Slide

  34. View Slide

  35. Personal Happiness
    Some people don’t want to live where you do, and that’s ok

    View Slide

  36. But How?
    How do you ensure productivity?

    View Slide

  37. Remote First Mindset
    Assume remote in most situations

    View Slide

  38. Communication
    Use your words

    View Slide

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

    View Slide

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

    View Slide

  41. Give People Time to Respond
    Patience is a virtue, and all that

    View Slide

  42. Chat Rooms
    We have a lot of them

    View Slide

  43. View Slide

  44. Everyone Uses Chat
    Even if you’re in the office

    View Slide

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

    View Slide

  46. View Slide

  47. GitHub Team
    Our Internal Status App

    View Slide

  48. View Slide

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

    View Slide

  50. And of Course, GitHub
    Communication with results

    View Slide

  51. How we use GitHub
    Ideas and workflows

    View Slide

  52. Teams
    Permissions, mentions, notifications

    View Slide

  53. View Slide

  54. View Slide

  55. Design-specific Repos
    Repos aren’t just for code

    View Slide

  56. Assets, sometimes
    Not always, but it can be great

    View Slide

  57. View Slide

  58. Issues
    For problems, not solutions

    View Slide

  59. View Slide

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

    View Slide

  61. Markdown Files
    Text with benefits

    View Slide

  62. History
    See changes to project direction over time

    View Slide

  63. Discussion
    See the thoughts that lead to conclusions

    View Slide

  64. Pull Requests
    A workflow for proposing changes

    View Slide

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

    View Slide

  66. Deal with it, it’s not difficult

    View Slide

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

    View Slide

  68. Questions?

    View Slide

  69. How Design Works

    View Slide

  70. GitHub Zen
    Finding your design center

    View Slide

  71. Features are Expensive
    Creation, maintenance, complexity, real estate

    View Slide

  72. Approachable is Better
    Than Simple
    Simple ideas don’t mean simple execution

    View Slide

  73. Mind Your Words
    They are important

    View Slide

  74. Communicate Concisely
    Your customers deserve it

    View Slide

  75. Communicate Thoughtfully
    Your colleagues deserve it

    View Slide

  76. Put Effort Into Your Words
    They are more important than your designs

    View Slide

  77. Speak Like a Human
    Please

    View Slide

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

    View Slide

  79. Block by Interruption
    Confirmation, popups, dialogs

    View Slide

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

    View Slide

  81. Block by Complication
    Requiring too much from the user

    View Slide

  82. View Slide

  83. Favor Focus Over Features
    Say no to things

    View Slide

  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

    View Slide

  85. View Slide

  86. Anything Added Dilutes
    Everything Else
    Be careful about additions

    View Slide

  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.

    View Slide

  88. Starting is Easy, Finishing is Hard
    The process of shipping is incredibly difficult

    View Slide

  89. Wrapping Up
    A Few Key Points

    View Slide

  90. Communication is Important
    For your designs and your colleagues

    View Slide

  91. Design Happens Anywhere
    Not just your office

    View Slide

  92. Backup Your Designs with Words
    Keep those words meaningful and documented

    View Slide

  93. Design Better Together
    It’s better than designing alone

    View Slide

  94. Questions?

    View Slide

  95. Thank you!

    View Slide