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

Designing with GitHub

Steve Smith
April 02, 2014

Designing with GitHub

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

Steve Smith

April 02, 2014
Tweet

More Decks by Steve Smith

Other Decks in Design

Transcript

  1. Designing with GitHub

    View full-size slide

  2. Hi, I’m Steve
    @orderedlist

    View full-size slide

  3. How our Designers Work

    View full-size slide

  4. Who are we?
    28 designers, many disciplines

    View full-size slide

  5. HTML/CSS
    Front-end designers, developers

    View full-size slide

  6. Native Applications
    Desktop, iOS, Android

    View full-size slide

  7. Illustration
    Octocats, animations, branding

    View full-size slide

  8. Print Material
    Marketing, business ops

    View full-size slide

  9. Video
    Marketing, education, events

    View full-size slide

  10. Research
    User studies, product research

    View full-size slide

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

    View full-size slide

  12. Words
    Yes, words

    View full-size slide

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

    View full-size slide

  14. Photoshop
    Dem PSDs

    View full-size slide

  15. Sketch
    The software, and the book

    View full-size slide

  16. Illustrator
    Vector Victor

    View full-size slide

  17. Web Browsers
    Inspectors man…

    View full-size slide

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

    View full-size slide

  19. Text Chat
    Campfire, Hubot

    View full-size slide

  20. Video Chat
    Google Hangouts, BlueJeans

    View full-size slide

  21. GitHub
    Use GitHub to design GitHub

    View full-size slide

  22. How we Collaborate
    Design better together

    View full-size slide

  23. Serendipitous Interactions
    Great ideas from unexpected places

    View full-size slide

  24. Annual Summit
    Everyone in one place

    View full-size slide

  25. Team Mini-summits
    Strategy and planning

    View full-size slide

  26. Face to Face Contact
    Understand tone and personality

    View full-size slide

  27. Remote Working
    ~70% of GitHub is remote

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Family Life
    Allows for family freedom

    View full-size slide

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

    View full-size slide

  34. But How?
    How do you ensure productivity?

    View full-size slide

  35. Remote First Mindset
    Assume remote in most situations

    View full-size slide

  36. Communication
    Use your words

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Chat Rooms
    We have a lot of them

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. GitHub Team
    Our Internal Status App

    View full-size slide

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

    View full-size slide

  45. And of Course, GitHub
    Communication with results

    View full-size slide

  46. How we use GitHub
    Ideas and workflows

    View full-size slide

  47. Teams
    Permissions, mentions, notifications

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. Issues
    For problems, not solutions

    View full-size slide

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

    View full-size slide

  52. Markdown Files
    Text with benefits

    View full-size slide

  53. History
    See changes to project direction over time

    View full-size slide

  54. Discussion
    See the thoughts that lead to conclusions

    View full-size slide

  55. Pull Requests
    A workflow for proposing changes

    View full-size slide

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

    View full-size slide

  57. Deal with it, it’s not difficult

    View full-size slide

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

    View full-size slide

  59. How Design Works

    View full-size slide

  60. GitHub Zen
    Finding your design center

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. Mind Your Words
    They are important

    View full-size slide

  64. Communicate Concisely
    Your customers deserve it

    View full-size slide

  65. Communicate Thoughtfully
    Your colleagues deserve it

    View full-size slide

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

    View full-size slide

  67. Speak Like a Human
    Please

    View full-size slide

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

    View full-size slide

  69. Block by Interruption
    Confirmation, popups, dialogs

    View full-size slide

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

    View full-size slide

  71. Block by Complication
    Requiring too much from the user

    View full-size slide

  72. Favor Focus Over Features
    Say no to things

    View full-size slide

  73. 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 full-size slide

  74. Anything Added Dilutes
    Everything Else
    Be careful about additions

    View full-size slide

  75. 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 full-size slide

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

    View full-size slide

  77. Wrapping Up
    A Few Key Points

    View full-size slide

  78. Communication is Important
    For your designs and your colleagues

    View full-size slide

  79. Design Happens Anywhere
    Not just your office

    View full-size slide

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

    View full-size slide

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

    View full-size slide