It’s time we give you some news about the Nuxeo UX Lab, because we’re moving fast! Last time we shared our plans for the future of the Nuxeo Web UI with you. Since then, we’ve rolled up our sleeves and started to implement the UI using Polymer. Let me walk you through how we discovered the concepts of Polymer and played with Web Components from a designers’ perspective, better known as the best perspective, of course!
Discovering Polymer
Nuxeo Web UI - Search view, work in progress
The Nuxeo UX Lab demo was built using AngularJS. As a designer it was important for me to implement my designs quickly, to test them and make them evolve without annoying any developer. AngularJS was pretty accessible for a non-developer like me, and this made things easy.
Since I implemented and tested it first-hand, I was able to get a realistic feedback on some basic yet very important questions every user faces:
- Do I know where I am in the application?
- Do I know how to access a document, a profile, a task, a notification, etc.?
- Do I know how to come back to the previous file, page, task, etc.?
- Am I able to do the main actions the app promised me in a jiffy?
Once the UX Lab demo was ready, we started to develop the first skeleton of the next Nuxeo Web UI, in Polymer. But I had a new framework to learn. Web Components? Shadow Dom? Scoped styles in elements? - Can I take some holidays?
Though life for a designer these days!
Playing with Web Components
Example from Polymer documentation to apply shared-styles for the global branding and then define local styles directly in the element
Once the first page of Nuxeo Web UI was built, it was my turn to play with it. With the help of some documentation and polycasts, I was able to define variables we need for the application brand, and style the tiny elements, one by one.
One of the great things about Web Component is that any element can be used in one application or another. You decide what an element will be, it can be a tiny block or even a page content. And once an element is styled, it is done and you can go move to the next task on the list. No need to design and redesign the same thing for each new application anymore! On the other hand, it means that you have to embed enough styles in each element to make it work alone, independently from other CSS styles.
After figuring out how to define a set of colors, fonts, and styles to be shared across the application in a shared-styles module, the embedded styles in each element sound logical and very clever.
This forces you to write minimum styles for elements to make them clear and relevant in every context, and then define which concepts are part of the branding of every application.
Define the essentials, isolate the unnecessary, and keep the essence of the product definition - definitely is a nice exercise for a designer, I would say.
We are very excited about how this UI is progressing and can’t wait for it to go live! I will keep sharing more updates in my upcoming blogs, so stay tuned.