One of the key sticking points was how to design mockups for a website where each page and post can be put together in countless combinations. We encountered this issue early on at Say Hello when we started designing websites for use with Gutenberg in early 2019.
Giving customers the Block Editor is like handing them a box of LEGO without building instructions. You should not only give them the building blocks – but also instructions and visual examples of how certain pages could look.
Customers are generally not experts in digital communication and they often need support in setting up a website. A tool with endless possibilities for content creation is rarely helpful in this context. They still need guidance: not only by providing dozens of beautifully designed blocks, but also by providing concrete instructions on how these blocks – as well as page and layout combinations – can be used in a targeted manner to achieve their communication goals.
Provide a master sheet
The easiest way to fulfil customers’ continuing desire for mockups is to design a so-called “master sheet”: a single overview in which a selection of the most important blocks and their appearance are presented as individual elements. (It is obviously not possible to visualise every conceivable combination in advance with this approach.) This overview should contain all the core blocks that customers are most likely to use.
An example of this can be seen in the screenshot in this article: different blocks are shown with their layout and colour variants. Such a constellation will never appear one-to-one on the website, but customers will recognise that each element (each block) can be individually inserted and adapted.
It makes sense to visually prepare as many of the usual blocks as possible – in addition to any customised blocks or block combinations. With the help of colour palettes and typographic style sheets in tools such as Adobe XD or Figma, this master sheet can be adapted for each project, making the initial effort more efficient and economical.
Prepare sample pages
In addition to the block overview, it is a good idea to create a few sample pages – for example for the homepage or the “About us” page. These serve as a guide and can be customised by customers according to their own needs. Mockups like these help to visualise what the website could look like later on. This is because many customers find it difficult to imagine how the content can be put together without a visual reference.
Even though we provide them with a tool that allows them to design content flexibly, many don’t know where to start. Even before the Block Editor was introduced, we supported our customers in creating pages that are user-friendly and effective from a technical perspective. This remains a central part of our work. For example, we recommend placing clear calls to action and appropriate texts on the homepage or providing all the necessary information on the contact page. This is exactly where page mock-ups help.
