By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Cookie Policy for more information.

Improve Your Creative Process with Microsoft Fluent Design System

September 29, 2022
5 min read
Improve Your Creative Process with Microsoft Fluent Design System
Case Study Details
No items found.
No items found.

Design systems have been around for several years. It’s safe to say they are here to stay. These frameworks offer many benefits; a key stand-out is that they provide a foundation to quickly produce high-quality solutions and systems with minimum time and effort. The real value of a design system lies in its ability to give designers and engineers the guidance they need to create smoother user experiences and digital products. Good design systems help designers understand what to make and how to make it, but they also provide the rationale and motivation behind the Design.

At a high level, a Design System can be many things; however, at its basic level, you could sum it up as a systematic design approach to product development — complete with guidelines, principles, philosophies, and code. It shines a spotlight on how a team designs, making it a fantastic tool for scaling your design practice, reducing the need for handoff, and promoting more collaboration.

A designer sketching out wireframes in their notepad.

When navigating through the ecosystem of design systems out there, there are many to choose from. It can be overwhelming to know where to begin. Learning a design system is almost like learning a new language. Each has unique methods and organization, so it can be hard to know where to start.

Some of the more popular frameworks include Material Design from Google, the Human Interface Guidelines from Apple, and Shopify Polaris, to name a few. Microsoft is no different. They have invested in their framework, the Fluent UI Design System, which has progressed and shifted over time.

Not all design systems are built the same

Each framework has its unique strengths and weaknesses. The ones I listed above have matured over the years and are already following the latest patterns used in the tech sector. Your entire team should consider this carefully before settling on a specific design system. You will need to weigh the pros and cons of each, which can vary depending on the type of project you’re looking to do. Sometimes it’s as simple as the scope and scale of a project or the tech stack needed to develop your solutions.

If you’ve spent time building and developing products, you will inevitably come across specific pain points resulting in doing things the hard way. Sometimes those activities are repeated across multiple projects, which can become a huge time sink and investment. There must be a better way that is more efficient and effective when building products at scale.

Before we dive into Microsoft design language, if you’re using Microsoft 365 and SharePoint Online, we highly recommend you watch our recent webinar for help on creating better design in SharePoint and a free tool that makes it easier than every to get it right across all sites and pages. Take a look.

Enter the Microsoft Fluent Design System

Fluent Design is an open-source, cross-platform system. It is a highly evolved shared design language that’s been used by the design team at Microsoft for years, which they have shared with the Microsoft developer community. It’s a state-of-the-art framework for Windows apps and platforms, broken down into various mediums like the Web, Windows, iOS, Android, etc. As Microsoft Partners, the team at 2toLead has been using the Fluent UI system for many years. It has transformed how we work together as a team and serve our customers.

Microsoft Fluent Design System overview slide - getting started!.

Endorsed and supported by Microsoft

The Fluent Design System has been fully endorsed and backed by Microsoft. They are all-in with this framework which can only mean good things for everyone else – builders, designers, developers, and end-users all benefit from Fluent UI!

It can give designers and developers a solid foundation to create intuitive, accessible, and powerful experiences using the latest tried and true user interface patterns. It takes some guesswork out of the equation when building a new solution. Designers and developers can rest easy knowing they use proven components and patterns throughout their work. This can give our solutions a polished feel that customers expect.

We also like that this system is not a top-down approach. Instead, it is a platform on which we can leverage our expertise based on a shared set of standards that already work. This network approach allows all parties to be involved and supported while meeting the solution requirements.

Why does it matter? Benefits of a design system

A Shared Vision, Cross-Functional Collaboration

A good design system helps you say goodbye to operational silos. With a comprehensive approach to Design and execution, your design and development teams can collaborate cohesively from start to finish on each new project.

At 2toLead, we have seen the actual value of embracing this community approach. Aside from a common language and shared approach to industry-leading best practices, the Fluent Design System shines most in that it has elegantly solved how we build better products together as a team. This design-to-code system gives us a shared foundation with connected goals that our teams can embrace.

A designer working at their computer building out a prototype in Figma with the Fluent Design System.

Take a look at our Figma community, here.

Learning From Past Experiences

