Using Microsoft’s Fluent 2 Design System in CRM Projects
Microsoft’s Fluent 2 design system is a cohesive design language to aid in the user experience of their Dynamics 365 and Microsoft 365 applications. So why don’t Professional Services companies take advantage of this system when implementing it for customers?
Why Implementers Don’t Use the Fluent 2 Design System?
Developers and organizations may not take advantage of the Fluent 2 design system when implementing it for their customers for the following reasons:
- Lack of awareness. Microsoft needs to market the design system more!
- Focus on functionality over design. Microsoft Developers often don’t think about the design aesthetic. Just look at the advantage Apple has in this arena!
- Pre-Sales did not budget for a UI/UX Designer. If Sales and/or customers want to cut costs, the design aesthetic and user experience is always a place they look to cut. Someone forgot to tell them that user buy-in on deployment will take a hit because of this.
- Perception of complexity. Developers often think it is too difficult to learn a design system.
How May We Incorporate Some Fluent 2 Design Rules?
Websites are often comprised of three colours. Designer softens have a primary brand colour, a secondary colour, and then some neutral colours. Not all Designers approach a site this way, but many do.
A general rule that many Designers incorporate is that 60% of a page or form is made up of neutral colours, 30% is the primary brand colour, and 10% is the secondary brand colour.
In the Fluent 2 Design System, Microsoft groups the colours into three sections: Neutrals, Brand, and Shared. Neutrals are as you might expect, your blacks, whites, and greys. The brand is your brand’s primary and secondary colours. And sharing is for colours that come from things like important danger messages in red, cautionary messages in orange, and positive messages in green.
Next, we need to account for button and link states.
Using a Color Map (i.e., Scale) for States
Finally, each of the neutrals, brands, and shared colours are put on a gradient scale. We call this the colour map. The scale goes from a dark contrast of the color to a bright version of the colour. In the Fluent 2 Design System, scales often are made up of 16 stops.
We then use different versions of the color we choose to account for the resting state of a button and also for hovering, selecting, and pressing. On a scale of 16, we often use 8 for the resting state, stop 7 is for hover, stop 4 for pressed, and stop 6 for selected.