top of page

Fluent Teaching UI Illustration System

Illustration, Visual System, Creative Direction

Credits

Creative Direction –
Alexis Copeland
2D Design –Danny Pak
3D Design – Leitin Pedro, Felipe Medina Contreras, Tati Astua

Teaching UI is an expressive illustration system for in app learning that is harmonizes product UI with dimensional backplates.

Fitting within Fluent Expression's visual ecosystem, the look and feel families with our visual direction yet skew more literal, showing actual reference to UI.It guides users through the experience, educating them how to navigate the experience and introducing new features like Copilot. It can be used in FREs, OOBE or “What’s New”.

There are 2 essential elements that create the teaching UI illustration— simplified UI screens and the 3D backplates. Simplified UI is designed specifically for educational purposes in product including enlarged icons, graphic text, and simplified UX. 3D background is a collection of 3D renders have been created for each app and is designed to generically represent the essence of each app’s personality. All 3D elements are inspired by the essence of the each app. Included in each render is usually 3D Fluent icons that are iconic to each app, 3D shapes and materials that speak to the app’s personality, and the app’s color palette.

A final composite combines the simplified UI treatment with dimensional backplates creates an effortless, simple, and intuitive teaching UI direction that is unmistakably Microsoft.

Our teaching UI system is a toolkit made of parts designed for all Microsoft products and platforms (including, Win32, Web, or iOS), whether static or animated, whether it be for desktop, mobile, or featuring individual components.

The toolkit includes landscape, portrait, and square aspect ratios and crops to bring focus to specific areas. It also include light mode, dark mode, and high contrast themes to align to customer preferences.'

bottom of page