Behind the design: Fluent illustration UX video

To celebrate our refreshed Fluent illustrations, we created a sizzle video that highlights a series of connected objects across our Fluent design language through an illustration film.

To watch the full video click here.

Vision

The heart of the video celebrates the vibrancy, dimensionality, and humanity of the illustration system, crafting a visual narrative that highlights the aesthetic appeal of the illustrations while conveying their emotional impact. Details like human imperfections, painterly textures, and playful animations emphasize the emotional connection between technology and humanity, as well as the tactility of the system.

Exploring the world of Fluent illustrations meant placing the camera at unique angles and points of view that were otherwise limited in UI. Elements emerge directly from the surface of Fluent, with fluid and adaptive forms morphing across every surface in both literal and metaphorical applications. These elements also traverse the world, showcasing the flexibility and modularity of the system, brought to life across our seamless experiences, adapted and reused across several products. We celebrate the world of dimensionality and create moments of surprise and delight through each element.

Process

We embraced a new creative process for the film’s production, bringing together a v-team of designers, animators, and sound designers from various product teams. Everyone was open to ideas and eager to experiment, generating excitement throughout the collaborative process. This fostered a free flow of ideas and united a talented group we might not have collaborated with otherwise. Throughout the process, we iterated on both sound and animation simultaneously to create a harmonious sync between the narrative and the overall feel.