For all the time we spend working to solve the holistic problem, there is just as much time defining all the nitty-gritty details. What does this dropdown look like on hover? How about this button? These are time-consuming tasks. Now, these detailed questions are important but aren’t unique problems.

The Fluent UI lets us borrow from shared experiences, tools, and communication and allows creators to become more efficient, saving creative energy for problem-solving where it’s most needed! It takes the lessons of doing certain things the hard way and providing an efficient and effective way to build better products for our customers collectively.

“How we do something is as important, if not more important than what we do.” Joseph McLaughlin - Partner Director of Design, ECD at Microsoft

Design at Scale with Speed and Efficiency

Efficiencies can be extended between multiple teams or products. When one team has spent time and effort solving a problem, why shouldn’t another team in your company also benefit from this work? The Microsoft Fluent Design System is no different; it mitigates duplicative work — like repeatedly creating the same elements and concepts — so your team can move more quickly. We can design complex solutions at scale while building better products for our customers. It has also fostered stronger partnerships between teams. The challenge has always been learning how our teams can scale and grow collectively.

Examples of icons used in the Fluent Design System.

At scale, Design and development involve many moving parts, processes, and teams. At best, it can be challenging for a seasoned team to grow successfully. Using the Fluent Design System takes out some of that guesswork — the ambiguity on how to approach certain problems while building solutions are removed from the equation. With less risk, our teams can do more and learn from proven industry standards that have already solved some significant challenges. We can be intentional with our targets and focus our energy and attention on problem-solving for the solution.

More Coherent Experiences

Best-in-class practices around performance, accessibility, styling, theming, testing, component design and usage, and browser support are all baked into the Fluent Design System.

It can be disappointing when things work differently for no (or some unexplained) reason. It frustrates customers, frustrates us, and motivates us to make it better. Supporting the Fluent Design System helps us simplify and become more effective, which is great. It also allows us to deliver more coherent and connected experiences for our customers. Everyone wins!

Who can benefit the most from the Fluent Design System?

In short, we all can benefit from it!

Removing some risks helps project managers close the gap in delivery and save loads of time and effort. Established best practices give designers, developers, and upper management a set of standards that can help remove some guesswork when approaching complex solutions. Seamless experiences that are shared across multiple apps and programs serve the end-user.

It goes further

The aim is to close the gap between Design concepts and code. As technology professionals, we can leverage a standard design and development language in all our projects. Anyone building inside the Microsoft ecosystem should take advantage of this shared language. Accessible best practices, standard components, controls, and designated style classifications with proven, user-friendly patterns. Everyone wins!

Where is it headed in the future?

The Fluent Design System is constantly evolving because the technology behind it is always changing. The positive impact and commitment for better collaboration between the teams that build products are needed now more than ever. The approach to how we work across disciplines to deliver seamless experiences with efficiency and effectiveness is the new normal. The positive impact this has on all parties involved is essential and expected by our end-users.

Dashboards, lists, landing pages and more. An example of the scale that can be achieved with the Microsoft Fluent Design System.

Given the history, time, and effort that Microsoft has already placed on the Fluent Design System, it’s safe to say that it will be around for some time to come. We have seen how deeply the Fluent Design System is already so rooted in Microsoft’s vast software ecosystem that it’s hard to imagine building solutions without it!

The Evolution of the Microsoft Fluent Design System

It’s important to keep in mind that a Design System is never really “done”; this is the same for the Microsoft Fluent Design System. It will grow and evolve just like any other product. As a website or product changes over time, there will be a need for new design and development patterns to be created. By ensuring that the right governance processes are in place, teams can understand when and how to best introduce new elements into the system.

Fluent makes design easier, our free resource makes it effortless

Learn how to remove creative roadblocks and challenges with SharePoint Online, and discover how our free tool makes the process painless, in our recent webinar. Watch now.

Get Started with the Fluent Design System
Case Study Details
No items found.
No items found.

Similar posts

Get our perspectives on the latest developments in technology and business.
You will love the way we work. Together.
Next steps
Have a question, or just say hi. 🖐 Let's talk about your next big project.
Contact us
Popular insights
One of our goals is to help organizations build a better digital workplace experience.
Access knowledge center