Working with Fedora exposes you to a lot of different open source software. A major Fedora website revamp started over a year ago, with the goal of improving design aesthetics, creating a style guide, planning the website strategy, and choosing the tech stack for delivering the Fedora Linux offerings website. From a design perspective, the team needed a tool to create mock-ups, a place to hold the asset libraries, and something suitable to hand off to developers once complete.
Choosing Penpot
Figma is a popular interface designing tool recommended by many, but it wasn't deemed suitable because the company had recently imposed restrictions on their free plan. This concern arose before Adobe acquired Figma, so the decision not to use it was even more significant in retrospect!
The team looked into Penpot and found that it matched everyone's requirements. Penpot is the first open source design and prototyping platform for cross-domain teams. A team within Kaleidos creates Penpot. Kaleidos is a technology company started in 2011 that fully focuses on open source projects.
There are three ways the Fedora Websites and Apps team uses Penpot:
- Wireframes and mock-ups
- UX testing and feedback
- Collabloration
I expand on these uses below. While the example discusses the Fedora Project, Penpot offers benefits to any open source community.
1. Wireframes and mock-ups
Drafting webpage designs is the primary way our team uses Penpot. Drafting enables quick collaboration and lessens communication issues between contributors. Developers and designers can collaborate freely and in the same space.
Community feedback is important. It can be a bit difficult to share mock-ups properly. Penpot is web-based and easily accessible on any platform. When entering View Mode on a prototype, the tool generates a shareable link. You can also modify the permissions or destroy the link if you no longer want it shared.
(Emma Kidney, CC BY-SA 4.0)
2. UX testing and feedback
This revamp works closely with the Fedora community. By running usability testing sessions on prototypes and sharing design progress, we use Penpot to keep the community involved every step of the way.
3. Collaboration
During the revamp, our development and design teams used Penpot to generate ideas, organize meetings, and test new concepts visually.
Our teams used Penpot as a whiteboard in early planning sessions and enabled the developers to contribute ideas asynchronously while engaging in the discussion. This method reduced stress, made sure everyone's ideas could be heard, helped us see patterns, and mediated disagreements for a good compromise. Penpot helped create a sense of understanding between everyone.
The team used Penpot as a source of assets. Uses can store elements and other content in an asset library so that one can use them repeatedly. Penpot stores components, graphics, typographies, color palettes, and more.
(Emma Kidney, CC BY-SA 4.0)
Sharing these libraries enables the whole team to access them. This can be helpful when working with a team that regularly accesses the same source files. If a new member joins, all assets they need to start building mock-ups for the project would be readily available. Users can export these assets directly from the Penpot file.
(Emma Kidney, CC BY-SA 4.0)
Developers can view the prototype in full on any browser. This capability makes building the website easier as you can code side by side with the prototype. If a designer is working on the file at the same time, changes they make can be seen by refreshing in View Mode or in real-time if in the actual file.
(Emma Kidney, CC BY-SA 4.0)
Open source values
Penpot aligns with the Fedora Project's "Four Foundations" of Freedom, Friends, Features, and First. As you review these values, consider how the tool might align with your own open source initiative.
Freedom
We choose open source and free alternatives to proprietary code and content and limit the effects of proprietary code on and within the Project. Penpot is the first open source design and prototyping platform. Penpot is web-based, independent of operating systems, and works with open web standards. This ensures compatibility with web browsers and external applications like Inkscape.
Friends
My community consists of people from all walks of life working together to advance free software. Penpot's mission is similar. Its goal is to provide an open source and open standards tool to bring collaboration between designers and developers to the next level. Using Penpot has allowed for a smooth handoff to developers and has allowed us to work productively together. There's no back-and-forth looking for files or assets, as everything they need is in the Penpot file.
Features
Fedora cares about excellent software. Its feature development is always done openly and transparently, and it encourages participation. Anyone can start working on any issue or as part of any team that interests them. Penpot shares this ethos. Anyone can collaborate! The code and a contributor guide are available on the project's Git repository.
First
Fedora adopts a strategy of advancing free software through consistent forward momentum. This approach usually follows a "release early, release often" workflow. Penpot also updates frequently. It publishes a Dev Diary blog to the community, highlighting the work that has been done. It states on its website, "We also have this sense of urgency, we need to act fast, there's too much at stake."
Wrap up
The project is coming close to completion, with the first deadline aligning with the release of Fedora Linux 38. Penpot has proven to be a valuable tool and is expanding the resources available to Open Source Design enthusiasts. With the platform celebrating its official launch recently, it's exciting to see what's next.
Penpot has changed the way the our team works. What can it do for your organization and community?
This article has been adapted from the talk: Mock-ups and Motions—How the Fedora Design Team uses Penpot by Ashlyn Knox and Emma Kidney, given at the Creative Freedom Summit. A recording of the talk is available to watch on PeerTube.
1 Comment