WordPress Gutenberg Design Facelift

I started using Gutenberg, the new editor for WordPress, and immediately fell in love with it. I believe that Gutenberg is the best thing happened to WordPress after Jetpack.

Gutenberg is the best thing happened to WordPress after Jetpack

While playing around with Gutenberg a few things didn’t click. I spent a few hours and the result is the mockup you see. It’s an idea to improve the familiar without changing to something new. It’s a different approach on the super hard work all everyone has done and will be doing so far. That’s it. 

WordPress Gutenberg Mockup Idea

A new, yet familiar, look for WordPress Gutenberg

Top: Gutenberg as of version 0.3
Bottom: Gutenberg facelift

I wanted to reduce cognitive load but keep the familiar look of Gutenberg. So here’s the breakdown of every change.

Visual / Text Dropdown

This is a binary decision. Visual or text. The drop down menu signals there is more under the hood but there is nothing other than one more option. Thus the decision for making it a simple selection of Visual or Text.

Rounded Borders

Everything got rounded borders for consistency and visual appeal. It feels more natural. The buttons come with rounded borders but not the borders that outline the title and text fields.

Post Settings and Publish Buttons

Both buttons got the same size in order to eliminate any possible misunderstanding for their respective function. Does a bigger button signifies something more important than a smaller button? Publish is a very important function but why is it smaller than the Post Settings? Settings are important too, right?

Post Settings was redesigned to match the Publish button in size and look like a button. Sans the cog icon. Instead i used the familiar icon from mobile devices which also signals that there is something under the button. Exactly where the Settings appear. Below the button.

A Single Separator

The separator exists to visually distinguish between buttons and the more like text elements in the UI. I’m not a big fun but the idea was “new yet familiar”. Having only one separator also helped to space all elements evenly.

Placeholder and border colors changed to a less dominant, high contrast color. It feels more subtle yet self explanatory. There is a catch though. Not all screens are equally good to display colors as intended. My guess is that WordPress designers can tweak this based on data. Screen resolutions, screen color depth etc.

The copy of the placeholder was also change to be more natural, feel less than a command, to empathize more with the users.\

Add title… became Add your post title…
Write your story. became Write your story here

As with the placeholder and border colors this can be change and backed with data.

The Insert Button

There is no inset button anymore. Instead i opted for Add. A Google image search for Insert and Add shows what people perceive.

The icon has a bit more space and is larger in size to signal better that something can be added. The current button feels like a squeezed, tiny button. Especially when compared with the Post Settings and Publish button even in the original version of Gutenberg,.

Design Facelift

Research shows that people react strongly to big changes. That’s why the new, yet familiar approach. Research also shows that gradual changes are more welcome and accepted.

Gutenberg itself is a huge project and very different compared to the current editor. That’s one but change already. Yet, subtle change to improve the existing aesthetics and reduce the cognitive load can be applied. Keeping the new design almost intact, yet easier to accept and use in desktop and mobile.