The Open Source Designer's ToolBox
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Makolo, Abigail
As designers get introduced to FOSS, what should they know? What techniques and tools would they need, and why? This talk will explore a recommended guide to developing a productive open source design workflow.
 Hi everyone, welcome to FOSDEM 2021 Open Source Design Dev Room. My name is Abigail McCorrell and I will be talking to you about the Open Source Designers to the box. Basically, recommended techniques and tools for Open Source Designers. Now when I thought about speaking on this topic, I had no idea how I was going to structure this toolbox because there is a variety of information and resources that are relevant to designers contributing to Open Source. So I have this idea to keep it simple and just make it something that every Open Source designer can refer to when thinking of their own strategy for contributing to Open Source. So we would start by trying to understand what Open Source Designers is all about and this is basically how I have defined this. It involves introducing creative problem-solving processes to projects that are free and open to read, modify and share. So it is really Open Source plus design and while preparing these presentations, of course, I searched for a definition of Open Source Design but it's not surprising that I didn't find a lot of information on that because Open Source Design is an emerging space and it is nice to see more people get interested in what designers are doing and can do for Open Source software. So this is how I understand Open Source Design and I hope that it has captured the concept of making Open Source Design contributions. So now that we know what OSD is about, what should you know as an Open Source designer? Well, you should know how to communicate just by virtue of being a designer. You can already expect that there will be barriers to participating in the Open Source community. This is because Open Source is more focused on programming and coding and that is how it has been for a while. So there is a lot of tech juggling that most designers don't understand like IRC, GitHub or Git or version control. These things are not terms that designers are familiar with and that can be quite discouraging but you should know as a designer how to communicate and present your ideas, put them forward or put yourself forward in a way that you can build your identity and help people get to know you, understand your ideas and hopefully get your ideas accepted. So when you post messages in the team chat or you have conversations with other team members, you want to make sure your messages are comprehensible, make sure people can understand what you're asking about and you also want to make sure you've done good research beforehand so you don't weigh down other team members. So making sure your messages are easy to understand helps it, makes it easier for people to respond to you quickly and want to offer their help and all of this helps you to get integrated into the community. So beyond community, I think also know how to engage and become a part of the community. It shouldn't be one-sided, you know, always seeking advice or feedback, give back to the open source community. Now most of these communities have events that they have scheduled regularly so try to attend those events because you get to network with other members on your team. You can also give feedback and also get feedback from these team members and very important too is the fact that you can suggest improvements for the team or for the project, you know, how to make it better. These events really give you an opportunity to do so. So trying to become a part of the community really helps you to build an identity for yourself as we mentioned earlier. That identity definitely facilitates your contribution or your work. So definitely know how to contribute. This is what many designers look forward to when they ask about contributing to open source design. Just getting into the mitigations of the design work and that is great. If you're just going into open source design, you can explore some good first design issues like conducting a unistic evaluation of the project user interface. You can design empathy maps and personas based on any existing user research data. It really helps to get other team members in the room and help them understand who the project is being designed for and put themselves in their shoes. You can design sticker sheets or style guides or design systems which help the design team to work together, collaborate and really helps the project design to be more consistent, to have a more consistent look and feel. And if you're more visual design inclined, then you can definitely design some branding assets, logos, t-shirts, things that can help the brand image of the project to really stand out. Before I come to document, one thing I'm making contributions is in open source, it's always quality over quantity. So you don't want to be the first to make so many design contributions that don't really make sense or that don't add any value to the project. So make sure you're solving a problem and trying to solve for that problem. It's always about the quality, the value you can do about that project. It's not just for the sake of contributing or opening design issues and all that. So document, document, as designers we document everything because we know we definitely cannot rely on our human will, maybe we can easily forget what design decisions were made and when or even why they were made. So we want to make sure that our design deliverables are presented and documented effectively. Some ways you can do that are by taking advantage of design labels. So the project already uses design labels, that is, it groups design issues based on categories like UX, UI, branding, research. Design labels really help to organize these design issues for others who may be looking to contribute in the future. And if the project doesn't already use design labels, then you can make that suggestion. You should also check if the project has a file, a contributing.mg file for design, somewhere that designers can visit to see how they can make design contributions and how to get started and the points of contact. So you can always look up for that. You can claim design issues on GitHub as design challenges and this just means providing more context or information about that issue. So what is the problem you're trying to solve? Who are you solving this problem for? Who are you designing for? What solution or solutions are you exploring and how can you tell if those solutions are effective? How would you test the solution to see that it is successful? Adding this extra information to your design issues basically helps to give more background information and helps anyone to understand what the designer was thinking when they set up this challenge and it could know easily how to contribute to the problem or to the issue being solved. You should also use issue threads. So every design issue on GitHub would have a thread where conversations are not issue and maintain. So you don't need to take the conversation out of that thread but if you do, you want to add some pointers to that conversation in the thread because those threads are really useful for documenting progress and updates and decisions that were made on that issue. So issue threads are really a nice way to document progress on design issues. One thing I always encourage designers to do is to annotate their sketches and why it brings all user flows. So when you make those diagrams, you want to put some little notes that can help anyone understand what the process is and that way anyone can make a contribution or can give you valuable feedback, they don't even have to be designers because those notes are pretty much explained clearly and those notes can actually help you document the effects you put doing that. You should also explore there are a lot of free and open source tools and resources for you that you can use in your work. You can get free assets and all that but as you search, you want to understand the different types of licenses for these assets. Are they permissive licenses or not? Do they require attribution or not? So you should understand the different types of creative commons licenses so that you can very carefully use these assets because if you don't, you end up putting not just yourself at risk for the entire project. So you want to make sure that the assets you are using are well-licensed and you are able to use those assets in your work or in the project. So I have included a link to a webpage that explains the different types of creative commons assets that you should definitely look at. Grow. The great thing about open source design is it gives designers an opportunity to expand and to grow in their career so you can take part in open source internships or projects like Google Summer Code or Outreach which really gives designers the opportunity to contribute to open source. And it's a great experience because not only do you get to make meaningful contributions to actual open source projects but you get to interact with the community and see what it is like. You get to present your work and receive feedback or criticism on your work and you already get used to the whole open source phase. So you should definitely look out for that. And because we know that open source design is just coming off, you can advocate and let more people know about it and how to contribute to open source as designers. We definitely love to see more designers get involved in open source and make open source software more usable. So all of this will help you expand your portfolio not just as an open source designer but as a designer in general and that is really great for your career. So here are some tools and leaves that I have included for your reference. Some paper are some of my favorite tools in design but you can also use solve like trial.io for diagramming like your user flows and site maps. Figma and Adobe XP are prototyping tools that you can use for open source projects but it really depends on what tool has already been adopted for that project. So if a certain tool is already in use you want to try as much as possible to stick to that so that other team members can be on the same page with you. The choice of prototyping tool like I mentioned really does depend on what is already in use but if you feel something else will be better then you need to suggest it to the project maintainer. Panso is a free and open source prototyping tool that I just discovered. I think it's interesting and you can definitely check it out. Mixcape is a vector graphics editor but it's also free and open source. Lender is a free and open source 3D graphics tool. GIMP is a data manipulation and editing software that is also open source and free. And SynthVib is a 2D animation tool that's free and open source as well. These are just a few of the free and open source tools that are available for your use as an open source designer so you don't have to use that in expensive software just to contribute to open source. These tools are readily available and all the links you find here when you get the slides you can actually just click on them and you can take them to the web page for that tool or project. So these are some reads that I found pretty interesting. This paper on various space by new commons to open source projects would really help you understand some of those things you can expect as you start to get into the open source space and how you can overcome those challenges. Various designers is also a very nice article for designers and also for open source project maintenance it helps them see how they can encourage more designers to contribute to their open source projects. So here's the link to the 10 usability statistics you can use when conducting heuristic evaluations for an open source project UI. Some tools that is tools for better thinking. It's really nice for developing your problem solving and thinking capability as a designer and you should definitely check that out. Checklist design is a collection of checklists that help you make sure you're not forgetting any important elements when designing screens for your open source project. And open design now is a book that talks about open design which is a very similar concept to open source design. So reading this book would help you understand the future of design and open design as it is. And here's the link to CC licenses that help you understand different types of creative licenses and creative commons licenses are available and how you can take advantage of each one. So the great part is you can find more of these links on opensourcedesign.net slash resources. I feel this is a gold mine for every open source designer and it's definitely something that you should check out. You'll find a lot of free tools and resources that you can use in your work. So thanks to these amazing people. We have all these beautiful images I have showcased in my presentation and the resources were obtained from opensourcedesign.net. So thank you to these amazing people and thank you for listening to me while I talk to the open source designers toolbox. I hope that you will find some of these resources and tools beneficial and valuable in your work and I hope they encourage you to continue in your open source design career. You can find me on Twitter at abigel underscore mark or you can visit my website abigelmarkuru.com where you can find links to my other social media profile. So thank you for listening and I really do look forward to seeing more designers contribute to open source. Let's make open source more beautiful and usable. Thanks. Okay, the Q&A should be starting soon. I'm looking at the main room. Lots of claps. Okay, we are in the main room. We have a, there is a first question. It is, what are some good resources to find background images for websites and also icons? Do you have any recommendations, Abby? Yes, I would recommend on flash and text-a-bay and there is also the creative commons gallery. So I think there are links to that in my presentation slides as well. So there is a lot actually. Please, just stay with me. So lots of praise coming in for your talk and the presentation, like the layout of the presentation. I have a question if nobody else has a question. What do you want to see more of from designers in open source, Abby? I'd love to see more programs encouraging designers to contribute. So we have GSOC and outreach and as of the last time I checked out, I noticed there were a lot of projects for developers but not as many for designers and that was from very encouraging. So seeing more projects and programs like that, I'd also like to see more conversations between designers and contributors to a particular project and I'd also love to see more designers work collaboratively with other designers on projects that are just open design. I'd definitely love to see more of that. For sure. Yeah, me too. I cannot agree more about that last point about more designers collaborating together. We might get cut off really soon. So we're going to have a little bit of a break.
 Hi everyone, welcome to FOSDEM 2021 Open Source Design Dev Room.  My name is Abigail McCorrell and I will be talking to you about the Open Source Designers  to the box.  Basically, recommended techniques and tools for Open Source Designers.  Now when I thought about speaking on this topic, I had no idea how I was going to structure  this toolbox because there is a variety of information and resources that are relevant  to designers contributing to Open Source.  So I have this idea to keep it simple and just make it something that every Open Source  designer can refer to when thinking of their own strategy for contributing to Open Source.  So we would start by trying to understand what Open Source Designers is all about and  this is basically how I have defined this.  It involves introducing creative problem-solving processes to projects that are free and open  to read, modify and share.  So it is really Open Source plus design and while preparing these presentations, of course,  I searched for a definition of Open Source Design but it's not surprising that I didn't  find a lot of information on that because Open Source Design is an emerging space and  it is nice to see more people get interested in what designers are doing and can do for  Open Source software.  So this is how I understand Open Source Design and I hope that it has captured the concept  of making Open Source Design contributions.  So now that we know what OSD is about, what should you know as an Open Source designer?  Well, you should know how to communicate just by virtue of being a designer.  You can already expect that there will be barriers to participating in the Open Source  community.  This is because Open Source is more focused on programming and coding and that is how  it has been for a while.  So there is a lot of tech juggling that most designers don't understand like IRC, GitHub  or Git or version control.  These things are not terms that designers are familiar with and that can be quite discouraging  but you should know as a designer how to communicate and present your ideas, put them forward or  put yourself forward in a way that you can build your identity and help people get to  know you, understand your ideas and hopefully get your ideas accepted.  So when you post messages in the team chat or you have conversations with other team  members, you want to make sure your messages are comprehensible, make sure people can understand  what you're asking about and you also want to make sure you've done good research beforehand  so you don't weigh down other team members.  So making sure your messages are easy to understand helps it, makes it easier for people to respond  to you quickly and want to offer their help and all of this helps you to get integrated  into the community.  So beyond community, I think also know how to engage and become a part of the community.  It shouldn't be one-sided, you know, always seeking advice or feedback, give back to the  open source community.  Now most of these communities have events that they have scheduled regularly so try  to attend those events because you get to network with other members on your team.  You can also give feedback and also get feedback from these team members and very important  too is the fact that you can suggest improvements for the team or for the project, you know,  how to make it better.  These events really give you an opportunity to do so.  So trying to become a part of the community really helps you to build an identity for  yourself as we mentioned earlier.  That identity definitely facilitates your contribution or your work.  So definitely know how to contribute.  This is what many designers look forward to when they ask about contributing to open source  design.  Just getting into the mitigations of the design work and that is great.  If you're just going into open source design, you can explore some good first design issues  like conducting a unistic evaluation of the project user interface.  You can design empathy maps and personas based on any existing user research data.  It really helps to get other team members in the room and help them understand who the  project is being designed for and put themselves in their shoes.  You can design sticker sheets or style guides or design systems which help the design team  to work together, collaborate and really helps the project design to be more consistent,  to have a more consistent look and feel.  And if you're more visual design inclined, then you can definitely design some branding  assets, logos, t-shirts, things that can help the brand image of the project to really stand  out.  Before I come to document, one thing I'm making contributions is in open source, it's always  quality over quantity.  So you don't want to be the first to make so many design contributions that don't really  make sense or that don't add any value to the project.  So make sure you're solving a problem and trying to solve for that problem.  It's always about the quality, the value you can do about that project.  It's not just for the sake of contributing or opening design issues and all that.  So document, document, as designers we document everything because we know we definitely cannot  rely on our human will, maybe we can easily forget what design decisions were made and  when or even why they were made.  So we want to make sure that our design deliverables are presented and documented effectively.  Some ways you can do that are by taking advantage of design labels.  So the project already uses design labels, that is, it groups design issues based on  categories like UX, UI, branding, research.  Design labels really help to organize these design issues for others who may be looking  to contribute in the future.  And if the project doesn't already use design labels, then you can make that suggestion.  You should also check if the project has a file, a contributing.mg file for design,  somewhere that designers can visit to see how they can make design contributions and  how to get started and the points of contact.  So you can always look up for that.  You can claim design issues on GitHub as design challenges and this just means providing more  context or information about that issue.  So what is the problem you're trying to solve?  Who are you solving this problem for?  Who are you designing for?  What solution or solutions are you exploring and how can you tell if those solutions are  effective?  How would you test the solution to see that it is successful?  Adding this extra information to your design issues basically helps to give more background  information and helps anyone to understand what the designer was thinking when they set  up this challenge and it could know easily how to contribute to the problem or to the  issue being solved.  You should also use issue threads.  So every design issue on GitHub would have a thread where conversations are not issue  and maintain.  So you don't need to take the conversation out of that thread but if you do, you want  to add some pointers to that conversation in the thread because those threads are really  useful for documenting progress and updates and decisions that were made on that issue.  So issue threads are really a nice way to document progress on design issues.  One thing I always encourage designers to do is to annotate their sketches and why it  brings all user flows.  So when you make those diagrams, you want to put some little notes that can help anyone  understand what the process is and that way anyone can make a contribution or can give  you valuable feedback, they don't even have to be designers because those notes are pretty  much explained clearly and those notes can actually help you document the effects you  put doing that.  You should also explore there are a lot of free and open source tools and resources for  you that you can use in your work.  You can get free assets and all that but as you search, you want to understand the different  types of licenses for these assets.  Are they permissive licenses or not?  Do they require attribution or not?  So you should understand the different types of creative commons licenses so that you  can very carefully use these assets because if you don't, you end up putting not just  yourself at risk for the entire project.  So you want to make sure that the assets you are using are well-licensed and you are able  to use those assets in your work or in the project.  So I have included a link to a webpage that explains the different types of creative commons  assets that you should definitely look at.  Grow.  The great thing about open source design is it gives designers an opportunity to expand  and to grow in their career so you can take part in open source internships or projects  like Google Summer Code or Outreach which really gives designers the opportunity to  contribute to open source.  And it's a great experience because not only do you get to make meaningful contributions  to actual open source projects but you get to interact with the community and see what  it is like.  You get to present your work and receive feedback or criticism on your work and you already  get used to the whole open source phase.  So you should definitely look out for that.  And because we know that open source design is just coming off, you can advocate and let  more people know about it and how to contribute to open source as designers.  We definitely love to see more designers get involved in open source and make open source  software more usable.  So all of this will help you expand your portfolio not just as an open source designer but as  a designer in general and that is really great for your career.  So here are some tools and leaves that I have included for your reference.  Some paper are some of my favorite tools in design but you can also use solve like trial.io  for diagramming like your user flows and site maps.  Figma and Adobe XP are prototyping tools that you can use for open source projects but it  really depends on what tool has already been adopted for that project.  So if a certain tool is already in use you want to try as much as possible to stick to  that so that other team members can be on the same page with you.  The choice of prototyping tool like I mentioned really does depend on what is already in use  but if you feel something else will be better then you need to suggest it to the project  maintainer.  Panso is a free and open source prototyping tool that I just discovered.  I think it's interesting and you can definitely check it out.  Mixcape is a vector graphics editor but it's also free and open source.  Lender is a free and open source 3D graphics tool.  GIMP is a data manipulation and editing software that is also open source and free.  And SynthVib is a 2D animation tool that's free and open source as well.  These are just a few of the free and open source tools that are available for your use  as an open source designer so you don't have to use that in expensive software just to  contribute to open source.  These tools are readily available and all the links you find here when you get the slides  you can actually just click on them and you can take them to the web page for that tool  or project.  So these are some reads that I found pretty interesting.  This paper on various space by new commons to open source projects would really help  you understand some of those things you can expect as you start to get into the open source  space and how you can overcome those challenges.  Various designers is also a very nice article for designers and also for open source project  maintenance it helps them see how they can encourage more designers to contribute to  their open source projects.  So here's the link to the 10 usability statistics you can use when conducting heuristic evaluations  for an open source project UI.  Some tools that is tools for better thinking.  It's really nice for developing your problem solving and thinking capability as a designer  and you should definitely check that out.  Checklist design is a collection of checklists that help you make sure you're not forgetting  any important elements when designing screens for your open source project.  And open design now is a book that talks about open design which is a very similar concept  to open source design.  So reading this book would help you understand the future of design and open design as it  is.  And here's the link to CC licenses that help you understand different types of creative  licenses and creative commons licenses are available and how you can take advantage of  each one.  So the great part is you can find more of these links on opensourcedesign.net slash resources.  I feel this is a gold mine for every open source designer and it's definitely something  that you should check out.  You'll find a lot of free tools and resources that you can use in your work.  So thanks to these amazing people.  We have all these beautiful images I have showcased in my presentation and the resources  were obtained from opensourcedesign.net.  So thank you to these amazing people and thank you for listening to me while I talk to the  open source designers toolbox.  I hope that you will find some of these resources and tools beneficial and valuable in your work  and I hope they encourage you to continue in your open source design career.  You can find me on Twitter at abigel underscore mark or you can visit my website abigelmarkuru.com  where you can find links to my other social media profile.  So thank you for listening and I really do look forward to seeing more designers contribute  to open source.  Let's make open source more beautiful and usable.  Thanks.  Okay, the Q&A should be starting soon.  I'm looking at the main room.  Lots of claps.  Okay, we are in the main room.  We have a, there is a first question.  It is, what are some good resources to find background images for websites and also icons?  Do you have any recommendations, Abby?  Yes, I would recommend on flash and text-a-bay and there is also the creative commons gallery.  So I think there are links to that in my presentation slides as well.  So there is a lot actually.  Please, just stay with me.  So lots of praise coming in for your talk and the presentation, like the layout of the  presentation.  I have a question if nobody else has a question.  What do you want to see more of from designers in open source, Abby?  I'd love to see more programs encouraging designers to contribute.  So we have GSOC and outreach and as of the last time I checked out, I noticed there were  a lot of projects for developers but not as many for designers and that was from very  encouraging.  So seeing more projects and programs like that, I'd also like to see more conversations  between designers and contributors to a particular project and I'd also love to see more designers  work collaboratively with other designers on projects that are just open design.  I'd definitely love to see more of that.  For sure.  Yeah, me too.  I cannot agree more about that last point about more designers collaborating together.  We might get cut off really soon.  So we're going to have a little bit of a break.
