Contributing to Open Source for Designers | Complete Guide

In 2023, the hypothetical design projects, redesigns and school projects might not be enough to impress with your portfolio and give you the experience and edge you need to get hired and recognized for work that you do as a designer. But what do you do if you're just starting out or transitioning into the design space? One of the easiest and most overlooked ways is by getting into Open Source.

Open Source Design Projects

Getting into open source is a great way for designers to gain real experience and work on real projects. But it's not often talked about in the design world, making it harder to get involved with. So I've collected everything you need to know as a designer and put it into this comprehensive guide to help you learn exactly what's involved and how you can start contributing to open source projects as a designer.

What is Open Source?

Open Source means software means that is designed and developed and made freely available for anyone to use, share, modify and build off of. It's a way that many developers and companies create software and products that rely on volunteer work, peer review and community production.

Open-source software licenses allow anyone to use the source code free of charge and for anyone to get involved with the creation and maintenance of it.

The keyword here is ANYONE. Anyone can contribute to it. These are real companies, and creators working on real products and you can just volunteer to get involved!

Working on an open source project is not only a great way to build a very impressive, real portfolio, but also a wonderful way to get practice working with others, helping real users, giving back to the tech community and gaining a good reputation for yourself.

So why aren’t more designers doing this?

Contributing to open source software really is a developer-led movement. Most of the open source software is developer lead and run and as such, focuses on the code contributions -- where there are always bugs to fix, code to update and features to be added and devs are recognized for their contributions by the community. But it’s not very popular or talked about much in the design space very much and there are a few reasons for this:

1. Designers don’t know it exists - designers don’t even realize they can get involved and contribute.
2. Designers don’t know how to find projects - especially quality ones
3. Designers don’t know how to contribute - they don’t know what they can contribute or about the hidden processes and guidelines.
4. Designers are afraid - of the unfamiliar technology, terminology and procedures involved - such as GitHub, commits, review cycles etc.
5. Designer tools are not well integrated - Many projects don't have a Figma file or library that designers can work on.

Despite this, there are so many open source projects that are in desperate need of a designer's expertise you just have to know how to find them, which ones to get involved in and how.

Things we'll cover

1. Understanding some new jargon and tech
2. Finding a project and getting familiar with it
3. Understanding the most important pillar of open source is - community
4. Common beginner mistakes so you can avoid them

Understanding some new jargon and tech

Anatomy of an Open Source Project

There are many different types of open source projects. Some of them may be volunteer only and others might even have paid positions or tasks. But generally, they tend to be setup in a similar way:

1. Open Source License - Every open source project has an Open source license you can usually find the license on the project's repository or by browsing through them. Open source licenses here.
2. README File - There will be a README documentation file. This is the manual that contains information about the project. It explains why the project was created and what's being done with it.
3. Contribution Guidelines -  This is the guide that contains directions for how to contribute and what’s expected from contributors. It might also contain tutorials for further guidance.
4. Code of Conduct - This contains community guidelines and rules. This will help you know how to communicate and respect your fellow contributors.
5. Issue tracker - This is where you keep track of work done on Github and where all of the development happens.
6. A chat channel: Not always, but in most cases, there will be a community chat (on a slack channel, discord group, or discussion channel on GitHub). This is way for everyone involved in the project to communicate asynchronously and coordinate what needs to be done on the project.

Open source roles

There are a few designated roles and responsibilities when it comes to open source projects that help keep things moving smoothly.

Author: The person or organization that created the project

Owner: Those with administrative control over the project’s repository (This may or may not be the author).

Maintainer: Those responsible for managing and driving the overall project vision and keeping things moving.

Contributor: Anyone that helps out or gets involved in contributing to the project.

Members: Anyone who uses the project.

What designers should know about GitHub

Projects like these live on Github. Github is a versioning system that acts as a code repository, issue tracker and project management system all in one.

GitHub is such a huge part of bringing our products to life, yet very few designers, UX/UI/Product designers even know what it is or how it works:

Git is an open-source, version control system for code that is accessed via the command-line.

GitHub is a platform/service created to give developers a cloud-based interface to make it more user-friendly to interact with these tracked changes without having to use the command-line.

