Skip to content

TechRepublic

  • Top Products
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • Accounting
  • CRM
  • Academy
Resources
  • TechRepublic Premium
  • TechRepublic Academy
  • Newsletters
  • Resource Library
  • Forums
  • Sponsored
Go Premium
Popular Topics
  • Top Products
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • Accounting
  • CRM
  • Academy
  • Project Management
  • Innovation
  • Cheat Sheets
  • Big Data
  • Tech Jobs
View All Topics
Go Premium
Microsoft

See Windows 10’s new look: Microsoft’s Fluent Design System in action

By Nick Heath August 14, 2017, 2:07 AM PDT

Image
1
of 16

See Windows 10’s new look: Microsoft’s Fluent Design System in action

Windows, but with a fresh face

Image: Microsoft

Windows, but with a fresh face

Windows 10 will soon look and feel different, courtesy of Microsoft’s new Fluent Design System.

The Fluent Design System will overhaul the OS not only to be more visually appealing, but also to make its interfaces more intuitive to use.

Building on the touch-first ethos of Microsoft’s earlier Project Neon, the Fluent Design System is aimed at creating an OS that works across all sorts of Windows devices, encompassing PCs, phones, tablets, and VR and AR headsets.

The overhaul will add a design that is more distinctive than Project Neon, adding light, depth, motion, and the quality of physical materials to Windows’ UI and apps. UI elements will also scale to remain usable across different devices, whether displayed on a widescreen monitor or a pocket-sized phone.

This new look will be phased in over time, with the first iteration of Fluent design already popping up in some apps, and due to be more widely introduced with the release of the Fall Creators Update in October. Fluent Design will not just inform the look and feel of Windows, but Microsoft has also released guidelines so third-party developers can incorporate it into their software.

Here’s what Microsoft’s Fluent Design System looks like.

Image: Microsoft
See Windows 10’s new look: Microsoft’s Fluent Design System in action

A revealing UI

Image: Nick Heath / TechRepublic

A revealing UI

Part of the ‘Light’ element of Fluent Design, Reveal is the name given to the glow given off by the cursor that highlights borders and other elements of the interface as the cursor moves over them, as demonstrated here in the People app. The cursor also pulses with light when the user clicks or taps.

The effect is also due to be added to the Start Menu and the Taskbar.

Image: Nick Heath / TechRepublic
See Windows 10’s new look: Microsoft’s Fluent Design System in action

Lighting up controls

Lighting up controls

A Microsoft mock-up shows how Fluent Design’s Light feature could be used to highlight the controls in a 360-degree video.

See Windows 10’s new look: Microsoft’s Fluent Design System in action

Finger on the pulse

Image: Microsoft

Finger on the pulse

Another Microsoft demo, highlighting the Reveal glow and the pulse of light when tapping on tiles.

Image: Microsoft
See Windows 10’s new look: Microsoft’s Fluent Design System in action

Animated experience

Image: Microsoft

Animated experience

Here is a mock-up of how the People app could use animation and the Reveal effect to create a more intuitive and visually pleasing experience.

Image: Microsoft
materialdesign.jpg
materialdesign.jpg
See Windows 10’s new look: Microsoft’s Fluent Design System in action

Material design

Image: Microsoft

Material design

This orange box is an example of Acrylic, the first and only material to be introduced by Microsoft to date. It has the look of frosted plastic, a translucent material made almost opaque by a grainy Gaussian blur.

It can be used throughout app interfaces, with developers adjusting its appearance, color and opacity. Where computers have a sufficiently powerful GPU, pixel shaders will be used to improve the look of the translucent borders and other material effects.

Image: Microsoft
See Windows 10’s new look: Microsoft’s Fluent Design System in action

Acrylic in action

Image: Nick Heath / TechRepublic

Acrylic in action

Here you can see Acrylic as the background to the Start Menu.

Image: Nick Heath / TechRepublic
See Windows 10’s new look: Microsoft’s Fluent Design System in action

Maps gets material

Image: Nick Heath / TechRepublic

Maps gets material

In the Maps app, the edge of the map is visible through the translucent Acrylic material used for the bar at the top of the Window. Acrylic can also be found in Photos, Maps and Calculator.

Image: Nick Heath / TechRepublic
animationstore.gif
animationstore.gif
See Windows 10’s new look: Microsoft’s Fluent Design System in action

Fluent Design in motion

Fluent Design in motion

An example of the type of animation that typifies the Motion facet of the Fluent Design System.

As the user scrolls down in the Groove Music App, the playlist cover shrinks, allowing the user to focus on the song listings. You can also see the Acrylic material at the top of the page.

See Windows 10’s new look: Microsoft’s Fluent Design System in action

