29

As Microsoft recently released a design system called "Fluent Design", is it appropriate to apply it on web design?

Most of my searching has been for all Microsoft platforms, C# app, F# etc.. I have never seen anything regarding in web design.

No Name Pro
  • 160
  • 1
  • 7
StanLe3
  • 360
  • 1
  • 3
  • 11
  • The question has been closed and can not be answered. But the answer is yes it can be used for web development. Metro design was the first step. Material design got some of its principals and went grewed it up. – Farshid Saberi Nov 30 '18 at 09:17
  • The question has been closed and can not be answered. But the answer is yes it can be used for web development. It has been evolved by Fluent Deisgn. There are some frameworks for it that has been mentioned in other answers. I add https://metroui.org.ua that am familiar with it in about 3 years. – Farshid Saberi Nov 30 '18 at 09:24
  • Fabric Core is a CSS Library for Fluent UI: https://developer.microsoft.com/en-us/fluentui#/get-started/web#fabric-core – No Name Pro Aug 14 '20 at 14:44

7 Answers7

13

April 2020 Update primary destination for Fluent Design is Microsoft's Fluent Design System website.

For official web frameworks go to github repos:

  • Fluent UI - A set of React components for building Microsoft web experiences. Good support and big following.
  • Office UI Fabric with only includes grid, typography, icons and utilities. No component and no dependency on React. Not very well maintained.

Some tutorials are available here.

Jurijs Kovzels
  • 5,420
  • 3
  • 23
  • 37
9

Take a look at Microsoft Web Framework for details on the components, HTML structure and CSS that you would use to meet Microsoft's web design principles.

Mark Cooper
  • 6,738
  • 5
  • 54
  • 92
  • 5
    Is that site really about Fluent Design? I don't see "Fluent" mentioned anywhere on the site, and it looks much more like Metro to me than Fluent. I don't see a single example of acrylic, lighting effects, or reveal effects, and very little if any motion. – Josh Oct 23 '17 at 04:42
  • You make a good point @Josh, I don't see any references to fluent on that framework anymore either. It seems to still be the main resource for MS web style guidance though. – Mark Cooper Oct 23 '17 at 10:05
  • The url is now here … https://www.microsoft.com/en-us/mwf – Sql Surfer Jun 07 '18 at 18:59
  • 13
    This website is an internal Microsoft Only Website in effect. Not for general public use. – Sql Surfer Jun 07 '18 at 19:30
5

I'm just quoting Microsoft here.

It is perfectly relevant to the web design. Since these are just principles and not specific to any platform. So if you are a web developer and like the Microsoft way of thinking. it is perfectly fine to build a Web UI framework around these principles.

Please check out this video in which your question has been discussed in the Q&A session (22:00).

halfer
  • 19,824
  • 17
  • 99
  • 186
Umamaheswaran
  • 3,690
  • 3
  • 29
  • 56
5

just copy-paste from the bottom of the MWF homepage.

This site is restricted to use by Microsoft employees and authorized vendors. No materials or code from this site may be used on non-Microsoft websites. By entering this site, you confirm that you are a Microsoft employee or an authorized vendor working on behalf of Microsoft. You further agree that the materials and code constitute Microsoft’s intellectual property, are limited for use on Microsoft-operated websites, and are subject to the applicable agreements governing your employment or vendor relationship with Microsoft.

Vasan
  • 4,810
  • 4
  • 20
  • 39
arisw
  • 67
  • 1
  • 3
  • 3
    From the bottom of what page? Is this meant to be a comment on another answer, rather than its own stand-alone answer? – Josh Oct 23 '17 at 04:39
  • @Josh, probably the usual sub-100-not-permitted-to-comment case. – Sz. Dec 13 '17 at 18:29
  • 2
    Or more-relevant, you're not allowed to use Fluent Design if you aren't Microsoft. – Kody May 23 '18 at 20:23
5

You can use this library for Reveal Effect in Fluent Design System. And you need to wait for the backdrop-filter CSS supported for background blur effect.

https://github.com/d2phap/fluent-reveal-effect

enter image description here

Phap Duong Dieu
  • 164
  • 2
  • 7
4

Check out the Fluent Kit framework.

It is a Fluent Design extension to the current Bootstrap version, using jQuery, so should be an easy starting point for anybody, really. Also, it is very well documented and the "work in progress", so you can expect further functionalities as the design itself develops.

Important update: Fluent Kit, as well as the whole Nespero project is closed.

wscourge
  • 10,657
  • 14
  • 59
  • 80
2

Update: Fluent design now supports web, Android and IOS. https://www.microsoft.com/design/fluent/#/

Update: a high quality 3rd party react component framework called react-uwp can be found here

Update: new website is at https://fluentweb.com/

Update: link is now dead, and https://getmwf.com doesn't mention fluent design anymore.

Microsoft has a web framework for its own employees and vendors.

Looks like they are introducing fluent design components to this framework.

https://fluent.getmwf.com/

rony l
  • 5,798
  • 5
  • 35
  • 56