The arrival of Gutenberg in 2018 marked a turning point at Be API. The latest WordPress content editor, more flexible and "user-friendly" than its predecessors, quickly established itself as the optimal solution for carrying out ambitious projects in perfect co-creation with our customers. Convinced that the success and longevity of a site depend to a large extent on its practicality and intuitiveness for end contributors, we have totally adapted our methodology around this editor.
And that of course includes the design phase! That's why our team has created Johannes, a "Gutenberg ready" UX kit that lets you quickly and easily design wireframes on WordPress.
Available as open source on Figma, the tool is now an integral part of our agency methodology. In this article, we look back at the origins of the project and the integration of Johannes into our production process.
The genesis: thinking Gutenberg right from the design phase
Summer 2021. The Be API Team Leaders get together at a seminar to think about the following problem: how to integrate Gutenberg into all the production stages of a WordPress site, to exploit the tool's full potential? We're thinking directly about how to reorganize the technical side of things, how to follow up with our customers and how to train all our teams in the content editor.
There's also the question of integrating Gutenberg right from the design phase.
In practice, design teams have already been creating wireframes for Gutenberg projects for some time. This step is essential, as the qualification of the blocks has a considerable impact on the rest of the project.
This gave rise to the idea of creating a UX kit integrating all the native Gutenberg blocks, as well as extensions and the most commonly used block packs, already calibrated for the editor. The design team set about creating these templates, and the first version of Johannes was born.
Why does this type of tool make sense? Because the arrival of Gutenberg and its atomic design principle has completely transformed the way we design sites on WordPress. We've gone from fixed, fully customizable templates to the ability to create patterns, use native blocks in the editor and create custom blocks. Upstream of each design phase, we create a document called the "design system", which groups together all the types of blocks that will be present and used throughout the site.
In a way, this is what Johannes is: an ultra-complete reference document that can be rolled out and adapted to each project. It allows you to quickly and easily create your own wireframes, already compatible with the editor.
A tool to support our methodology
At Be API, designing WordPress sites with the Gutenberg editor is our daily business. That's why tools like Johannes add real value to our production chain, enabling us to..:
- optimize our design phases - the wireframe base already exists, ready to be adapted to each project
- focus on the essentials - namely UI, storytelling and the user journey
By standardizing the design, we can guide the artistic direction and create mock-ups that are faithful to the final rendering, while respecting the technical prerequisites. What's more, projects are already calibrated for Gutenberg, which also saves us time during the development phase.
At the agency, we work with our customers on large-scale projects. As such, we attach great importance to the implementation and running of a well-honed methodology. A good methodology is not only based on detailed organization - masterfully led by the project team - but also on the use of appropriate tools. That's why Johannes is particularly well-suited to our organization.
We draw on our experience to constantly improve our processes, while taking care to keep the principle of co-creation at the heart of our methodology. The aim is to integrate all project stakeholders and ensure that we're all working in the same direction.
Get the whole team in the same boat
And for good reason! Close collaboration remains a key element in the success of any project. By integrating the principle of block and atomic design right from the mock-up phase, we not only work with Gutenberg in design, but also with our customers, right from the start of the project.
The "Gutenberg ready" wireframes we present allow us to integrate the WordPress interface right from the UX phase. This helps us explain how the CMS works to end contributors, and clarifies the native blocks we'll be using, as well as any additional development needs to create custom blocks.
And I think everyone agrees that a project is much more pleasant and fluid when all stakeholders speak the same language - and rest assured, you don't need to be a webmaster to understand Johannes' language.
The use of these templates enables us to produce a more detailed design that is easier to understand by all those involved in the project. On the customer side, there's real added value in being able to project contributions with Gutenberg and prepare content right from the mock-up phase.
Elisabeth, Digital Project Manager
In working on this kit, we have retained the original ambition that motivates us at Be API: to create practical, useful projects for end-users and contributors alike. It's by combining our business expertise with the power of your content that we create relevant and lasting digital experiences.
We're also happy to share this resource with the WordPress community, in the spirit of "giving back". You can find the UX kit available as open source on Figma here.
Are you a designer or freelancer? Don't hesitate to get it, use it and give us your feedback!
