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
2. Hi, I’m Coby. @cobyism online.
3. 
5. It’s not very common to find designers working in open source. STATUS QUO
6. It can be intimidating to try and get started with open source. STATUS QUO
7. It’s not very intuitive to know where to find help and resources. STATUS QUO
8. Good tools are lacking for designers working in open source. STATUS QUO
9. Lower perceived barriers to contributing to open source projects. GOALS
10. Give you some direction with clear examples and useful resources. GOALS
11. Share approachable tools that make building amazing stuff awesome. GOALS
12. What does open source soware even mean? Infrequently Asked Question™
13. Open Source Soware What even is:
14. Open Source Soware What even is:
15. Native applications are soware.
16. Mobile applications are soware.
17. Web applications are soware.
18. Websites are soware.
19. Themes and plugins are soware.
20. Frameworks are soware.
21. Documentation is soware.
22. Ideas and specs can be soware.
23. Books & knowledge can be soware.
24. Open Source Soware What even is:
25. Free as in beer. Open Source (usually) means…
26. Free as in speech. Open Source (usually) means…
27. Built by a community. Open Source (usually) means…
28. Improvements are shared. Open Source (usually) means…
29. right-click! The web has always been open.
30. “view source” for everything. front-end web code mobile apps native apps back-end web code systems code VIEW SOURCE docs, ideas & knowledge
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
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
33. How does design fit into open source? Infrequently Asked Question™
34. We oen appear secretive about our design process. Designers
35. “Thanks for your input, let me go away and work on that for you.” One Mindset
36. READ THIS ARTICLE hp://37signals.com/svn/posts/2928-designing-in-the-open
37. Labels are bullshit. DIGRESSION
38. Closing disciplines off from one another is a recipe for disaster. DIGRESSION Labels are bullshit.
39. People’s skillsets just fall on different parts of a wide spectrum. DIGRESSION Labels are bullshit.
40. Case in point: @github/designers DIGRESSION Labels are bullshit.
41. Case in point: @github/designers DIGRESSION Labels are bullshit.
42. Design is a philosophy, not a profession. DIGRESSION Labels are bullshit.
43. Engineering is a philosophy, not a profession. DIGRESSION Labels are bullshit.
44. If the end product is quality soware, Designers, why can’t you code? DIGRESSION Labels are bullshit. — Kyle Neath @kneath
45. If the end product is quality soware, Engineers, why can’t you design? DIGRESSION Labels are bullshit. — Kyle Neath @kneath
46. Move past labels and focus on the quality of the end result. DIGRESSION Labels are bullshit.
47. Design is as necessary as engineering in the realm of open source. An Answer
48. We need to get comfortable working in the open. The question now becomes How?
49. There are more ways to contribute other than commiing code. Fun Fact
50. Help improve docs. Read the docs, suggest improvements.
51. Actually try stuff out. Follow instructions, file issues if things break.
52. Help triage. Replicate, verify, and clarify others’ issues.
53. Review others’ code. See if you can spot room for improvement. Evven pointing out typos is handy.
54. Discuss features Talk about features you’d love to see.
55. Share your experiences. Write publicly about what it’s like to use.
56. Create mockups. Help people visualise just how amazing things could be.
57. Designing in the open is easier using code. Hypothesis
58. Design in the browser. DIGRESSION
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/
60. Web inspector. DIGRESSION Designing in the browser. Live debugging your CSS and JS awesome.
61. CSS3, Sass, Less. DIGRESSION Designing in the browser. Radii, shadows, variables, colour math, mixins, includes. It’s all awesome.
62. Real font rendering. DIGRESSION Designing in the browser. It’s no longer such a shitshow.
63. Retina. DIGRESSION Designing in the browser. Having things not look like a blurry, pixelated mess is awesome.
64. Icon fonts. DIGRESSION Designing in the browser. Not having to use images awesome.
65. Web fonts. DIGRESSION Designing in the browser. Having options is awesome.
66. Version control. DIGRESSION Designing in the browser. Having a design history is awesome.
67. Interaction design. DIGRESSION Designing in the browser. Designing for transitions, loading states, taps, swipes, and zooms is awesome.
68. Multi-device. DIGRESSION Designing in the browser. Going back to a responsive web is awesome.
69. Responsiveness. DIGRESSION Designing in the browser. How it performs is the experience.
70. Ways you can begin designing in open source today. Opportunities
71. Documentation sites. Just about every project needs one.
72. Angry redesigns. Make something horrible suck less.
73. Create frameworks. Done something more than once lately?
74. Themes and plugins. Use a text editor? Use a CMS?
75. Graphs. Make publicly available data interesting. Also: d3.js is ridiculously cool.
76. Design for designers. Developers oen develop for developers. Why don’t designers design for designers?
77. Portfolio pieces. Build stuff for your portfolio.
78. Non-portfolio pieces. Build the things you want to build anyway.
79. Open source type. Ever wanted to try type design?
80. Emoji. These things maer, damnit! hps://github.com/github/gemoji
81. Things that make designing in the open easy and fun. Tools
82. Jekyll Static site generator. HTML with includes, layouts, variables etc. Understands Markdown, knows about blogs. hp://jekyllrb.com
83. GitHub Pages Free site hosting. Because fuck FTP. hp://pages.github.com
84. Heroku Free app hosting. Because fuck PHP. hp://heroku.com
85. GitHub for education. We offer free accounts for students and professors to have private repositories.
86. GitHub web flow Create a branch. Create, edit, move, rename, and delete files. Open a Pull Request. Merge the branch. Delete the branch.
87. Image diffs Seriously useful if you work with images.
88. GitHub for Mac mac.github.com
89. GitHub for Windows windows.github.com
90. How to learn, improve, and find help when you get stuck. Resources
91. Everything weekly. Subscribe to all of the web newsleers. Warning: can be noisy.
92. Google is your friend. Google your error, find the stackoverflow link.
93. Stackoverflow.com Google your error, find the stackoverflow link.
94. Mozilla MDN Because it’s not w3schools.
95. Examine frameworks. Learn how they did it.
96. Mentoring hp://mentoring.is
97. Contribute to an open source project by this time next week. My challenge to you
98. Let’s talk coby@github.com @cobyism