Microsoft To Do. This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use. Apr 10, 2018 Science in the System: Fluent Design and Material Using physical elements to create a visual hierarchy and organize content in a way that’s easy for the user to process Mike Jacobs. Nov 29, 1959  What is Fluently? Fluently is the app that perfectly replaces your agenda. Just select a date and start inking with your digital pen, it is that easy to start organizing your schedule! Why 'Fluently'? Fluently’s name comes from the fact that it embraces Microsoft Fluent Design System as its philosophy.

1. Microsoft Fluent Design

Formerly known as Project Neon, the Microsoft Fluent Design System is the latest iteration in the development of Microsoft's look-and-feel for Windows.

Fluent builds on the Metro design language introduced with Windows Phone. Metro was designed for touch devices in particular; with Fluent, Microsoft is aiming at devices ranging from those without any display at all, through phones, tablets, traditional PCs, to virtual and augmented reality systems. Fluent also marks a shift from a design primarily focused on consumption, to one that also incorporates content creation. This generally means that Fluent will have to scale to denser, more feature-rich interfaces than Metro ever did.

As well as broadening the scope of the new design approach, Microsoft is also trying to do a better job of getting designers and developers to understand it. The documentation for Fluent is already arguably more comprehensive than it ever was for Metro. It combines both design guidelines and developer references to show not just what to do but also how to do it.

Microsoft describes five 'fundamentals' of Fluent. Light, for example, uses, well, light to add emphasis and draw attention to where it needs to be. An example of this is seen in the calculator app. The Fluent calculator has a hot-tracking effect that picks out the borders of the calculator buttons when the mouse hovers over them. Metro didn't have this kind of hot-tracking effect because Metro was designed for touch devices, which can't generally hot track anyway (since touch screens don't know when your finger is merely near but not touching). But the hot tracking is nice to have for mouse systems, and it's essential for systems such as HoloLens that use the direction of the user's gaze to select interface elements.

Motion represents another big shift from Metro; Fluent has much more animation, used to denote relationships between elements. For example, drilling down into an item from a list should show some kind of 'zoom in' effect, and backing out should correspondingly zoom out. This helps reorient the user within the larger list when they back out from what they were doing. Metro interfaces tended to be very static; adding motion should address that.

Metro's static-ness, along with the use of broad expanses of flat color, has given rise to some criticism that Metro interfaces are dull or boring. Since its inception, Metro has included elements such as full color and edge-to-edge photographic imagery. This dullness is by no means inevitable; applications such as the Store, Groove Music, and the older Windows Phone Photos app all used these elements to good effect. But these apps all have obvious photos to show: album art, app screenshots, and so on. For many applications, this aspect was clearly a challenge.

1. Fluent Mind Map. Generate and explore your ideas with this simple to use mind mapper that features an uncluttered and clean interface that gets out of your way leaving you free to focus. Use the clutter free designer to quickly generate and organise your ideas into an elegant mind map.
2. May 18, 2017  Microsoft Fluent Design System Experience in MacOS designed by Volodymyr Hashenko. Connect with them on Dribbble; the global community for designers and creative professionals.

Motion, combined with a second fundamental, material, should provide an easier way to offer visual pizzazz to applications. Microsoft says that more materials are planned, but for now is starting with just one: 'Acrylic.' This is a translucent, generated material that uses Gaussian blur combined with noise to create a sort of plastic-like effect. Microsoft intends for Acrylic to be used under, for example, navigational elements, in order to de-emphasize them. Acrylic would also be used under ephemeral content.

In a number of ways, Acrylic resembles the Aero Glass introduced in Windows Vista. But there are differences. Aero Glass was owned and controlled by the operating system. Applications could enlarge its window borders so that the glass encroached on the application area itself, but it had little control beyond that. Acrylic is programmer-controlled; developers and designers can use Acrylic in arbitrary locations (not just the window borders), and they can modify things like the color and opacity to suit their needs.

The challenge with Acrylic—and any other materials in the future—will be to ensure that each material retains a clear and coherent purpose, without falling into the trap of mimicking real-world objects (this is a practice known as 'skeuomorphism'). The other big difficulty that presents itself is remaining tasteful, though this is unfortunately beyond the remit of any API or design guidelines.

Google's Material design, which shares many similar themes to Metro, has a similar emphasis on motion and animation as Fluent. Metro, Material, and Fluent are all birds of a feather and are all leverage concepts that are commonplace on the Web. The scaling from handheld to small window to large window, for example, is taken straight out of the responsive-design playbook that is so fashionable on the Web today.

Of course, windows on Windows have long been resizable; but, traditionally, they never did a very good job of this. Shrink the window too small and, rather than adjusting for the new size, they just ended up having their toolbars cropped and their content areas shrunk to the point of uselessness. The adoption of responsive design concepts makes resizing windows much more useful than it once was.

Another way in which Fluent makes a change from Metro is that it's much more explicit in its support for different input methods. Pen support, for example, is extended beyond the mere 'inking areas,' so that an entry can be struck from a table by drawing a line through it. Those ink areas are also now better integrated into the text boxes that they correspond to.

The system is also designed to be scalable in terms of its hardware demands. Aero Glass's glassy borders used pixel shader effects on the GPU. This had a power cost. Metro removed much of that power cost, by removing the shader effects. Acrylic brings them back, but they're designed so that if a system has a weak GPU (as is common in remote desktop applications) or is in power saving mode, the effects will be scaled back or disabled.

Fluent design isn't finished yet. The Fall Creators Update later this year will bring the first iteration, but Microsoft hopes Fluent will evolve over many iterations. Some of the concepts the company has planned are already in use in its own applications; in the future, Microsoft will add controls so that developers can implement the same concepts in a consistent way, without having to build them from scratch.

One example of this is collapsing, dynamic headers, which are, again, common already on the Web. The Groove Music app already uses such a header; when viewing a particular artist, the header is shown with biographic text and a large picture. Scrolling down through the artist's songs shrinks the header, removing the text and using a small picture.

Other concepts are more exotic. For example, Microsoft is looking at using spatial sound in the interface. This is important for mixed-reality applications, where events can happen—a popup or alert from an application, for example—not merely behind some other application, but entirely out of view, because they're behind you. Spatial sound can perform an equivalent role, albeit with a different user interface, to notifications.

Groove Music is perhaps the app that Microsoft is using most aggressively to push new design elements—even the stable version now contains Acrylic and other features. But Microsoft has already shown off how other apps are going to start using Fluent.

The company has also shown off a bunch of apps that may or may not be real, to show off its thinking and give a taste of the future of Fluent. These concepts include 3D interface elements, an attractive Outlook-like app, a Fluent Explorer, and a neat weather app. Should these programs come to fruition, Windows is about to get a whole lot better looking.

The inspiration for today`s shot was recently announced Microsoft Fluent Design system. Its looking so vivid and fresh!

Microsoft Fluent Design

We put into action technical and practical realization of it here at Zajno. Video revealed by Microsoft was poor on details of how OS will actually look and feel, so, starting from a brainstorm we narrowed down to partial implementation of elements in MacOS.
The Launchpad modernization seemed to be the most logical one. Adding the depth as a third dimension and sorting elements by their popularity revolutionize the engagement within the digital world. What are your guys' thoughts on this?