The Nuxeo UI Style Guide
I recently published a UI Style Guide for the Nuxeo Platform, to help developers and designers learn how to design your platform interface.
A first post was published to explain what’s inside and why you should follow it. In this post I will focus on the importance of setting up a guide like this, how developers are way more happy now, and how i learned a lot about my own design process.
A toolkit to make better use of everyone’s time Developers were wasting a lot of time trying to start styling a bit their features, without having any rules to follow. It was not satisfying for them, and even less for me. The thing is, developers are proud of their feature once they see it cleaned and styled. In my designer side, I was also wasting a lot of time reviewing their code, updating the layout, adding missing elementary classes, and trying to fight to keep the screens consistent.
Clearly, the developers would be even prouder of their work if they had the toolkit to clean and style their features on their own.
The solution was obvious: they needed a UI Style Guide to rely on stable rules: a guide with all the available styles, icons, and recommendations to keep the platform simple, clear, and usable.
A helpful process to improve your design rules As exciting as it might be to draft a guide, dreaming and thinking about how clear and simple it will be for everyone once finished, when I started I faced a list of challenges.
The first one was cleaning all the existing styles rules. I started a thorough investigation of existing elements, remove all the duplicated, old or unused rules, I made the CSS files easier to read, and I’ve made the comments and documentation more helpful in the files. This was a really satisfying step.
Then, I faced another thing: the styles are clean, great. But they aren’t complete. A key point was missing: my CSS rules were not flexible enough. I designed a box, but I didn’t provide a way to add a button in it. And what if I need a title and a button in the same line? I started to address the list of all the common design patterns developers and users need, and implement them in my CSS rules. Global design patterns are more useful than specific design, so I rewrote a lot of rules as generic styles. This was a nice way to remodel the patterns and make them robust.
Also, by adding an icon explorer, even if I knew that some icons were sometimes duplicated in the platform, having the list in front of my eyes is the best tool I could provide for myself. With that, I could forget about an unsuccessful grep search command: I only have to scroll to see which icons I have to update. This provides a visual tool to check the visual consistency of your icons.
At last, once the code and rules were cleaned and well explained in the CSS files, I started to write the guide. This was the biggest challenge: justifying my design decisions by explaining the layout and class patterns. If you’re not able to explain or justify plainly a structure or a pattern, something is wrong. It was the most interesting task as a designer, as I had to understand which errors I made and why, and which solution is much simpler to implement. This was a great process to institute a sustainable guide for the design.
What I’ve gained, what I learned
- I now have an easily readable coding style and a set of clean CSS rules that is easy to maintain.
- I stopped designing the same element each month: the Style Guide is here to show how to design one rollover menu for good
- I stopped designing each element as it is the only page existing in the platform. The interface is a flow, not a list of independent steps. I now design elements thinking of this flow.
- Toolkits save a lot of time. Developers have more time to focus on their features, and designers have more time to focus on design pattern quality.
- Sharing is important in the design process. I can directly see with them what is missing. They can directly tell me what is unclear.
- Using available styles as a standard, I have now a solid and stable base to build on.
The importance of trusting your design choices With a guide like this, everyone will understand that each pattern is done for a reason. This will result in a better user experience through consistency and homogenization, and all your patterns will be applied. And you will see if it works: after all the lists of all the advantages a guide can bring to designer, this last thing is the most important.
By trusting your design decisions and following them, you will get feedback from others. This is the only way to be sure they work. It is difficult to be sure a design pattern will be widely adopted, so trust your choices and measure their efficiency. This is the best way to see what worked and what didn’t, so you can always continue to improve.
Don’t be disappointed if something is not working. It is not a failure. It is the best occasion to keep improving.