top of page
Design & Creative Direction
Fluent Illustration
Design System, Illustration, Product, Creative Direction
Credits
Alexis Copeland -
Creative Direction
& Art Direction
Horacio Camacho -
Art Direction & Design
Microsoft Design, Buck, Indigo Slate - Design
Illustrations are a powerful tool in enhancing UX, transcending language barriers, and sparking emotion. At Microsoft, I lead a team on a journey to evolve our Fluent illustrations, designed to simplify and unify our products with a distinct Microsoft aesthetic.
From starting the initiative as a sole designer to building out an illustration team and leading across disciplines as a creative director, this project has spanned across many altitudes, teaching me invaluable lessons about designing for products and fostering an amazing community of talent. The result is a gorgeous illustration system that I am very proud to showcase!
The evolution of Fluent illustrations
Evolving our Fluent illustrations involved enhancing our products' personality and creating dynamic user experiences. Our previous Fluent illustrations fell into the category of what has come to be known as the “Big Tech Art Style”—exaggerated bodies, small heads, non–descript people meant to represent everyone and offend no one. Although originally stylistically groundbreaking, this look had since so permeated the tech world that it became like wallpaper, and over time it was impossible to differentiate one brand from another.
We realized a need to evolve our illustrations to better resonate with customers and align with Microsoft's key brand principles—human, vibrant, and dimensional. But how to achieve these was an open question. Could we steer away from the human form while still communicating the “human element”? Could we imbue that humanness into universally recognized symbols? Could we draw from our UI/UX components? These are the questions that prompted our initial ideation. Through active collaboration with designers across Microsoft, and our partners at Buck, we worked towards codifying five core guiding principles that continue to drive our illustration work today: Humanity, Color & Material, Dimension, Sophistication, and Playfulness.
Humanity
Shapes, colors, and symbols—all of which are embodied within illustrations—carry a wide array of cultural significance. Aligning closer to humanity called for us to not just create but to practice inclusive design. By inviting in the perspectives and experiences of our colleagues worldwide, we created illustrations reflective of Microsoft’s ideals and values, and that more accurately depicted the human condition. We transitioned away from the human form. The portrayals of individuals immersed in specific professional scenarios gave way to simplified symbols of human creativity and productivity that resonate with a broader spectrum of vocations and cultures. This shift avoids reinforcing stereotypes and instead promotes a message of collective human potential and unity, making them both timeless and accessible.
Creating a tangible, touchable and inviting system was crucial to bridging the gap between humans and technology as well. To achieve this, materials had to feel warm, familiar and lifelike, yet not overly precious or premium. Alongside BUCK, we conducted an audit of the shapes and materials we were working with to establish a rational system of meaning. We wanted our design decisions to be based on intentionality. Neutral base colors gave us a human foundation that was universal. Materials with gestural textures or a bit of roughness appeal not just to our eyes but to our sense of touch—communicating humanity subconsciously through their imperfections.
Customers find 3D and textured materials very appealing, describing them as "crafty" and unique among big tech companies. The tactile nature, combined with familiar metaphors, effectively merges the digital and physical worlds, infusing a sense of warmth and craftsmanship.
Color and Gradients
Choosing the right color palette is crucial due to the significant impact colors have on our moods and emotions. Some colors evoke urgency or anxiety, while others bring calm and joy. We transitioned from desaturated, product–specific palettes to a vibrant, shared Microsoft brand palette that is more energizing and inspiring. This adoption not only fosters greater brand love and cohesion across our products but also reduces redundant workload within each product group.
We aim for a diverse color palette (at least 3 colors) in each illustration to reinforce brand recognizability. Playful color pairings provide a flexible framework to stand out in a competitive landscape dominated by primary colors. Intentional and selective gradients distinguish the Microsoft brand as unique, dynamic, and distinctly Microsoft. Complementary gradients enhance contrast, add a playful spirit, and imply motion.
Sophistication
As our customers’ tastes and perceptions mature, our methods of engagement must evolve in tandem. Transitioning from an illustration style that echoed the purity and innocence of childhood fables, we now aspire to embrace a more sophisticated aesthetic. Our new direction favors 3D renderings that exude a sense of depth and movement, capturing the complexity and richness of the adult imagination. Sophisticated renders invite contemplation, multiple interpretations, and evoke a spectrum of emotions that allows us to connect with our customers on a deeper level.
Playfulness
While sophistication is a cornerstone in our new direction, playfulness is just as vital. Microsoft’s brand resides at the intersection of these two themes, balancing elegance with a touch of lightheartedness. Our previous set of illustrations leaned towards sharp contours and more straightforward compositions, conveying a sober, literal quality. Moving towards more fluid and expressive forms in our new set of illustrations brings a sense of rhythm and vitality. As we embrace organic shapes, curves, and asymmetries (elements that mirror the natural world), we can explore abstract ideas and break free from rigid constraints. But playfulness is not just about form; it is about movement. Subtle hints of motion animate our visuals while dynamic elements spark curiosity, encouraging viewers to linger, explore, and discover.
Dimensionality
In the past, illustrations were seen as mere 'stickers' or 'decorations' added to the user interface. To bring our product experiences to life, we began sculpting 3D shapes and figures directly from our product surfaces, integrating illustrations into the user interface.
Fluent’s Elevation system guided our approach to designing 3D within a 3D space, aligning elements like visual space, depth, elevation, and camera angles. Creating forms that emerged from the surface added a human element and a sense of tactility to our users’ experiences. Camera positioning and perspective within Fluent’s Elevation system now ground our 3D illustrations in a tangible surface, adding dimension without distracting from user interactions. Many concepts now include moments of action, change, or interactivity. Through overlapping forms, dynamic object placement, gradient trials, and textured brush strokes, we depict connections in a universally understood way, reinforcing movement and emphasizing metaphors.
In addition, dynamic lighting enhances surface depth while seamlessly integrating into the platform's natural environment. Light Mode is warm and familiar across cultures, while Dark Mode adapts surface, form, color, and lighting for visibility in dark settings, making it ideal for surprising and storytelling. Our partners at Indigo Slate helped us develop a special high contrast mode to improve visibility and accessibility for low vision users by outlining the main shape of the illustration, emphasizing key parts, and balancing materials and scoops.
Process
Creating a large–scale 3D illustration system is demanding, especially with hundreds of illustrations produced and new requests coming in almost weekly. To ensure efficiency, we start with 2D sketches based on basic geometric principles from the Fluent design language. Integrating shapes and symbols from Fluent across both the user journey and marketing campaigns has the added benefit of creating greater cohesion and harmony across our customer's end–to–end user journey.
And to ensure illustration elements are accessible, we uphold a contrast ratio of 3:1 (WCAG) for key elements, with proper alt text for screen readers, and context (copy) to understand their meaning.
In this system, copy plays a crucial role in streamlining conveyed information. It serves as a connective thread between abstract visual metaphors, increasing intuitiveness and clarity of the interaction.
Every metaphor is thoughtfully sketched to support the text to emphasize key ideas, concepts, or features of the user experience. We also learned from research that illustrations are what users absorb, not what they linger, meaning illustrations accrue personality and build recall over time, while copy brings clarity.
To ensure high-quality assets with minimal file sizes, we use a specialized compression API and load through a cloud digital asset management solution. Each illustration is optimized for its specific size to be compatible across all platforms. We also support AVIF and HEIF formats for superior quality and file size, as well as WebP, JPEG, and PNG formats.
For scenarios where raster is not supported across all platforms, such as low-end devices or weak connections, we offer vector fallbacks to allow our system to scale across all technical limitations.
Embracing the Continuous Voyage
Much like a forest, where each new season brings new growth and transformation, our illustrations reside in a perpetual state of evolution. There is no “end product.” Rather, each set of illustrations creates fertile ground for more refined work to grow from in the future. As our thoughts and perspectives evolve through customer feedback and engagement, so do our illustrations to reflect those learnings. This is the essence of evolution in design—a continuous flow of creativity within a community that breathes life into ideas, turning them into visuals that are not only aesthetically pleasing but also rich in meaning and emotion.
Special thanks to the amazing group of designers across Microsoft, Buck, and Indigo Slate who came together to bring all of this to life.
bottom of page