I am sure you always dreamed about this, but didn’t dare to ask: a User Interface Style Guide. We recently created this tool, focused on the Nuxeo Content Services Platform. As the Nuxeo Platform is designed for customizability, the Nuxeo UI Style Guide will help you learn how to design the interface to fit your end users’ needs.
What’s in this guide?
- It explores all the available CSS rules from the default platform,
- It gives you tips and tricks to design a page layout with a grid,
- It helps you design the user interaction you need with actions and feedback,
- It lists all the available icons in your running platform.
What will you gain with it? You will gain in consistency. Following the UI design patterns, the platform will increase its value by being clear and predictable, and so adoptable easily and quickly by users. You will improve the usability. By being consistent in your interface, users will rapidly feel confortable and trust your platform. You will gain in maintainability. As styles are there to evolve depending on your needs, the visual explorer is a useful tool to have an overview of the existings rules you can use in Nuxeo Studio, for example. You will gain in compatibility. These rules and recommendations stand as a model to follow, as a guarantee that we are all evolving in the same direction to build our platform.
In detail, here is the UI Style Guide Table of Contents:
- Recommendations: the best practices to follow before starting a customization project
- Grid Layout: explains how to use the grid to design your tabs
- Tables: shows you the different table styles for your data tables and forms
- Messages: a list of all the types of feedback you can give to your user
- Titles: helps you to build your information architecture
- Dialogs: shows which modal pop-ups are running in the platform
- Buttons: lists the different kinds of actions and how you can style them
- Navigation: displays the blocks and buttons to browse your platform
- Boxes: compiles the default box models available
- Helpers: stands for a list of CSS classes to tweak a default behavior
- Icons: lists by category all the icons in your current platform.
This guide is here to be enriched over time, and follow the platform releases.
So now developers, integrators and all inquiring minds, discover and pick all the CSS rules you want to use in your project, follow the recommendations and the design patterns, play and combine styles for your new projects, and send us your feedback.
Tell us what you think, how it is useful to your project, what is missing, and which other tools you dreamed about to complete your Nuxeo development environment by using the comments or sending us an email to [email protected].
See also the next blog post on this topic: Why You Need a UI Style Guide.