Fresh perspective

Image: Nick Heath / TechRepublic

Fresh perspective

To focus the user’s attention and create an aesthetically pleasing effect, certain elements of the interface will play with perspective, as can be seen from this parallax scrolling in the image when scrolling down in the Windows Store.

Image: Nick Heath / TechRepublic
See Windows 10’s new look: Microsoft’s Fluent Design System in action

Smooth transitions

Image: Microsoft

Smooth transitions

An example of how animation could be used to transition smoothly between menus in Windows 10’s forthcoming Timeline feature.

Image: Microsoft
See Windows 10’s new look: Microsoft’s Fluent Design System in action

Conveying information

Image: Microsoft

Conveying information

A variety of animations are used to convey information in this Microsoft mock-up of a dashboard using Fluent Design.

Image: Microsoft
See Windows 10’s new look: Microsoft’s Fluent Design System in action

Minimalist design

Image: Microsoft

Minimalist design

Here’s Microsoft’s demo of a simple animation in a voice recorder app.

Image: Microsoft
See Windows 10’s new look: Microsoft’s Fluent Design System in action

Added depth

Image: Microsoft

Added depth

Microsoft hasn’t rolled out many examples of how depth might be used in Fluent Design to date, but here is an a Microsoft mock-up showing how it could make information stand out in a calendar app.

Image: Microsoft
See Windows 10’s new look: Microsoft’s Fluent Design System in action

Beneath the surface

Image: Microsoft

Beneath the surface

Another demonstration of how depth could be used within apps from a Microsoft demo.

Image: Microsoft
See Windows 10’s new look: Microsoft’s Fluent Design System in action

The write stuff

Image: Microsoft

The write stuff

The Fluent Design ethos should result in Windows 10 apps having improved support for a wider range of inputs including voice, touch and digital pens.

Image: Microsoft
  • Microsoft
  • Software
  • Account Information

    Share with Your Friends

    See Windows 10’s new look: Microsoft’s Fluent Design System in action

    Your email has been sent

Share: See Windows 10's new look: Microsoft's Fluent Design System in action
Image of Nick Heath
By Nick Heath
Nick Heath is a computer science student and was formerly a journalist at TechRepublic and ZDNet.
  • Account Information

    Contact Nick Heath

    Your message has been sent

  • |
  • See all of Nick's content

Daily Tech Insider

If you can only read one tech story a day, this is it.

TechRepublic TechRepublic
  • TechRepublic on Facebook
  • TechRepublic on X
  • TechRepublic on LinkedIn
  • TechRepublic on YouTube
  • TechRepublic on Pinterest
  • TechRepublic RSS
Services
  • About Us
  • Newsletters
  • RSS Feeds
  • Site Map
  • Site Help & Feedback
  • FAQ
  • Advertise
  • Do Not Sell My Information
  • Careers
Explore
  • Downloads
  • TechRepublic Forums
  • Meet the Team
  • TechRepublic Academy
  • TechRepublic Premium
  • Resource Library
  • Photos
  • Videos
  • Editorial Policy
  • Legal Terms
  • Privacy Policy
© 2025 TechnologyAdvice. All rights reserved.
CLOSE

Create a TechRepublic Account

Get the web's best business technology news, tutorials, reviews, trends, and analysis—in your inbox. Let's start with the basics.

Already registered? Sign In
Use Facebook
Use Linkedin

* - indicates required fields

CLOSE

Sign in to TechRepublic

Not a member? Create an account
Use Facebook
Use Linkedin

Lost your password? Request a new password

CLOSE

Reset Password

Please enter your email adress. You will receive an email message with instructions on how to reset your password.

Check your email for a password reset link. If you didn't receive an email don't forgot to check your spam folder, otherwise contact support.

Back to login
1 Finish Profile
2 Newsletter Preferences
CLOSE

Welcome. Tell us a little bit about you.

This will help us provide you with customized content.

No thanks, continue without
1 Finish Profile
2 Newsletter Preferences
CLOSE

Want to receive more TechRepublic news?

Newsletter Name
Subscribe
Daily Tech Insider
Daily Tech Insider AU
TechRepublic UK
TechRepublic News and Special Offers
TechRepublic News and Special Offers International
Executive Briefing
Innovation Insider
Project Management Insider
Microsoft Weekly
Cloud Insider
Data Insider
Developer Insider
TechRepublic Premium
Apple Weekly
Cybersecurity Insider
Google Weekly
Toggle All
No thanks, continue without

You're All Set

Thanks for signing up! Keep an eye out for a confirmation email from our team. To ensure any newsletters you subscribed to hit your inbox, make sure to add [email protected] to your contacts list.

Back to Home Page
×