A new redesign of the prismic.io editor. Better visibility and structure for your content.

Written by Anthony Aubertin in Writing Room on October 18,2017

Hey everyone, today, we are releasing a big improvement to our content editor design. Last week, we sent an email asking our community about improvements that they wanted to see implemented in Prismic. One of the big items was a simpler design in our text editor.

Our content editor is pretty rich since it allows editors to create rich layouts using text, images, components (named Slices), tabs, etc. However, we took it as a challenge to redesign the editor to make it both rich and simple.

Improving the clarity and scannability of the Prismic editor

First, we started by improving the scannability of the editor, basically allowing editors to quickly scan their content to understand and find what they're looking for. We worked hard at making things clearer, and for that we made big changes to our fonts (font-size and colors) and improved the contrast in the interface. These improvements also come with a cleaner and simpler view of the text editor.

Clearer views for Slices and group.

We are glad that a growing number of users are using Content Slices. This unique feature of prismic gives a lot of power to editors to structure their rich content in a flexible way (for adding galleries, sliders, testimonials, etc. to their stories). But with great power comes great responsibility. Our challenge was to make Slices clear and readable so that you can find your way even in a complex document.

We chose to add more contrast and more visible boundaries between Slices by separating them much in the same way as pages are separated in a traditional text editor. We also added a clear separation between groups and other fields. This will help you identify which field belongs to which group. We're sure this will improve the way you browse your documents every day.

Anthony Aubertin

Product designer at prismic.io & PSG fan boy