My take on Fluent Design
When Microsoft announced their Fluent Design System back at Build 2017, I was very excited. I love subtle translucency/visual effects, smooth animations and shadows — and Fluent should deliver all of those.
However, like everything, Fluent can be improved. While this is in no way a comprehensive deep-dive on everything that can be refined, I will show a series of concept shots that should give across the ideas I have. Let’s begin!
Photos
Microsoft has really improved the photos app as of late. New features like Story Remix, facial recognition, and a refined gallery experience make using the app significantly more enjoyable. However, I’d like to make some changes.
First (and this is a theme seen across many of my designs), is a refined pivot control strip. A new standard pivot control is used — 15 point Segoe UI utilizing type weight and transparency to show the user which pivot is selected.
A new search box is also present — 48 points high and translucent. In-app Acrylic is used instead of see-behind Acrylic. There’s also significantly more padding in use, which gives the app a more open layout that is also easier on the eyes.
Users would, of course, have the option to change their spacing level in the Settings app and any apps utilizing the standard Universal Windows Platform (UWP) controls would automatically scale to match.
Store
The Store app received some quite significant changes recently — probably most notably being a change of name from “Windows Store” to “Microsoft Store”, accompanied by a change of icon. Acrylic material was also added.
My re-design of the Store app is more significant than the one for Photos. Here you can see the application of shadows to elements — namely the cards that form the carousel on the homepage of each pivot.
While not shown, these cards also take advantage of the Parallax component of Fluent. Scrolling along them would result in the image inside also scrolling a small amount. Tapping a card starts a connected transition into the relevant product page — offering a smooth experience.
Like in Photos, the same consistent pivot control is used, along with the same search box and button layout. Doing this helps to provide a continuous experience across first-party apps, something that is lacking at the moment in Windows 10.
Settings
The changes made to the Settings app are rather minimal at a glance. The new homepage layout was already found recently. I’ve simply increased the spacing around elements and applied an Acrylic upper portion that contains a search box.
It’s when you enter the relevant categories that you find more changes.
There is a new hierarchy on the settings pages — featuring bolder typography and increased iconography.
New categories and pages have also been added. A OneDrive category consolidates the settings previously contained in the desktop app’s own dialog and Personalization has a new layout & mode category that allows users to reduce the padding on apps (as shown earlier), and is also where they go to set the color theme (which now includes two new themes, light/dark greys, which compliment the pure white/black themes).
Start Menu
The biggest changes, however, come in the Start Menu. This is still an early work in progress, and I only have a single shot to show, but I will hopefully do more work soon and write further about the changes I’d like to see.
The new Start Menu shows only tiles — now up to 5 columns — and features a new search box at the top (wondering where the Cortana field was on all the shots you just saw? 😛).
This new Start Menu also brings interactive live tiles — a feature that has been highly requested. I’ve shown how the Spotify tile can have playback controls, but there are endless possibilities for what could be done here.
Controls at the bottom allow you to access the user menu (for sign out and locking the device), File Explorer, Settings and the power controls.
Conclusion
What I’ve presented is only a small number of the changes/improvements I’d make if I had control over Fluent Design and the design of Windows in general. There are many others. Regardless, I hope that you can see that the small changes I have made have an impact on the way apps feel and hopefully make them feel more consistent thanks to the use of standardized controls.
If you like what you’ve seen, you can follow me over on Twitter for more. Or follow Michael West Design. Thanks for reading! 😀
