Microsoft Introduces Its New Metro UI: Fluent Design

Yesterday, Microsoft officially unveiled its Fluent Design System at its Build developers conference. It was previously known as Project Neon.

The Fluent Design System is designed to be the true successor to Microsoft’s Metro design, and will appear across apps and services on Windows, iOS, and Android.

Microsoft is planning to implement these subtle design changes gradually. Some are already available in new updates to existing Windows 10 apps, and more will start to appear in Windows itself as Microsoft updates the operating system with the Fall Creators Update and future updates. “It’s going to be a journey,” says Microsoft director Aaron Woodman, noting that these design changes will appear over time in Windows and other products. [1]

In his presentation at Build yesterday, Microsoft’s Joe Belfiore demonstrated a number of Fluent Design changes. “You’re going to see Fluent Design show up in the Windows shell, in our apps, and across devices,” explains Joe Belfiore. Microsoft is focusing on light, depth, motion, material, and scale for its Fluent Design, with subtle changes that make the design feel like it’s moving during interactions in Windows.

 Below are some images from Mr. Belfiore’s presentation.

holographicdesktop1.0Screen_Shot_2017_05_11_at_2.30.23_PMScreen_Shot_2017_05_11_at_2.30.56_PMScreen_Shot_2017_05_11_at_2.31.04_PMScreen_Shot_2017_05_11_at_2.31.42_PMScreen_Shot_2017_05_11_at_2.31.55_PMScreen_Shot_2017_05_11_at_2.32.16_PMScreen_Shot_2017_05_11_at_2.32.36_PMScreen_Shot_2017_05_11_at_2.32.45_PMScreen_Shot_2017_05_11_at_2.33.55_PMScreen_Shot_2017_05_11_at_2.34.09_PMScreen_Shot_2017_05_11_at_2.34.19_PMScreen_Shot_2017_05_11_at_2.35.50_PMScreen_Shot_2017_05_11_at_2.36.20_PMScreen_Shot_2017_05_11_at_2.36.39_PMScreen_Shot_2017_05_11_at_2.37.10_PMScreen_Shot_2017_05_11_at_2.37.22_PM

Sources

[1] Tom Warren, Fluent Design is Microsoft’s new Metro UI for Windows, The Verge, May 11, 2017, https://www.theverge.com/2017/5/11/15615812/microsoft-fluent-design-system-project-neon-features.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.