The arrival of Gutenberg in 2018 marked a turning point at Be API. The latest WordPress content editor, more flexible and "user-friendly" than his predecessors, quickly imposed itself as the optimal solution to carry out ambitious projects in perfect co-creation with our customers. Convinced that the success and sustainability of a site depends largely on its practical and intuitive nature for the final contributors, we have fully adapted our methodology around this publisher.
And this obviously involves the design phase! That's why our team created Johannes, a kit UX « Gutenberg ready » which allows you to easily and quickly design wireframes on WordPress.
Available in open source on FigmaThe tool is now an integral part of our methodology at the agency. In this article we return to the origin of the project and the integration of Johannes into our production process.
The genesis: think Gutenberg from the design phase
Summer 2021. The Be API Team Leaders meet at a seminar to reflect on the following issue: how to integrate Gutenberg into all the production steps of a WordPress site, to fully exploit the tool's potential? We then think directly about how to reorganise the technical part, follow up with our customers and train all the teams on the content editor.
The question of Gutenberg's integration from the design stage also arises.
In practice, design teams have been designing wireframes for Gutenberg projects for some time. This is essential because the qualification of blocks has a considerable impact on the continuation of the project.
Then the idea of creating a UX kit incorporating all Gutenberg native blocks, as well as extensions and the most used block packs, already calibrated for editor. The design team focuses on the creation of these templates, and the first version of Johannes is born.
Why does this tool make sense? Because the arrival of Gutenberg and its principle of atomic design have completely transformed the way of designing sites on WordPress. We have moved from fixed templates, fully customizable, to the possibility of creating models (patterns), using native blocks present in the editor and creating custom blocks. Upstream of each design phase, we create a document called « design system », which includes all types of blocks that will be present and available throughout the site.
This is a little what Johannes is: an ultra-comprehensive reference document that can be carried out and adapted to each project. It allows quickly and easily create clean wireframes, already compatible with the publisher.
A tool for our methodology
At Be API, designing WordPress sites with Gutenberg editor is our daily life. Therefore, the introduction of tools such as Johannes brings real added value to our production chain, allowing us to:
- optimize our design phases – the wireframe base already exists, ready to be adapted to each project
- to focus on the essentials – i.e. the UI, storytelling and user journey
By standardizing the design, we can guide the artistic direction and create models that are faithful to the final rendering while respecting the technical prerequisites. In addition, the projects are already calibrated for Gutenberg, which also saves us time during the development phase.
At the agency, we accompany our clients on major projects. We therefore attach great importance to the establishment and development of a well-functioning methodology. A good methodology is based on its detailed organisation – led by the project team – but also on the use of suitable tools. That is why the establishment of Johannes is particularly appropriate for our organization.
We rely on our experience to continuously improve our processes, while taking care of keeping the principle of co-creation at the centre of our methodology. The goal is to integrate all the project stakeholders and ensure that we all work in the same direction.
Embark all the crew in the same boat
And for cause! Working closely together remains a key element of success for any project. By integrating the principle of blocks and atomic design from the model phase, we work with Gutenberg in design, but also with our customers, from the beginning of the project.
Wireframes « Gutenberg ready » that we present allow us to integrate the WordPress interface from the d的UX phase. This helps us explain how CMS works to the final contributors and clarify the native blocks we will use, as well as the additional development needs to create custom blocks.
And I think everyone agrees that a project is much more enjoyable and fluid when all stakeholders speak the same language – and rest assured, no need to be webmaster to understand Johannes' language.
Using these templates allows us to produce a more detailed and comprehensible design by all project stakeholders. On the customer side, there is a real added value in projection in the contribution with Gutenberg and the preparation of content from the model phase.
Elisabeth, Digital Project Manager
Working on this kit, we have retained the original ambition that motivates us at Be API: creating practical and useful projects for end users and contributors. By combining our business expertise and the power of your content, we create relevant and sustainable digital experiences.
We are also happy to share this resource with the WordPress community, in a spirit of « giving back ». You will find the UX kit available in open source on Figma here.
Are you a designer or freelancer? Don't hesitate to get it, use it and share your feedback with us!
