Getting Into UX/UI Design Through WordPress Open Source Projects
Looking for ways to get hands-on experience, build an impressive UX portfolio and gain credibility as a designer? WordPress Open Source is an incredible, yet often overlooked way to get started in design and give back to the tech community all while looking very impressive on your resume!
Here’s exactly how to get started and what to expect as a designer contributing to WordPress Open Source Projects.
Why don’t more designers contribute to WordPress Open Source?
As of today WordPress powers more than 37% of all websites on the internet. That’s over 455 million WordPress websites! The craziest thing about it? It’s open-sourced version is available for free and maintained by volunteer designers and developers.
While developers tend to be familiar with the concept of open source and how to contribute to it, designers often miss out on this amazing space and community for a number of reasons:
- They don’t know it exists
- They don’t know how to find projects
- They don’t know how to contribute as a designer
- They are afraid of the unfamiliar technology, terminology and procedures involved
WordPress open source may be new territory to designers and the non-technical, but it doesn’t have to be scary. In this guide, we’re going to break down everything you need to know to get started and succeed as an open-source WordPress designer!
Getting started
The first thing to note is that designers do not need to know how to code in order to contribute to WordPress Open source projects, but you will need to get familiar with some developer-centric terminology and software.
The second most important thing to understand is that WordPress Open Source is all about community. Open source projects, particularly WordPress, are driven entirely by the people who volunteer to create, update and maintain the software, so connecting and coordinating with others that are involved (like developers, designers, contributors, maintainers and users) is foundational to getting into the space and making a positive impact.
With that said, let’s get into some of the important things you'll need to know.
What is Open Source?
Open Source is essentially software that is created, developed, distributed and maintained for free. Developers and designers volunteer to build upon, update and maintain the software while allowing anyone to use, share, modify, build off of or redistribute it. It is often run by a non-profit organization.
Anyone can contribute to open source projects and is a great path for anyone interested in tech to get practice working with others, building a portfolio, giving back to the tech community and gaining a good reputation!
What is WordPress?
Wordpress is a CMS (Content management system) for creating websites and blog originally created by Matt Mullenweg. There is WordPress.com and WordPress.org
WordPress.org is the not-for-profit site where the free software lives. You can download, build upon it, modify and edit for free. This requires you to host it yourself.
WordPress.com is the for-profit site that offers a paid version. This allows you to download a theme and have it hosted for you.
There are also premium theme shops where developers and designers use the free source code to create unique, paid themes that you can purchase directly through them or through a theme marketplace and then it host yourself.
For this guide, we’re going to focus on the WordPress.org side of things, where the free core software and themes live.
Getting started with open source can be confusing but WordPress has made really easy to get involved as a design contributor with clear guidelines and design review process that is well documented and easy to understand. Best of all they use two very familiar applications to manage their design and contribution process Figma and Slack.
What is Gutenberg
Gutenberg is the name of the WordPress no-code block editor that allows you to create posts, build pages and add content to a WordPress website. It is a visual page builder and WYSIWYG that uses pre-determined blocks (like Galleries, Video, Audio or Columns) that you can drag and drop to build rich web pages and websites with WordPress.
“The goal of the block editor is to make adding rich content to WordPress simple and enjoyable.” WordPress.org
Gutenberg became the official default WordPress editor in version 5.0 and most recently added block Patterns which are pre-designed layouts of content that anyone can copy and paste onto their own pages.
What is GitHub?
GitHub is a code hosting, collaboration and version control platform that allows you to store code, project files and other documents in what are called repositories. It can be used as a project management system to store both code and non-code content, It is built off of open-source software called Git. This is a simple definition of a complex tool with many different processes which you can learn more about here, however for us as designers, we won’t need to go too deep into GithHub.
As a designer, you might hear some unusual terminology and jargon from those discussing GitHub and it’s easy to get overwhelmed, but here are the basics that you need to know to be able to understand and contribute to the conversation:
Repository (Repo) - The directory that stores all of the files and folders used to build the project and track version changes made to it.
Local and Remote - The local repo is stored offline on your own computer, this is where you will begin work or make changes. The remote repo is hosted online on a platform like GitHub this is where the live project will live for others to see and collaborate on.
Pull Request (PR) - Letting others know that you would like the changes you made included in the main code.
Pull - This allows you to ‘pull’ and copy and changes that were made to the remote repo to your local repo.
Push - This allows you to ‘push’ and send out any changes that were made to your local repo to the remote repo.
Fetch - This allows you to download data but doesn’t integrate it into your local project.
Commit - any change to the project such as adding, removing, modifying code or files.
Branch - This creates a secondary repo off of the mainline project so that you can test before merging with the main code.
If you want to learn more about working with GitHub I recommend this article on using Git for Designers
Getting Setup to Contribute
- Get familiar with WordPress.org. You can create a free WordPress.org user account.
- Read up about designing for WordPress on the make wordpress.org blog
- Read the handbook for different areas of WordPress that you can contribute to
- Get familiar with the Gutenberg project. We suggest that you download it, install it locally on your computer and install the free Twenty Twenty Two theme blog and start getting familiar with it.
- Get familiar with GitHub and its terminology.
- Join the WordPress Slack Channel and Say hi!
- When it comes to making your first actual contribution we always recommend starting off by giving design feedback as a warmup
Designer/Non-coder Roles
WordPress has great documentation on the different ways you can get involved with WordPress as a designer or without being a coder. Here are some of the more non-technical roles:
- Advisor: Goes through ‘needs design feedback’ issues.
- Screenshotter: Adds screenshots to issues that have none of the problems.
- Informer: Asks for more information as can’t replicate a problem.
- Tester: Tests not only Gutenberg on all devices, browsers and situations, but also test bugs here and here. Also testing any PR is a great way to help move issues along.
- Copy issues: Reviews and suggests copy.
- Creator: Adds to ‘needs design’ or anything that seems like it would be good to have a design.
- Documentor: Provide documentation and technical writing for all WordPress projects.
- Triage: Sees an issue without any comments or actions and goes through from oldest issues to make sure all issues can move forward.
Within these roles, there are many different parts of the WordPress ecosystem that you can contribute to as a designer as well:
- Give UI or UX design feedback
- Review tickets that need design
- Work on Dashicons icons
- Work on Typography
- Work on Navigational structure and IA
- Work on the latest Twenty Twenty Three default WordPress Blog theme design
- Contribute to Gutenberg editor visual components through the WordPress Figma library
- Contribute to Gutenberg blocks, patterns and other focus areas
- Help update and redesign the existing wordpress.org website
- Volunteer for other ongoing visual and graphic design projects
UX/UI Design Contribution and Review Process
The UX/UI design process is similar to contributing to any design/dev team process. If you are contributing to the design side of things you will want to familiarize yourself with the workflows involved and get maintainer support for any changes you would like committed GitHub. Thankfully, WordPress has mapped out the collaboration and workflow process in great detail making this very easy to follow. Here’s an overview of what you’ll need to do:
- Check out the guidelines on exactly how to contribute as a designer by reading the Design section hand-book.
- Join the Slack channel - Here you'll find everyone and everything to do with the various WP projects and how they are coordinated through the community.
- Get connected with the all-volunteer design team and learn about the schedules, workflows and weekly meetings required.
- Spend some time exploring what current projects are being worked on and what areas of WordPress you would like to contribute to.
- You can find what parts of the library need updating in the Gutenberg GitHub Repo and contribute to the ones that say 'needs Figma Update'.
- You can check out the Trello board of design tasks that need contributors.
- UX/UI Designers can contribute to Gutenberg by accessing the WordPress Figma component library
- You will need to request access to edit the Figma component file.
- You'll need to Write and Submit a proposal to have your contributions published.
- Once you've completed your proposal you can ping the Slack channel for a review
- Once approved, a maintainer will publish the component in Figma
The Open Source WordPress Community is also very active on Twitter, it's another place to connect and share with others. Follow @Lizthewhizard, @EricAlli and @DesignerUpCo for special live events and other tips around WordPress Open Source for Designers!
As you can see, there is something here for every type of designer to work on and get involved with as part of a larger team and community and it's an invaluable resource to help new designers get hands-on with workflows that will prepare them to deal with the ambiguity of real design projects and the communication that is essential as for any designer starting their career!
Want to improve your UX/UI design skills and become a professional designer? Come master your skills in our self-paced Product Design Course.