Role
Art Direction, Strategy

Collaborators
September Works
Clyde Fox
Building Visual Systems
As a core function of the Envisioning team at Microsoft our goal was to continually investigate, challenge, and develop Microsoft’s design language, Fluent.

Our visual system is built on the principles of our componitized UX system (drawing on Fluid Framework) to anticipate growing needs of our ever evolving productivity services. With the goal to create a consistent and engaging system that seamlessly traverses a spectrum of interface typologies across voice, screen, and immersive experiences. 

Its color palette, typography, and materials are inspired by our physical world but take advantage and celebrate the qualities of the digital realm in which they live.  
Microsoft



Color
Our palette is rich and authentically digital. Our color story helps develop continuity and emphasis, aligning to Fluent’s goal to emphasize awareness, activity, and presence through accent color application. Our palette embraces what's best about the past, present, and future of the Microsoft color story. It is digitally authentic in its saturation, yet natural and own-able with its tailored hues.

Type
Across the tech industry, a sans serif has been the dominant typestyle of choice for UI, with negligible differentiating traits between competitor company typefaces. Ownability comes down to subtle, often unnoticed, details in craftsmanship, system, and trend.

We aim to challenge current UI paradigms and by shifting our primary typeface to a serif — a standard in publication design. Embracing our engineering roots, we'll use a complementary monospace typeface for secondary information and actions. Considering screen real estate constraints and the demands of a fully functioning product UI, a complimentary sans serif will expand the system.


Material and Volume
Volume, materials, light, and motion give life and create affordances to our componentized world. This rich spacial environment also allows for seamless transitions between voice, screen, and virtual environments.

The implied dimension of these dynamic containers give meaning to their nature and help create hierarchy and emphasis for ease of interaction.




MotionMotion drives a rich emotive quality and most importantly creates continuity and visual hierarchy in this fluid landscape. It is an essential part in setting the tone, rhythm, and dynamic nature of the UI.

Building from the Fluent vision, we want our motion language to be elegant, efficient and precise but also convey a sense of whimsy — it should be playful and inject moments of delight when appropriate. It is built upon the familiar movements of our physical world but inspired by its limitless digital environment. It is adaptive to your needs, environment and devices.

©2024                  Baderstephen@gmail.com                  360.393.0835