Aleksandar Masic
Aug 6, 2019
  4316
(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.
 
ui-refresh.gif


Aug 06, 2019

Comments

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 http://ux.episerver.com is does nothing to them. How can I use this new style in our own views too?

Please login to comment.
Latest blogs
Add your own tools to the Optimizely CMS 12 admin menu

The menus in Optimizely CMS can be extended using a MenuProvider, and using the path parameter you decide what menu you want to add additional menu...

Tomas Hensrud Gulla | Oct 3, 2024 | Syndicated blog

Integrating Optimizely DAM with Your Website

This article is the second in a series about integrating Optimizely DAM with websites. It discusses how to install the necessary package and code t...

Andrew Markham | Sep 28, 2024 | Syndicated blog

Opticon 2024 - highlights

I went to Opticon in Stockholm and here are my brief highlights based on the demos, presentations and roadmaps  Optimizely CMS SaaS will start to...

Daniel Ovaska | Sep 27, 2024

Required fields support in Optimizely Graph

It's been possible to have "required" properties (value must be entered) in the CMS for a long time. The required metadata haven't been reflected i...

Jonas Bergqvist | Sep 25, 2024