Using Microsoft's Fluent 2 Design System in CRM Projects

Use Microsoft's Fluent 2 Design System in CRM, PowerApps, and Power Pages to Look Professional

‍

Microsoft's Fluent 2 design system is a cohesive design language to aid in the user experience of their Dynamics 365 and Microsoft 365applications. 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 for their customers for the following reasons:

1. Lack of awareness. Microsoft needs to market the design system more!
2. 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!
3. 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.
4. Perception of complexity. Developer soften 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 colors. Designer soften have a primary brand color, a secondary color, and then some neutral colors. 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 colors, 30% is the primary brand color, and 10% is the secondary brand color.

In the Fluent 2 Design System, Microsoft groups the colors into three sections: Neutrals, Brand, and Shared. Neutrals are as you might expect, your blacks, whites, and greys. Brand is your brand's primary and secondary colors. And sharing is for colors 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, brand, and shared colors are put on a gradient scale. We call this the color map. The scale goes from a dark contrast of the color to a bright version of the color. 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.

‍

Here's a Graphic to Help Think it Through

‍

‍

Happy Engineering!!!

‍

‍About Purely CRM

For close to a decade our Purely CRM team has been laser-like focused on delivering CRM solutions built solely on Microsoft Dynamics 365 CRM, combined with Power Apps and the Microsoft Power Platform. We’ve expanded our team immensely in the past years to help better serve our clients and partners. Most recently we merged with Endeavour Solutions, a top Microsoft ERP, CRM, and Cloud consulting firm to further expand our talented team of CRM consultants.

Our core focus is on large mid-market and enterprise CRM Design & Development projects, Staff Augmentation, and CRM Support. When needed we can also tap upon our peers at Endeavour for Dynamics 365 Business Central ERP to provide an All-in-One Cloud ERP-CRM.  We provide services to clients Coast to Coast across the United States and Canada. We do not use resources overseas.

Reach out to explore our track record, rates, skills, and approach to discover how we can collaborate and drive YOUR SUCCESS.