
Microsoft Fluent Design System - fortran77
https://www.microsoft.com/design/fluent/#/
======
dlivingston
Despite this beautiful page, and the “new” Microsoft of the Nadella era, I’m
not yet convinced that Microsoft actually cares about design.

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.

~~~
petilon
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/](https://www.nngroup.com/articles/flat-design/)

~~~
ananth22by7
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.

~~~
petilon
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.

------
_jezell_
After reading, I have no idea what Fluent Design is.

~~~
bob1029
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/](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.

~~~
WorldMaker
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#/](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/](https://docs.microsoft.com/en-us/uwp/toolkits/winui/)

[1] [https://material.io/design/](https://material.io/design/)

------
dang
Related from 2017:

[https://news.ycombinator.com/item?id=14347090](https://news.ycombinator.com/item?id=14347090)

[https://news.ycombinator.com/item?id=14323553](https://news.ycombinator.com/item?id=14323553)

[https://news.ycombinator.com/item?id=14317171](https://news.ycombinator.com/item?id=14317171)

------
withinrafael
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/](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.

~~~
WorldMaker
> 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.

~~~
withinrafael
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.)

~~~
WorldMaker
> 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.

------
orev
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.

~~~
zozbot234
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...

------
LemonAndroid
Personally, I find it "too wide".

Example:

[https://static2.sharepointonline.com/files/fabric/fabric-
web...](https://static2.sharepointonline.com/files/fabric/fabric-
website/images/controls/android/datetimepicker/calendar-view.png)

