Microsoft shows off Fluent Design coming to Edge with the Fall Creators Update

Microsoft's newly announced Fluent Design System is coming to all Windows 10 apps, and eventually the system. Up until now however, we haven't really seen what the Edge team has planned for Fluid Design. Since it's coming to basically everywhere else, it'd make sense for it to come to Edge too.

At a breakout session during Build, Microsoft did showcase what they've got planned for Edge with the Fluent Design System. Unlike other apps, the Edge team are adding Fluent Design in more subtle ways, making the overall user-interface and experience far more enjoyable than currently, moving away from its very flat user-interface.

For example, the Acryilic material (blur) will only be applied to the titlebar and tabs user-interface, giving the app window a slight-transparent effect. Most of the Fluent Design changes coming are more to do with Motion, bringing super smooth animations to things like dropdown menus, opening a new tab, and more.

Another Fluent Design element being added is depth, which can be seen mostly when showing tab previews. You can see a shadow that makes the user-interface look slightly further back than the address bar, again making for a much nicer and clean interface utilizing all of the Fluent Design System.

We're expecting Microsoft Edge's Fluent Design features to show up with Redstone 3, also known as the Fall Creators Update, later this year. Stay tuned to Windows Central for more.

Zac Bowden
Senior Editor

Zac Bowden is a Senior Editor at Windows Central. Bringing you exclusive coverage into the world of Windows on PCs, tablets, phones, and more. Also an avid collector of rare Microsoft prototype devices! Keep in touch on Twitter: @zacbowden.

  • Have they mentioned officially that they are bringing Edge to the Store?
  • They said they won't, "but never say never".
  • That's a shame
  • I'd appreciate a source on this
  • Mspoweruser latest article
  • A reputable source would be better
  • Mspoweruser got their response at Build :P
  • I'm sure they will eventually put Edge in the store. Holding back browser updates because they're a part of an OS update doesn't seem in-line with their idea of breaking off features like alams, calculator, photo viewer, video player, and many more.
  • That's cool, how about making simple copy and paste work on Freshdesk in Edge?
  • What's Freshdesk?
  • It's an issue ticket management system. Copy/paste broke in Edge at some point during the Creators Update builds. Before that, copy/paste stripped out all formatting (including line feed!) during copy/paste operations from one Edge page to another, even within the same tab!
  • *Fluent ;-)
  • Six times in the article and once in the title. That's impressive 😁
  • Why haven't they brought full screen mode back?
  • You can enable it by using win+shift+enter. 
  • The problem though is the lack of actual button or menu to access it. We can even reopen closed tabs with CTRL+SHIFT+T, but why not have it on history tab menu so user have visible UI to browsed closed tabs? Basic things seriously has to be implemented by now. On the other hand, looking forward for Fluent Design Language implemented on Windows 10 and its apps. Hopefully the UI framework for UWP would implement these without a need for developer to manually implement their own, such as animations and gestures.
  • That's the shortcut to full-screen any UWP app. Edge doesn't have a button because it's not ready for it yet. All it does is fullscreen the page; the address bar and UI are inaccessible.
  • Design System ^.^
  • Ye, but try that on a f**king tablet. :\
  • Use the full touch keyboard. That's what I do on my surface. It's not perfect but it's possible.
  • The option is available in Edge 15 in about:flags :D
  • Must be dark theme to show the effect? I have 16193 on my VM but none of apps show any neon 
  • i had to activate transparency effects on Colors settings :)
  • That setting is activated already
  • Me either, i have updated all the apps and nothing changes
  • They're still A/B testing. It took me a week to get the updates.
  • Really? I update all apps on the store and I open when done, it's work,my neon apps : calculator, clock, photo and groove music.
  • Looks nice. Also, they're making a great documentation for it. I hope now the apps get more consistent
  • Yeah, what's really need to look for here is the documentation and how the new UI framework for UWP implemented these new design by default, without a need for developers to manually adding them and the default layouts should be beautiful enough without the developer being a designer. The problem of MDL2 when Windows 10 first introduced were being so inconsistent on its own and by default apps don't even incorporate system-wide animations and page transitions. Even its been implemented, it wasn't as smooth and seamless as Metro was.
  • Bring to Edge for Mobile.
  • MS is taking a break from mobile windows. If you are in the MS ecosystem, your best bet for would be to get a One Plus 3T and install Cortana, Onedrive and the other MS apps..
  • Yep and in term "break"  you mean,  they are DONE with mobile.  
  • No thanks. Android still isn't good enough. :)
  • AND, most importantly, install these two:
  • It'll be really difficult to this for Mobile. Not enough CPU and RAM power right.
  • Yes.
  • We will get Edge 16 on Mobile, though the tab bar isn't the same and doesn't have the space to be transparent/blurry.
  • Edge to Mobile?  W10 Mobile probably won't even get RS3.    Over at All About Windows Phone, they're predicting that Mobile stays on RS2 feature 2, and that'll be it.  
  • Nice creators update 2.0
  • They need to fix that ugly mess called the settings page. And actually the whole UI. I feel like the current UI is just a placeholder for the actual thing coming sometime in the future.
  • What's wrong with the settings page? I don't understand these complaints about it...
  • Wire-Icons are good for actions when they're small in size. Large main icons should have more detail & preferably colour.
    Also that plain white / black background is just... too plain.
  • I don't mind it at all
  • Is it Fluent Design or Fluid Design? We should get this straightened first.
  • so confused right now
  • Fluent Design Language
  • Fluent Design System actually 😂
  • It's called Project Neon, codenamed Fluent Design Language :P
  • It's the opposite
  • Nice. Now edge has to be more touch friendly. It's hard to target those small buttons and menus on tablet mode.
  • ironically, Opera has more comfortably spaced buttons than Edge on tablet mode.
  • Opera had. V45 has broken everything.
  • Edge already has giant buttons and menus when compared to other browsers, including IE. I think you just need to increse your scaling.
  • Yes it's much more comfortable than other browsers. But how will I increase just edge's UI elements? Adjusting windows display settings will affect all the apps
  • I don't think you can increase Edge individually, but my point was that if Edge, which already has giant buttons, is too small for you, then everything must be too small for you. I certainly wouldn't want Edge to be any bigger than it is already.
  • This implementation seems a lot better than just making everything transparent.
  • It always boggles me, they talk about all the improvements and how great it will be, but there is no basic functionality implemented. For example, have anyone tried to export an annotated page from Edge to PDF file? I mean you open a page, draw on it, make remarks and so on and logically you want to send it to someone. And there is no option to export it to a PDF file... Or even a simple JPEG. How is that a thing? And before you suggest screenshots or Ctrl+P - those are workarounds that don't provide desired result...
  • It's coming with the Edge update
  • Have you tried the Share button?
  • Sorry for the off-topic comment, but is it normal that I haven't received Creators Update till now? It has been released for a few weeks already!
  • They're rolling it out slowly over several months, but if you don't want to wait you can install the windows update assistant and it'll push the creators edition straight to you. All details and link to update assistant app are here: Cheers, John :)  
  • Yes, it's normal, because now CU is buggy for some configurations and for some specific uses. I did force the upgrade a month ago, and sometimes I feel sorry. For example, 14393 took 3 months from release to get to CBB, as did 10586 before that.   
  • @Zac Bowden Hi Zak, has there been any mention at Build re continued development and improvement of Continuum?  It's a feature I've massively incorporated into my working day and it would be a crying shame if it lands on the scrap heap. 
  • Why can't they just apply this to ALL system title bars already? Who do it per-app basis?
  • Apps: UWP APIs
    Win32: Old Win32 APIs? I don't know.
  • This has hardly anything to do with APIs. They should implement this to system title bars, so that apps using default title bars would also have transparent ones, as it was back in the days of Vista and 7.
  • I'm sure I'm in the minority, but whether it was Vista, 7, 8, I always looked for ways to turn off transparency.  Will I be able to turn off those transparency effects in Fluent Design?  I don't want to see what's behind the app.
  • You were always able to turn them off. Nothing's changed. Just go to Color Personalisation settings.
  • I'm not using any of the Insider builds, so I have to ask.  Thanks.
  • Don't need to. Same setting as for Start menu transparency.
  • The transparency is much more subtle in Windows 10, the People app recently got an update with the Fluent Design Language.
  • ...
  • Does Fluent Design = Project Neon?
  • Yes :)
  • Depth! Depth! Depth! depth is my favourite, along with motion (the demo examples of both were sick)
  • Not sure when this will be available
  • Yes and mspoweruser said that
  • Havent even gotten the original Creators update!! Or are they the same update?