Design in the realm of Open Source

I gave this talk at Refresh Belfast (http://refreshbelfast.com) in August 2013, talking about how design fits into the realm of open source, with the aim of lowering some of the barriers for designers to contribute, and providing some direction and resources to help people get started.

Transcript

1. Design
   OPEN SOURCE
   In the realm of
   Refresh Belfast—August 2013
   @cobyism
   

   View Slide

2. Hi, I’m Coby.
   @cobyism online.
   

   View Slide

3. 
   

   View Slide

4. View Slide

5. It’s not very common
   to find designers working in open source.
   STATUS QUO
   

   View Slide

6. It can be intimidating
   to try and get started with open source.
   STATUS QUO
   

   View Slide

7. It’s not very intuitive
   to know where to find help and resources.
   STATUS QUO
   

   View Slide

8. Good tools are lacking
   for designers working in open source.
   STATUS QUO
   

   View Slide

9. Lower perceived barriers
   to contributing to open source projects.
   GOALS
   

   View Slide

10. Give you some direction
    with clear examples and useful resources.
    GOALS
    

    View Slide

11. Share approachable tools
    that make building amazing stuff awesome.
    GOALS
    

    View Slide

12. What does
    open source soware
    even mean?
    Infrequently Asked Question™
    

    View Slide

13. Open Source
    Soware
    What even is:
    

    View Slide

14. Open Source
    Soware
    What even is:
    

    View Slide

15. Native applications
    are soware.
    

    View Slide

16. Mobile applications
    are soware.
    

    View Slide

17. Web applications
    are soware.
    

    View Slide

18. Websites
    are soware.
    

    View Slide

19. Themes and plugins
    are soware.
    

    View Slide

20. Frameworks
    are soware.
    

    View Slide

21. Documentation
    is soware.
    

    View Slide

22. Ideas and specs
    can be soware.
    

    View Slide

23. Books & knowledge
    can be soware.
    

    View Slide

24. Open Source
    Soware
    What even is:
    

    View Slide

25. Free as in
    beer.
    Open Source (usually) means…
    

    View Slide

26. Free as in
    speech.
    Open Source (usually) means…
    

    View Slide

27. Built by a
    community.
    Open Source (usually) means…
    

    View Slide

28. Improvements
    are shared.
    Open Source (usually) means…
    

    View Slide

29. right-click!
    The web
    has always
    been open.
    

    View Slide

30. “view source” for everything.
    front-end
    web code
    mobile
    apps
    native
    apps
    back-end
    web code
    systems
    code
    VIEW SOURCE
    docs,
    ideas &
    knowledge
    

    View Slide

31. “view source” for everything.
    front-end
    web code
    mobile
    apps
    native
    apps
    back-end
    web code
    systems
    code
    VIEW SOURCE
    docs,
    ideas &
    knowledge
    OPEN SOURCE
    

    View Slide

32. “view source” for everything.
    front-end
    web code
    mobile
    apps
    native
    apps
    back-end
    web code
    systems
    code
    VIEW SOURCE
    docs,
    ideas &
    knowledge
    OPEN SOURCE
    

    View Slide

33. How does design fit
    into open source?
    Infrequently Asked Question™
    

    View Slide

34. We oen appear
    secretive about our
    design process.
    Designers
    

    View Slide

35. “Thanks for your input,
    let me go away and work
    on that for you.”
    One Mindset
    

    View Slide

36. READ THIS ARTICLE
    hp://37signals.com/svn/posts/2928-designing-in-the-open
    

    View Slide

37. Labels are bullshit.
    DIGRESSION
    

    View Slide

38. Closing disciplines off
    from one another is a
    recipe for disaster.
    DIGRESSION Labels are bullshit.
    

    View Slide

39. People’s skillsets just fall
    on different parts of
    a wide spectrum.
    DIGRESSION Labels are bullshit.
    

    View Slide

40. Case in point:
    @github/designers
    DIGRESSION Labels are bullshit.
    

    View Slide

41. Case in point:
    @github/designers
    DIGRESSION Labels are bullshit.
    

    View Slide

42. Design is a philosophy,
    not a profession.
    DIGRESSION Labels are bullshit.
    

    View Slide

43. Engineering is a philosophy,
    not a profession.
    DIGRESSION Labels are bullshit.
    

    View Slide

44. If the end product is quality soware,
    Designers, why can’t you code?
    DIGRESSION Labels are bullshit.
    — Kyle Neath @kneath
    

    View Slide

45. If the end product is quality soware,
    Engineers, why can’t you design?
    DIGRESSION Labels are bullshit.
    — Kyle Neath @kneath
    

    View Slide

46. Move past labels and focus on
    the quality of the end result.
    DIGRESSION Labels are bullshit.
    

    View Slide

47. Design is as necessary
    as engineering in the
    realm of open source.
    An Answer
    

    View Slide

48. We need to
    get comfortable
    working in the open.
    The question now becomes How?
    

    View Slide

49. There are more ways to
    contribute other than
    commiing code.
    Fun Fact
    

    View Slide

50. Help improve docs.
    Read the docs, suggest improvements.
    

    View Slide

51. Actually try stuff out.
    Follow instructions, file issues if things break.
    

    View Slide

52. Help triage.
    Replicate, verify, and clarify others’ issues.
    

    View Slide

53. Review others’ code.
    See if you can spot room for improvement.
    Evven pointing out typos is handy.
    

    View Slide

54. Discuss features
    Talk about features you’d love to see.
    

    View Slide

55. Share your experiences.
    Write publicly about what it’s like to use.
    

    View Slide

56. Create mockups.
    Help people visualise just how
    amazing things could be.
    

    View Slide

57. Designing in the open
    is easier using code.
    Hypothesis
    

    View Slide

58. Design in the browser.
    DIGRESSION
    

    View Slide

59. A design should start
    where it’s going to live:
    in the browser.
    DIGRESSION Designing in the browser.
    — Meagan Fisher @owltastic
    hp://24ways.org/2009/make-your-mockup-in-markup/
    

    View Slide

60. Web inspector.
    DIGRESSION Designing in the browser.
    Live debugging your CSS and JS awesome.
    

    View Slide

61. CSS3, Sass, Less.
    DIGRESSION Designing in the browser.
    Radii, shadows, variables, colour math,
    mixins, includes. It’s all awesome.
    

    View Slide

62. Real font rendering.
    DIGRESSION Designing in the browser.
    It’s no longer such a shitshow.
    

    View Slide

63. Retina.
    DIGRESSION Designing in the browser.
    Having things not look like a
    blurry, pixelated mess is awesome.
    

    View Slide

64. Icon fonts.
    DIGRESSION Designing in the browser.
    Not having to use images awesome.
    

    View Slide

65. Web fonts.
    DIGRESSION Designing in the browser.
    Having options is awesome.
    

    View Slide

66. Version control.
    DIGRESSION Designing in the browser.
    Having a design history is awesome.
    

    View Slide

67. Interaction design.
    DIGRESSION Designing in the browser.
    Designing for transitions, loading states,
    taps, swipes, and zooms is awesome.
    

    View Slide

68. Multi-device.
    DIGRESSION Designing in the browser.
    Going back to a responsive web is awesome.
    

    View Slide

69. Responsiveness.
    DIGRESSION Designing in the browser.
    How it performs is the experience.
    

    View Slide

70. Ways you can begin
    designing in open
    source today.
    Opportunities
    

    View Slide

71. Documentation sites.
    Just about every project needs one.
    

    View Slide

72. Angry redesigns.
    Make something horrible suck less.
    

    View Slide

73. Create frameworks.
    Done something more than once lately?
    

    View Slide

74. Themes and plugins.
    Use a text editor? Use a CMS?
    

    View Slide

75. Graphs.
    Make publicly available data interesting.
    Also: d3.js is ridiculously cool.
    

    View Slide

76. Design for designers.
    Developers oen develop for developers.
    Why don’t designers design for designers?
    

    View Slide

77. Portfolio pieces.
    Build stuff for your portfolio.
    

    View Slide

78. Non-portfolio pieces.
    Build the things you want to build anyway.
    

    View Slide

79. Open source type.
    Ever wanted to try type design?
    

    View Slide

80. Emoji.
    These things maer, damnit!
    hps://github.com/github/gemoji
    

    View Slide

81. Things that make
    designing in the open
    easy and fun.
    Tools
    

    View Slide

82. Jekyll
    Static site generator.
    HTML with includes, layouts, variables etc.
    Understands Markdown, knows about blogs.
    hp://jekyllrb.com
    

    View Slide

83. GitHub Pages
    Free site hosting. Because fuck FTP.
    hp://pages.github.com
    

    View Slide

84. Heroku
    Free app hosting. Because fuck PHP.
    hp://heroku.com
    

    View Slide

85. GitHub for education.
    We offer free accounts for students and
    professors to have private repositories.
    

    View Slide

86. GitHub web flow
    Create a branch.
    Create, edit, move, rename, and delete files.
    Open a Pull Request.
    Merge the branch.
    Delete the branch.
    

    View Slide

87. Image diffs
    Seriously useful if you work with images.
    

    View Slide

88. GitHub for Mac
    mac.github.com
    

    View Slide

89. GitHub for Windows
    windows.github.com
    

    View Slide

90. How to learn, improve,
    and find help when
    you get stuck.
    Resources
    

    View Slide

91. Everything weekly.
    Subscribe to all of the web newsleers.
    Warning: can be noisy.
    

    View Slide

92. Google is your friend.
    Google your error, find the stackoverflow link.
    

    View Slide

93. Stackoverflow.com
    Google your error, find the stackoverflow link.
    

    View Slide

94. Mozilla MDN
    Because it’s not w3schools.
    

    View Slide

95. Examine frameworks.
    Learn how they did it.
    

    View Slide

96. Mentoring
    hp://mentoring.is
    

    View Slide

97. Contribute to an open
    source project by this
    time next week.
    My challenge to you
    

    View Slide

98. Let’s talk
    coby@github.com
    @cobyism
    

    View Slide