Open Source Collaboration Using GitHub As A Designer.

Kingsley Mkpandiok
6 min readJun 25, 2023

--

A Guide to Discovering Projects on GitHub and Making Contributions as a Non-Code Contributor.

Wondering if GitHub is relevant for designers? Curious about how designers can make use of this predominantly technical platform? Well, if you’re like me, a designer who has pondered these questions, then you’re in the right place.

Merriment Gif

I’ve had my fair share of confusion when some UX design roles required me to provide my GitHub profile. It felt strange because, although I had a profile, I hadn’t done anything noteworthy on GitHub to showcase.

However, about a year ago, I embarked on making open-source contributions to the CHAOSS project. Surprisingly, after a few months, some fellow contributors reached out to me, tagging me for design-related issues (Issues on GitHub serve as tasks, similar to a Trello board containing a list of various assignments. This means you can discover a wide range of tasks, including development, design, documentation, and more, providing ample opportunities to contribute in your preferred area of expertise.) on GitHub. This led me to open various design issues that required attention. To my amazement, I noticed my GitHub profile’s green charts and analytics come alive. What’s interesting is that I hadn’t written a single line of code or made any push or pull requests.

Take a look at the screenshot below 👇👇

GitHub profile’s green charts

In this article, I will guide you through a few steps on how to discover projects on GitHub as a non-code contributor, with a particular focus on design. However, these steps apply to any other tech stack, so don’t worry, it’s not overly complex.

To illustrate this, we will use the CHAOSS badging project repository as our case study. GitHub repositories serve as centralized locations where files, code, and project resources are stored, managed, and collaboratively developed.

DISCOVERING PROJECTS AND COLLABORATING ON GITHUB AS A NON-CODE CONTRIBUTOR

🎯 SEARCH FOR A PROJECT

To begin, if you don’t already have an account on GitHub, create one by signing up. Once you have your account ready, navigate to the search bar on GitHub and start searching for projects that align with your interests and aspirations. Popular projects like Drupal or Mozilla can serve as excellent starting points. Make the most of the search functionality and take advantage of the GitHub filter to refine your results, focusing on factors such as the repository, issues, ongoing discussions, and more.

If you have specific knowledge of the badging repository, you can manually input its name to refine your search. The accompanying screenshot showcases my search results, highlighting how you can further customize and modify the displayed outcomes using the available options on the left panel.

GitHub Search Result; Filter Result by Repositories
GitHub Search Result; Filter Result by Issues

As a non-code contributor, I highly recommend conducting a targeted search using relevant keywords that align with your field of expertise. This approach enables the search algorithm to effectively identify open issues and projects that are specifically related to your area of focus. By utilizing specific keywords, you can streamline your search and uncover opportunities that align with your skill set and interests. In the screenshot below, I utilized the keyword “UX Design” as an example. Feel free to click on the search result to delve deeper into the details of the issue.

🎯 STUDY THE PROJECT README.MD FILE

Once you have identified a promising project that ignites your desire to contribute, take a moment to read through the project’s Readme.md file before diving in. This invaluable resource holds vital information, including contribution guidelines, the project’s code of conduct, and in some cases, the Open Source License that verifies that the project is open-source. Familiarizing yourself with these details will provide you with a solid understanding of the project’s expectations and help you make meaningful contributions.

🎯 Find out if the task has been assigned

The essence of open source lies in collaboration, which means there will always be individuals contributing, expressing interest, or monitoring the project. To prevent conflicts, it is important to verify that the issue you wish to address has not already been assigned to someone else within the community. A reliable way to do this is by inquiring in the comment section of the specific issue on GitHub. This ensures a smooth and coordinated workflow while fostering a harmonious open-source community.

🎯 Time to Create Magic

Please note that GitHub does not provide direct design capabilities, so you’ll need to utilize your regular design tools after identifying a design task on the project to which you wish to contribute to. Once you have confirmed that the design task has not been assigned to anyone in the community, tools like Figma and Penpot can be valuable choices due to their collaborative features. Brand identity designers who use tools such as AI and Photoshop can work on their designs and export them to a shared drive accessible to other contributors. It is essential to include editable raw files, font folders, and any other design assets utilized in the project. You can either pin the drive link to the community discussion channel (e.g., Slack) or add it to a non-code contribution file on GitHub, as illustrated in the accompanying screenshot. If the project is open source, it is imperative to make the source files accessible for editing, modification, and other necessary actions.

In certain communities, contributors have dedicated workspaces where they can make their contributions, and design systems or style guides are already provided. To confirm the availability of such resources, you can openly inquire in the community channel or reach out to the design maintainer of the project you wish to contribute to. They will provide valuable insights on how to navigate this process, as each community operates according to its unique practices and guidelines.

🎯 Quick Takeaways

💡 Find/Search for a Project on GitHub.

💡 Look for a design task that you can handle in the “Issues” tab.

💡 Leave a comment on the issue to indicate your interest.

💡Once you receive approval from the project admin or maintainer, dive right into your design tool and create magic.

💡Always remember to make your work files accessible.

🎯 PROJECT RECOMMENDATIONS

🔗 CHAOSS DEI Badging Project

🔗 Layer5

🔗 Nextcloud

🔗 Opensauced

Now, I eagerly await hearing from you about the incredible projects you have discovered and your own open-source journey. Feel free to share your experiences, discoveries, and thoughts. Together, let’s continue to foster a vibrant and inclusive open-source community.

Don’t be a stranger; let’s connect!👇👇

Twitter | GitHub | Linkedin

--

--

Kingsley Mkpandiok

Experienced UX Designer utilizing research-driven methodologies to create intuitive, user-centered digital solutions that improve customer experiences.