Wireframing in the open
Introducing the PatternFly wireframe kit
When pixel-perfect isn’t perfect, turn to low-fidelity wireframes with PatternFly.
The PatternFly wireframe kit is a new design tool for Sketch that enables quick and consistent low-fidelity prototyping for designers. Not only is it a popular tool among designers on Red Hat’s User Experience Design (UXD) team, but it’s the perfect complement to the current PatternFly design kit — and it’s publicly available to all designers, whether you’re a Red Hatter or not. The process of getting a wireframe kit up and running was extensive yet rewarding, and it required a lot of creativity and a strong dose of collaboration.
Why PatternFly needs a wireframe kit
PatternFly is the backbone of product design at Red Hat. It’s community-driven, collaborative, flexible, adaptable, and open. This enables rapid prototyping and agile iteration for our project teams. However, prototypes were almost always done in high fidelity, contributing to a series of known issues around the global design community.
First off, it took longer for designers to assemble high-fidelity mockups than just sketch some wireframes to convey an idea. And that was mostly due to having to deal with details such as component states or icons, things that can easily be considered trivial during the ideation phase. A shorter turnaround would not only help the product team iterate on more ideas quickly, but also help prevent designers from feeling attached to their creations.
On the other end, high-fidelity mockups might cause confusion during design and stakeholder meetings due to the mockups looking polished and ready for implementation. Some other issues we observed were distractions and clutter. Attention was often drawn to areas of the mockup that were not meant for review.
For the reasons above, we came up with the idea of building a wireframe kit for PatternFly, so we got started on putting in the hard work to make it all work.
How the kit was made
The kit started as a proof of concept during an innovation sprint, also called a breakaway sprint, in the summer of 2021. The team gathered around the idea of answering the demand for a design tool that would allow for quicker creation and iteration of design artifacts.
A team of eight people, including designers, content strategists, and a manager, worked over the course of a year to design, implement, and test this new design tool. In the beginning, our team started with just three designers trying to make an automatically generated kit, but it ended up unsuccessful. Once more designers and content writers joined the team, we finally moved onto the right track and started building the wireframe kit.
To validate the kit, we initially invited some internal designers to use the beta version and provide feedback before the internal beta release. Based on the results, we fixed a few usability bugs in the Sketch kit. For more detailed validation, we asked one of our researchers to assist us in setting up multiple one-hour testing sessions. These sessions helped us better understand what designers thought about usage and enabled us to prioritize the next steps.
Our last discussion before the public release was with the PatternFly team. With the team’s support, we finally ended up with a well-made wireframe kit that was waiting to be explored and used by all designers in and outside of Red Hat.
Get started with the wireframe kit in Sketch
Note: The wireframe kit is built with Sketch, so you’ll need Sketch installed to use it.
The PatternFly wireframe kit has been designed and implemented from the ground up to add the least possible overhead and learning curve to anybody designing with the PatternFly design kit in Sketch. You can also upgrade your wireframes to high-fidelity mockups without the need to leave the Sketch interface.
- Learn how to install and use the kit in our patternfly-design-kit repo.
- Install the library from the UXD Sketch Cloud workspace and receive automatic updates.
- Download the template file, including the most common design patterns to further optimize and simplify your wireframe prototyping experience.
Want to contribute?
In the spirit of open source, any feedback will help us iterate the PatternFly wireframe kit and make it an even stronger design tool.
- Report bugs and share requests by submitting a GitHub issue (please add the “Wireframe” label).
- Share feedback about your wireframing experience in our survey.
- Connect with us in PatternFly Slack’s #patternfly-design-kit channel.
Last but not least, none of this would have been possible without the support from Abigael Donahue, Alessandro Contini, Amy Glass, Allison Wolfe, Brie Mignano, Kevin Hatchoua, Ivan Pham, Marie Doruskova, Matt Carrano, Missy Johnson, and our testers. Thank you!
Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.
