Maintaining a consistent look and feel across applications is a key to good design. Benefits include:
- Effective branding
- Lowering users’ cognitive load since they do not have to constantly relearn UX conventions
- Simplifying and accelerating the design process since existing conventions can be leveraged for common experiences
At IDEMIA, I led my small team in defining styles and patterns and getting them implemented across our product suite.
Fonts and Color Palette
Since IDEMIA’s customers are government entities that are exclusively PC/Windows shops, we decided to take a conservative approach when selecting our Font and Color Palette.
After some discussion, we selected Open Sans, which is a modern, easy to read font that is widely adopted.
Developing a color palette presented a different challenge. We did not have a Visual Designer on staff, so we decided to forgo developing a custom color palette on our own. Instead we turned our eyes toward color palettes defined in popular frameworks, such as Google’s Material Design.
We were pleasantly surprised by Microsoft’s Office UI Fabric color palette, which has a professional, enterprise feel while providing a nice diversity of color. In addition, since our customer base was Windows-centric, we knew that our users would be accustomed to this palette and it would lend a sense of familiarity to our applications.
Patterns
Defining consistent layouts and behaviors reinforce users’ experiences and enables them to feel confident and predict a UIs behaviors.
As part of our efforts, we defined everything from the broad framework to the small details, including:
- The navigation scheme, which was located on the left side of the page and could be expanded or collapsed
- The title bar, which included various components such as a universal search, preferences, and logout options. This particular pattern was defined to be flexible so if a component was not present, for example, preferences, the rest of the pattern could accommodate the absence
- Details, such as what format to use for dates and time, since inconsistencies even at this level will attract user attention and make them puzzle over the significance of the difference
CSS
While ownership of the CSS remained with the engineering team, my team used their knowledge of CSS to provide guidance around styling.
Obviously, CSS enables for consistency of coloring and font choice, for example, ensuring that our H1 was Open Sans Light using the color #3c3c3c. But where we found this knowledge most impactful was to define spacing and some of the more obscure aspects of look and feel. We invested a lot of effort ensuring the padding of the elements was correct, using the Developer Tools in Google Chrome to manipulate and experiment with the engineer’s code before meeting with them to discuss our proposal.
The long term vision would be for every UX team to own the CSS, but at IDEMIA the size of the team places restrictions on what we can support.
