Delivering mockups for WordPress Gutenberg

The first episode of the WP Café in June shared an interesting panel discussion about the WordPress Block Editor. Five developer/designers discussed their experience of working with and in the Editor.

One of the pain points which came up was how to design mockups for a website in which every page and every post can be put together in myriad combinations. This was an issue early on for us at Say Hello, when we began designing sites in-house for Gutenberg at the beginning of last year.

Clients are rarely specialists in online communication, and they need help putting a website together. Giving them a tool in which there are an endless number of possibilities for creating content will rarely be helpful. The client still needs our support as they always have: not just through receiving dozens of beautifully-styled blocks, but also being shown how to use these blocks – and combinations of pages and layouts – to achieve their communicative goals.

Examples of how individual blocks will look

The easiest way to deal with clients’ continuing need to see mockups is to design a single “sheet” containing a selection of the blocks and how they will appear as individual elements. (It’s obviously not possible to mock up every combination.) This sheet should contain all of the core blocks which the client is most likely to use.

An example of this is shown in this post, in which a range of different blocks are displayed with their layout and colour variations. There will never be a page on the website which will contain the blocks in this configuration, but the client will be able to see that each individual element (or block) can be adjusted on its own.

It makes sense to have as many of the core blocks designed as possible, alongside all of the custom blocks or custom block combinations you’ll be providing. Through the use of color palettes and typographic style rules in e.g. Adobe XD, you can then adapt the master for each client, which makes the initial work to create this sheet more cost-effective.

Alongside this master sheet, you can then pull examples of block combinations together to show how the “front page” or the ”about page” will look. These are naturally examples, which the client can edit themselves as they wish. But these mockups will help the client to pre-visualise how the site is going to look. Remember, this isn’t their area of expertise and they will often be unable to “see” how a page could look without any frame of reference.

Although we’re giving the client a tool to build content however they like, only a limited number of them will know where to begin. Before we worked with the Block Editor, we worked with clients to help them achieve a page which our expertise shows is easy for visitors to use. That remains part of the job. We recommend that the front page contains calls to action and appropriate text, or that the contact page must contain certain information. This is where the page mockups come in.

I saw an interesting reminder a few months back (as part of the discussion around Block Patterns). Giving clients Blocks and the Block Editor is like giving them a box of LEGO without any instructions. Give them the blocks, but also give them some guidelines of how particular pages will look, so that they can get to know the Block Editor based on points of reference.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.