Skip to content

TechRepublic

  • Top Products Lists
  • Developer
  • 5G
  • Security
  • Cloud
  • Artificial Intelligence
  • Tech & Work
  • Mobility
  • Big Data
  • Innovation
  • Cheat Sheets
  • TechRepublic Academy
  • CES
  • TechRepublic Premium
  • Top Products Lists
  • Developer
  • 5G
  • Security
  • Cloud
  • Artificial Intelligence
  • Tech & Work
  • Mobility
  • Big Data
  • Innovation
  • Cheat Sheets
  • TechRepublic Academy
  • CES
  • See All Topics
  • Sponsored
  • Newsletters
  • Forums
  • Resource Library
TechRepublic Premium
Join / Sign In
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

TechRepublic Premium

  • TechRepublic Premium

    Hiring kit: Community engagement manager

    PURPOSE Recruiting a community engagement manager with the right combination of experience and communication skills will require a comprehensive screening process. This hiring kit from TechRepublic Premium provides a flexible framework your business can use to find, recruit and ultimately hire the right person for the job. From the hiring kit: DETERMINING FACTORS, DESIRABLE PERSONALITY ...

    Published:  March 28, 2023, 12:00 PM EDT Modified:  March 29, 2023, 10:12 AM EDT Read More See more TechRepublic Premium
  • TechRepublic Premium

    Hiring kit: Chief experience officer

    PURPOSE Successful chief experience officers combine excellent communications skills with an intimate knowledge of customer expectations, company operations and industry standards. This hiring kit from TechRepublic Premium provides a workable framework you can use to find, recruit and ultimately hire the best candidate for CXO of your organization. From the hiring kit: DUTIES AND RESPONSIBILITIES ...

    Published:  March 28, 2023, 12:00 PM EDT Modified:  March 29, 2023, 10:26 AM EDT Read More See more TechRepublic Premium
  • TechRepublic Premium

    Hiring kit: Automation specialist

    PURPOSE Recruiting an automation specialist with the right combination of technical expertise and experience will require a comprehensive screening process. This Hiring Kit from TechRepublic Premium provides a flexible framework your business can use to find, recruit and ultimately hire the right person for the job. From the hiring kit: DETERMINING FACTORS, DESIRABLE PERSONALITY TRAITS ...

    Published:  March 27, 2023, 12:00 PM EDT Modified:  March 28, 2023, 12:48 PM EDT Read More See more TechRepublic Premium
  • TechRepublic Premium

    Hiring kit: Cybersecurity engineer

    PURPOSE Recruiting a cybersecurity engineer with the right combination of technical and industry experience will require a comprehensive screening process. This hiring kit from TechRepublic Premium provides a flexible framework your business can use to find, recruit and ultimately hire the right person for the job. From the hiring kit: DETERMINING FACTORS, DESIRABLE PERSONALITY TRAITS ...

    Published:  March 27, 2023, 12:00 PM EDT Modified:  March 28, 2023, 12:18 PM EDT Read More See more TechRepublic Premium

Services

  • About Us
  • Newsletters
  • RSS Feeds
  • Site Map
  • Site Help & Feedback
  • FAQ
  • Advertise
  • Do Not Sell My Information

Explore

  • Downloads
  • TechRepublic Forums
  • Meet the Team
  • TechRepublic Academy
  • TechRepublic Premium
  • Resource Library
  • Photos
  • Videos
  • TechRepublic
  • TechRepublic on Twitter
  • TechRepublic on Facebook
  • TechRepublic on LinkedIn
  • TechRepublic on Flipboard
© 2023 TechnologyAdvice. All rights reserved.
  • Privacy Policy
  • Terms of Use
  • Property of TechnologyAdvice