Microsoft Fluent Design System(microsoft.com)
microsoft.com
Microsoft Fluent Design System
https://www.microsoft.com/design/fluent/#/
24 comments
Microsoft does care about design. It is just that they don't understand what is good design. Some parts of Windows 10 has atrocious design. For example if you have multiple overlapping Command Prompt windows open, and they are filled with text, it is very hard to see where one window ends and another window starts, because the window edges are extremely thin. Drives me crazy on a daily basis.
Google and Apple are not much better. Neither have upgraded to Flat 2.0 [1] although Apple is slowly moving in that direction in the post-Jony-Ive era.
Apple's name used to be synonymous with good design. But that was back when Jobs was still around.
[1] https://www.nngroup.com/articles/flat-design/
Google and Apple are not much better. Neither have upgraded to Flat 2.0 [1] although Apple is slowly moving in that direction in the post-Jony-Ive era.
Apple's name used to be synonymous with good design. But that was back when Jobs was still around.
[1] https://www.nngroup.com/articles/flat-design/
Design is much more than flat vs skeuoumorphic. In fact, this debate (despite its publicity) is of little concern to designers. We are often more focused on how things work, not just how they look. Also, usability (what NNG tests) is but one aspect of design (an important one nonetheless).
As a designer, I feel truly inspired by Apple’s UI even today. Google tries to get design but their company goals do not place user experience on as high a pedestal as Apple, and they are always a little behind.
My two cents.
As a designer, I feel truly inspired by Apple’s UI even today. Google tries to get design but their company goals do not place user experience on as high a pedestal as Apple, and they are always a little behind.
My two cents.
But how things look has to reflect how they work. This is what many designers today are missing. Without it things become hard to figure out. Also, this is the aspect that designers have most control over. Most designers don't have the skills needed to go deeper into how things work.
> Google and Apple are not much better. Neither have upgraded to Flat 2.0 [1]...
[1] "Google’s Material design language is one example of flat 2.0 with the right priorities: it uses consistent metaphors and principles borrowed from physics to help users make sense of interfaces and interpret visual hierarchies in content."
[1] "Google’s Material design language is one example of flat 2.0 with the right priorities: it uses consistent metaphors and principles borrowed from physics to help users make sense of interfaces and interpret visual hierarchies in content."
I like some of their design. It's flat but "lit" better than Apple's flat. And unlike past UI guides, Microsoft seems to be actually following it for their own apps.
> On the hardware side, their Surface line is beautiful. But the modern Windows UI/UX is...uninspired and sterile. So is Edge, Explorer, and Office suite.
Ironically, their hardware is the one of few good things about them, but even that is starting to slip now IMHO.
For example, their last month Surface update. It seemed them going absolutely crazy with "details," but half an hour into the event and you can start see how poorly thought through the design was.
Just like Apple's early product, they are very "substance over essence." They add a lot of fancy features, but they themselves have poor idea what for they are.
Ironically, their hardware is the one of few good things about them, but even that is starting to slip now IMHO.
For example, their last month Surface update. It seemed them going absolutely crazy with "details," but half an hour into the event and you can start see how poorly thought through the design was.
Just like Apple's early product, they are very "substance over essence." They add a lot of fancy features, but they themselves have poor idea what for they are.
I guess it's a matter of personal taste but I actually love the new Windows 10 UI/UX. It's very simple and clean. I love the new line icons style as well.
After reading, I have no idea what Fluent Design is.
I share similar sentiment. This documentation needs to be better structured, perhaps more like the bootstrap documentation is, with clear examples of style class usage throughout. E.g.:
https://getbootstrap.com/docs/4.3/components/alerts/
Perhaps a gallery of example websites & apps could help a lot. That was the first thing I was looking for. Couldn't find any, so I had to drill into the docs in hopes of finding some case-by-case examples of each UI element. It really helps me to get going on frontend design, especially on a new framework, when I can see a completed sample that has some similarities to what I want layout-wise in my design.
https://getbootstrap.com/docs/4.3/components/alerts/
Perhaps a gallery of example websites & apps could help a lot. That was the first thing I was looking for. Couldn't find any, so I had to drill into the docs in hopes of finding some case-by-case examples of each UI element. It really helps me to get going on frontend design, especially on a new framework, when I can see a completed sample that has some similarities to what I want layout-wise in my design.
Comparing Fluent Design to Bootstrap is a bit apples-and-oranges. It's a design system for multiple possible implementation somewhat more akin to Material Design [1], and just like you might use a Material Design Theme to Bootstrap, you might find a Fluent Design Theme for Bootstrap.
The most direct Fluent Design System library to consider compared to Bootstrap would be Fabric UI which covers Web, iOS, and Android:
https://developer.microsoft.com/en-us/fabric#/
Up until recently Fabric UI didn't always match Fluent Design goals, but they've aligned to Fluent a lot more over recent releases.
Though, generally the "closest to homebase" implementation of Fluent Design is often regarded to be the WinUI library that is the basis for most "modern" UI controls in Windows, in particular its where you see the most of some of the exotic materials Fluent Design likes such as the "acrylic" backgrounds that a lot of people really associate with Fluent:
https://docs.microsoft.com/en-us/uwp/toolkits/winui/
[1] https://material.io/design/
The most direct Fluent Design System library to consider compared to Bootstrap would be Fabric UI which covers Web, iOS, and Android:
https://developer.microsoft.com/en-us/fabric#/
Up until recently Fabric UI didn't always match Fluent Design goals, but they've aligned to Fluent a lot more over recent releases.
Though, generally the "closest to homebase" implementation of Fluent Design is often regarded to be the WinUI library that is the basis for most "modern" UI controls in Windows, in particular its where you see the most of some of the exotic materials Fluent Design likes such as the "acrylic" backgrounds that a lot of people really associate with Fluent:
https://docs.microsoft.com/en-us/uwp/toolkits/winui/
[1] https://material.io/design/
I do not like this redesign because it does not feel cool. I believe they need stop doing redesigns, and focus on something about things that people care about for a few years, like fixing bsods.
No matter what design they pull over their software, it will not make genuinely substandard software cool.
No matter what design they pull over their software, it will not make genuinely substandard software cool.
I think "Fluent" is another word for compromized. The design has to fit in with all of the previous generations of design (which don't get updated) as well as 3rd party platforms like iOS and Android.
As far as I can tell, it looks like someone at Microsoft made a poor-man's Bootstrap clone.
Microsoft Fluent Design System was introduced in 2017.
The homepage is useless, but the real docs are decent https://docs.microsoft.com/en-us/windows/uwp/design/
Sadly, Microsoft still does not provide guidance or necessary APIs to desktop app developers (e.g. those primarily using .NET, Win32, WPF, WinForms, etc) to implement Fluent Design elements/controls.
I'm hopeful we'll see a change here, but fear it'll happen too late, that is, before another design language is introduced.
The homepage is useless, but the real docs are decent https://docs.microsoft.com/en-us/windows/uwp/design/
Sadly, Microsoft still does not provide guidance or necessary APIs to desktop app developers (e.g. those primarily using .NET, Win32, WPF, WinForms, etc) to implement Fluent Design elements/controls.
I'm hopeful we'll see a change here, but fear it'll happen too late, that is, before another design language is introduced.
> Sadly, Microsoft still does not provide guidance or necessary APIs to desktop app developers (e.g. those primarily using .NET, Win32, WPF, WinForms, etc) to implement Fluent Design elements/controls.
I feel like the guidance is clear enough at this point: migrate to WinUI 3. If you can't migrate your app "all the way" to UWP today, you can use XAML Islands in Win32 apps and embed UWP/WinUI XAML in places that are appropriate. Some common WinUI controls that you might want to use have easy to find wrappers on NuGet to do most of the XAML Island magic for you for WPF and WinForms applications.
I feel like the guidance is clear enough at this point: migrate to WinUI 3. If you can't migrate your app "all the way" to UWP today, you can use XAML Islands in Win32 apps and embed UWP/WinUI XAML in places that are appropriate. Some common WinUI controls that you might want to use have easy to find wrappers on NuGet to do most of the XAML Island magic for you for WPF and WinForms applications.
That sounds great on paper but XAML Islands introduces insurmountable airspace issues. For example, you can't have a nice acrylic window--per Fluent design--and draw your existing WPF XAML on top. It's a non-starter in most cases.
WinUI 3 has yet to be released. (It's only barely in alpha now.)
WinUI 3 has yet to be released. (It's only barely in alpha now.)
> That sounds great on paper but XAML Islands introduces insurmountable airspace issues. For example, you can't have a nice acrylic window--per Fluent design--and draw your existing WPF XAML on top. It's a non-starter in most cases.
If you are already using XAML, the WPF => UWP XAML transition shouldn't be so much of a hurdle as to be a "non-starter in most cases". In most Enterprise CRUD the biggest problem is DataGrid, but you pull one in from the Community Toolkit or one of the 3rd Party components vendors like Telerik. WinUI is talking about first party formally "Fluent" productizing the Community Toolkit's version sometime later in the 3.x timeline.
Of course, my view of it is biased by doing a bunch of WPF <=> Silverlight XAML transition work by hand for a few years, and compared to that era, WPF <=> UWP is a lot more civilized.
> WinUI 3 has yet to be released. (It's only barely in alpha now.)
I forgot that part. Just replace WinUI 3 with WinUI 2 for "today" (up until 20H1, supposedly), and my statement stands.
If you are already using XAML, the WPF => UWP XAML transition shouldn't be so much of a hurdle as to be a "non-starter in most cases". In most Enterprise CRUD the biggest problem is DataGrid, but you pull one in from the Community Toolkit or one of the 3rd Party components vendors like Telerik. WinUI is talking about first party formally "Fluent" productizing the Community Toolkit's version sometime later in the 3.x timeline.
Of course, my view of it is biased by doing a bunch of WPF <=> Silverlight XAML transition work by hand for a few years, and compared to that era, WPF <=> UWP is a lot more civilized.
> WinUI 3 has yet to be released. (It's only barely in alpha now.)
I forgot that part. Just replace WinUI 3 with WinUI 2 for "today" (up until 20H1, supposedly), and my statement stands.
Ever since the GUI lawsuit with Apple (yes, the one from 25 years ago), I think Microsoft has been stuck in this middle ground of design where they can’t actually design things the “right” way, as to avoid possible lawsuits. Maybe that’s not a real thing they should be worried about, but it has at least made them gun shy. This how we got things like “Recycle Bin” instead of the obvious trash can, and all kinds of other oddities.
I like "Recycle bin" more than trash can, because it makes it clear that the point of dropping things there is to "recycle" the disk space...
Personally, I find it "too wide".
Example:
https://static2.sharepointonline.com/files/fabric/fabric-web...
Example:
https://static2.sharepointonline.com/files/fabric/fabric-web...
On the hardware side, their Surface line is beautiful. But the modern Windows UI/UX is...uninspired and sterile. So is Edge, Explorer, and Office suite.
Google and Apple are the leaders in the application design space re. UI/UX, and I just don’t see Microsoft treating it seriously just yet.