Before
After
We are starting a new project at work and with it we are going to use our custom CMS, Stratus, as the back end. In our last project we heavily re-factored and streamlined the latest build. But the interface has had little or no changes since its initial version. So after I had the scaffolding of the CMS in place for our new project I started to make adjustments to the UI. The first major thing I did was change the colors around a lot. The old UI used whites, light grays, and light blues all over. The only background color is used in the header (as you can see in the first image above). While this isn't a 'bad' interface at all I felt like the interface was not adding anything. It didn't hold you back from using the CMS but it didn't help you either.
Because this is a commercial CMS and we always are making it for a specific project we work with the client and show them how to use it (a luxury that most web developers don't have, and one that none should rely on) UX is not high on our list of priorities. However after thinking about what I could do to make this CMS better (out side of the backend code) I realized with a cleaned up interface we could cut back on a lot of the time we took explaining how to use the CMS to clients and make the CMS less of a chore to use. The first thing I wanted to do was to use color to create a visual hierarchy in the interface. The thing that is most important on the page is the current elements you are working with. For example if you are on the 'Categories' page the thing that is most important is the actually category elements. To do this I made the header a dark gray background and the rest of the site a lighter gray background. The only use of white is the center content area (following our categories example, where the categories are listed) making that the very clear center of attention. Besides making the background of the main content area white I also used darker more saturated fonts in the center to further enforce that this is the most important area on the screen. The real challenge here (that resulted in a lot of back and forth between TextMate, Photoshop, and Chrome) was keeping the interface as a whole coherent. When I made the sidebar and header too light and blending in too much it make the center content area overpowering.
While there is still a lot of work to do in the UI I found it to be a really refreshing and an interesting challenge trying to create an interface that needs to be very extensible. Meaning the interface needs to keep up with the complexities of the CMS. If we decided to add a grid based list of a specific object the CMS' UI needs to deal with that.