the_open_source_designers_toolbox_0_179.png the_open_source_designers_toolbox_180_1547.png the_open_source_designers_toolbox_1548_3131.png the_open_source_designers_toolbox_3132_5519.png the_open_source_designers_toolbox_5520_6971.png the_open_source_designers_toolbox_6972_8903.png the_open_source_designers_toolbox_8904_8963.png the_open_source_designers_toolbox_8964_9779.png the_open_source_designers_toolbox_9780_14627.png the_open_source_designers_toolbox_14628_16103.png the_open_source_designers_toolbox_16104_18023.png the_open_source_designers_toolbox_18024_22739.png the_open_source_designers_toolbox_22740_22955.png the_open_source_designers_toolbox_22956_23003.png the_open_source_designers_toolbox_23004_23051.png the_open_source_designers_toolbox_23052_23099.png the_open_source_designers_toolbox_23100_23195.png the_open_source_designers_toolbox_23196_23315.png the_open_source_designers_toolbox_23316_23651.png the_open_source_designers_toolbox_23652_25127.png the_open_source_designers_toolbox_25128_26075.png the_open_source_designers_toolbox_26076_26711.png the_open_source_designers_toolbox_26712_26927.png the_open_source_designers_toolbox_26928_27191.png the_open_source_designers_toolbox_27192_28187.png the_open_source_designers_toolbox_28188_28403.png the_open_source_designers_toolbox_28404_28524.png