Every time a developer deploys their code, the changes are tracked so that they can revert to previous versions of their codebase and create other branches and do all of this stuff non-destructively.

Similarly to being able to view and interact with previous iterations of our design mockups in Figma’s version history, this is what GitHub allows developers to do with their code.

Open-source developers love GitHub because it allows them to find and contribute to projects the same way that the Figma community allows designers to find and use UI kits, plugins and other free open-source design assets and in much the same way a designer’s portfolio shows off our work and our process, a devs GitHub profile tells the story of their work through their code contributions.

You can access Github via your browser or by downloading the app to your desktop.

What can a designer contribute to an Open Source Project?

So how exactly can a designer get involved and contribute to these open source projects?

There are a number of different areas and ways that designers and non-coders can contribute to open source projects including

1. Help with branding
2. Creating logos
3. Designing landing pages for the product
4. Writing copy
5. Critiquing the usability or doing a UX audit
6. Creating user flows, designing the UI of a product or app
7. Improving the information architecture
8. Helping to improve the README file
9. Adding images and other design assets, resources or
10. Creating style guides or UI kits

and that's just to name a few!

How can a designer find a good Open Source Project?

The next thing you'll want to do is find a project that needs a designer or non-coders help.

One place to find these projects is by searching GitHub. To do this go to going to github.com/open-source/ and then hovering on the Open Source dropdown. From there you can browse repositories by Topics, Trending and Collections.

Another great place to find lots of design-specific open source projects is on Open Source Design.net this is the best, most comprehensive resource for all things open source related to design. They have compiled an awesome list of the best projects (such as WordPress, Mozilla, Mailpile and others that have very clear guidelines for designers on how contribute. Many of these projects also integrate nicely with design tools like Figma.

There is an amazing open source job board here as well with listings for open roles (both paid and volunteer). You'll find roles for UX/UI designers, visual designers, web designers, brand designers and more.

Another great way to find active projects is to reach out to companies that are building in the open source space and see if they need design contributions . Open Source Alternative To is a site that has an amazing collection of open source SaaS app.

Understanding the most important pillar of open source is

If there is one thing to understand about open source that it's all about community. Most of these communities exist on forums, in Slack channels or discord channels.

Once you find a project that you like, you can join their channel and connect directly with the people involved in the project and this is where all the collaboration and the fun start.

So if any of this is confusing to you or if you feel overwhelmed at any point, start with community-first. Find a project and join a discussion channel and start talking to others, they are always more than welcoming and happy to help you get involved and show you the ropes.

Common Beginner Mistakes

Here are some of the common mistakes that I see first-time contributors making to help you know what to expect and you journey into this space.  

1. Not treating it like a real project or job - these projects are real companies working on real software, so you’ve got to give it the respect and care it’s due.
2. Not checking out the project - Not all open source projects are the same. Take the time to understand if it's a good project fit for you, that you have the skills to get involved in and would enjoy investing the time working on it
3. Not documenting your process - If you want to add this to your portfolio or resume make sure you document your process as you work on it just like you would any real client project or UX/UI case study.
4. Not managing your time - It may take a little longer than expected to get involved if you’re a first-time contributor or someone whose never been involved in open source before, there are lots of other volunteers, review processes and checks and balances that project contributions have to go through so make sure to be patient and give it the time it needs. You may even have to submit proposals or applications for some projects or tasks just like a real job, especially if it’s a paid one. So be aware of this and think about the timeframe you want to be able to finish the project in and also how to budget your volunteer time accordingly.

My Favorite Open Souce Project

One of my very favorite open source projects to get involved in is WordPress.org. So many people use and rely on this awesome website creation and blogging platform--you've probably used it yourself, yet so few people realize that WordPress is completely open source.

WordPress is one of my favorite open source projects not only because of the wonderful, long-standing community, but because of just how well the guidelines are set up for designers to contribute.  

I've written a comprehensive guide on exactly how you can get involved in Open Source as a designer through WordPress.

Contributing to open source is really one of the most underrated and easily accessible ways to work on real projects and get real-world experience under your belt and in your portfolio.

Remember open source is all about community so have fun connecting and collaborating with others in the space!