Aleksandar Masic
Aug 6, 2019
(8 votes)

CMS UI refresh

Probably one of the first things that you will notice in refreshed CMS UI is the navigation menuDuring our research time, we compared a few different navigation patterns across Episerver products and other common patterns. We decided on a harmonized version that uses patterns that should work for all. When we finalized navigation rules and wireframe sketches it was time to zoom into details and focus on style and colors.

Our color palette is based on Episerver's brand story, and we are using formulas to come up with different shades for our colors. Collaboration with our marketing designers brought a lot of inspiration and we were able to find a creative way to blend our brand colors into the UI elements. There are two opposites to balance between colors that should grab your attention (marketing) and colors that you'll stare at a whole day (product). After colors, we were focused on finding a new typography font, with the goal to use it through the whole UI.

At this point, we had enough to build the new menu. After replacing the old CMS UI menu with the new one we had something that looked promising, but the rest of the CMS UI needed a bit of "flattening". Removing all gradients from UI elements, and replacing them with solid colors made an immediate difference. We also decided that we should not use borders as separators in the content trees, tables, and some menus. Border radii were also tweaked. Last but not least, we decided to redesign some of the icons in order to make UI more modern.

We hope that you like what you see.

Aug 06, 2019


Jake Jones
Jake Jones Aug 6, 2019 08:25 PM

Nice, looking forward to working with it.

Also great to see a use of the word radii.

Aleksandar Masic
Aleksandar Masic Aug 7, 2019 09:17 AM

Thank you Jake! :)

Luc Gosso (MVP)
Luc Gosso (MVP) Aug 14, 2019 02:21 PM

Found some stuff that needs to be addressed for better usabillity

1.You cant ctrl + click "Edit" or "Admin" and open in new tabs

2. Nor can you navigate with tab to open these menus

Hope to get these options back

Luc Gosso (MVP)
Luc Gosso (MVP) Aug 14, 2019 02:26 PM

Edit: Nav with Arrows seem to work

Joshua Folkerts
Joshua Folkerts Sep 6, 2019 03:10 PM

Well done Alexsandar.  I have heard good things about how much more clean if feels. 

Jason Rodman
Jason Rodman Sep 8, 2019 04:23 AM

Anyone know where the "to view mode" globe link went? It used to be to the left of the help icon. We used that all the time! Now there is no way to view the site outside of the CMS without editing the url. Or am I just missing it?

Aleksandar Masic
Aleksandar Masic Sep 9, 2019 06:56 AM

Thank you for feedback Gosso! I will forward it to the team.
This post is more about the new look of CMS but we do appreciate usability feedback! :)

Aleksandar Masic
Aleksandar Masic Sep 9, 2019 06:57 AM

Thank you so much Joshua! This means a lot to my team and me! :)

Aleksandar Masic
Aleksandar Masic Sep 9, 2019 07:08 AM

Hey Jason, you can still do it trough "options -> view on website"  

Isabella Gross Alström
Isabella Gross Alström Oct 31, 2019 11:05 AM

The new ui is very nice. I would like to add the new styling for buttons and such to our own addons, but when I use the classes shown at is does nothing to them. How can I use this new style in our own views too?

Please login to comment.
Latest blogs
Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog