+
design overview
A summary of recent thinking and projects for Microsoft Learn
This document showcases visual design work created for Microsoft Learn.
It covers:
+ The brand's visual language
+ references and the thinking behind the design language
+ 3D hero imagery for banners
+ SVG illustrations,
+ marketing graphics
+ achievement badges
+ glyphs and iconography
+ photography selection
Direct links to figma files have been removed.
This page highlights the range of work I created across the Microsoft Learn platform, within the past 2 years.
It covers:
+ The brand's visual language
+ references and the thinking behind the design language
+ 3D hero imagery for banners
+ SVG illustrations,
+ marketing graphics
+ achievement badges
+ glyphs and iconography
+ photography selection
Direct links to figma files have been removed.
This page highlights the range of work I created across the Microsoft Learn platform, within the past 2 years.
Copilot Hub on Microsoft Learn
This was my first 3D assignment on Learn built entirely from my own creative direction. The design is reminiscent of a desk surface, a workstation and command center. The 3D base is a procedurally generated subdivision grid with manually extruded cubes. It is rendered as a transparent layer compatible with both light and dark themes. SVG shapes sit on top of the 3D scene to give finer control over visual flow without re-rendering. The base was built in Houdini, and refined and rendered in Blender.
The card images were sketched in 2D, then fully built and rendered in HoudiniFX and Keyshot. As the page scaled and new cards were added, I made the call to move card imagery to SVG illustration — maintaining the modern, polished feel while significantly reducing production time.
︎︎︎ Copilot Hub on Microsoft Learn - live page
︎︎︎ Copilot Hub on Microsoft Learn - 2025 web archive
︎︎︎ (coming soon - Copilot graphics project page)
Visual storytelling through hero imagery
The 2026 design language is technical, minimal and rooted in proceduralism.
Microsoft Learn's hero imagery began with a small kit created by Julien Tauban and R. Lance Garcia, the design leads at Learn during 2020. The design language before this had been built around a subway and train station metaphor that predated our team. The colors, overall tone and look-and-feel were curated by them.
After a year on the team, I became the sole visual designer for the platform, and took ownership of expanding on what they had begun.
The intention behind this work is rooted in how cloud computing feels: powerful, technical, an acceleration. It is a powerhouse of computer enabled tools and it speeds up our abilities through technology.
I wanted the imagery to look computer-aided and precise — reflecting the workflows that cloud platforms enable. 3D procedural art would convey that tone. I retained the pathway and station-stop metaphor as a narrative anchor, and evolved the aesthetic toward computer generated cubes and architectural blueprints.
︎︎︎ (coming soon - hero banners project page)
The 2026 design language is technical, minimal and rooted in proceduralism.
Microsoft Learn's hero imagery began with a small kit created by Julien Tauban and R. Lance Garcia, the design leads at Learn during 2020. The design language before this had been built around a subway and train station metaphor that predated our team. The colors, overall tone and look-and-feel were curated by them.
After a year on the team, I became the sole visual designer for the platform, and took ownership of expanding on what they had begun.
The intention behind this work is rooted in how cloud computing feels: powerful, technical, an acceleration. It is a powerhouse of computer enabled tools and it speeds up our abilities through technology.
I wanted the imagery to look computer-aided and precise — reflecting the workflows that cloud platforms enable. 3D procedural art would convey that tone. I retained the pathway and station-stop metaphor as a narrative anchor, and evolved the aesthetic toward computer generated cubes and architectural blueprints.
︎︎︎ (coming soon - hero banners project page)
Behind the scenes
Concept
The reference board below reflects the thinking behind the procedural cubes. Woodwork and carpentry are a recurring source of inspiration. The craftmanship, the proportions in shelving, cabinetry, and tactile workspaces informe the ratios and layouts selected in 3D. It's a nod to builders and making, which feels right for a platform built around learning.
Workflow
The 3D files and versions are saved as HoudiniFX and Keyshot files. To keep assets organized, I have a quick-reference system in Figma — screenshots of each 3D model paired with its file path, project name and organized by year. It helps to find what I need quickly when finished projects are referenced and harvested for re-use.
The 3D base
HoudiniFX is used to build 3D models of generative cubes and platforms.
Keyshot is for refining the composition, and materials, lighting and color. Exports with a transparency layer.
Figma is used in tandem, to cross-check the visual flow and composition within the webpage.
Refinement
From Keyshot I export with an alpha channel / transparency layer.
In Figma, the image is pulled into mockup of the webpage, and sized for export and crisp resolution. Using SVG format, the image is cleaned up. pathways are added, blur and glow layers, details are added.
Technology and learning - My references
How do you make learning feel tangible? What visual metaphor shows acquiring knowledge and the power of the Microsoft products that enable it? This question is the foundation for designing Microsoft Learn's visual language.
Owen Schuh's math notebooks
Beautiful reference. The points in space, node-based connections, data in motion, clean lines and data-squares directly influenced my illustration style and detailing in illustrations.
The Power of Limits by Gyorgy Doczi
This book explores ratios and constraints found in art, design, and nature.
A good reference for proportion and visual harmony.
Grid Systems in Graphic Design by Josef Müller-Brockmann
Images, negative space, grid and text layouts. How visual weight behaves when compositions are on responsive screen sizes.
Generative Design by Brian Christian
This book is a dictionary of code art: algorithmic and computational aesthetics, and how they are built.
Microsoft Learn Startups Hub
This was a collaboration with two PMs from the marketing department to bring the new Startups Hub page to life visually. My scope covered aesthetics: A hero banner in the updated design language, glyph icons for the feature highlights, and two banner variants for an A/B test — one emphasizing go-to-market strategy, the other highlighting AI-assisted workflows. The go-to-market banner did better with the A/B test, and was subsequently used.
Working across Learn's three native themes (light, dark, and high contrast) plus mobile, I built mockups in Figma to visualize how the graphics, layout and content looked in each environment. The tabbed section near the bottom of the page was carrying too much text at mobile breakpoints — the feedback was incorporated and the copy was trimmed before launch.
Content hierarchy and information architecture were owned by the PM team; my role was to ensure the visual layer elevated the page.
︎︎︎ Startups Hub on Microsoft Learn - live page
︎︎︎ Startups Hub on Microsoft Learn - 2026 web archive
︎︎︎ (coming soon - Startups hub project page)
Spot Illustrations
SVG spot illustrations used for card imagery and bifold banners, built at an isometric angle a deliberate choice, as isometric perspective is widely used in technical diagrams and exploded machinery views, lending the illustrations a sense of precision that fits the platform's tone. It has more depth than a flat 1-point perspective.
The guiding aesthetic principle is simplicity and negative space. Each illustration communicates quickly without competing with the card's text content. Illustrations for pages are usually produced in sets of three or four with a unified color scheme. The exception is Copilot, which had a set of eight cards as an update. Each set is sequentially balanced visually and cross-checked at mobile breakpoints before handoff.
The frosted glass layer is an SVG effect built in Figma and exported as a PNG with alpha transparency enabled. This enables it to sit over the card component's preset background colors across light, dark, and high-contrast themes, in a clean and simple way. Final assets are exported at 2x for retina sharpness, then compressed to keep file sizes lightweight for production.
Product page imagery
A set of 23 illustrations built for Microsoft Learn's product training pages: Azure, Dynamics 365, .NET, and the broader Microsoft ecosystem. Each illustration follows the isometric format established across Learn's visual system, with color palettes shifting per product. Designed to sit within card components, they signal the category of content at a glance.
︎︎︎ (coming soon - product illustration project page)
Microsoft Community Hub,
AI-powered learning
The images below were built for a Microsoft community blog post, Marketing dept reached out for graphics on a tight timeline, a few days before release. They had screen captures of the new products and interfaces they wanted to highlight, and the images needed to be visually compelling and carry the main information.
I increased the resolution of the UI and text for what they sent, then added bold color gradients and framing around the screenshots, to bring life, energy and intention to the article.
The promotional thumbnail image was rebuilt several times. Microsoft has multiple community blog pages, each had a different aspect-ratio and crop cut-off points. In mobile, the crop made it a vertical thumbnail image. The text was cut-off mid-image. I built a breakpoint template for this and future thumbnail images, cataloged each one, and established the ‘safe-zone’ for text in this and future images. The length of text was also reduced by the content team to fit.
This Microsoft article received 6.7 million views.
︎︎︎Build skills that matter - live webpage
︎︎︎Build skills that matter - web archive
︎︎︎ (coming soon - project page)
Challenges on Microsoft Learn
The challenges program brought gamification to Microsoft Learn — timed, leaderboard-driven learning sprints designed for upskilling teams and cohorts. My visual design scope covered the full promotional ecosystem around the program: refreshed web imagery, email templates, and a user-facing PowerPoint kit containing editable banner and badge graphics. Participants could download, customize, and share these to promote their challenges and recognize each other's achievements.
The badges and banners were designed to feel rewarding and distinct — drawing on visual language from racing flags and laurel achievements. The imagery ties in with Learn's color palette and design language, in a more informal and energetic way. The color variants allowed a variety of challenge themes to be differentiated at a glance, and the editable template was simple and contained many varieties of banners to use.
︎︎︎ (coming soon - Challenges project page)
Learn Badges
I built hundreds of badges for modules and learning paths in SVG format. They span the full breadth of Microsoft's products and services. Each badge required understanding the subject matter it represented, often a small detail in a complex computing process. When requests arrived without context, finding the right visual answer and researching the subject matter gave the imagery selected more meaningful. I’d garner feedback from the content writers and send out the exported image in all needed formats and sizes.
To manage the volume and maintain consistency, I built component toolkits of commonly used parts, color systems, and product-specific templates that could be adapted efficiently across different content categories. Badges were also produced for major events including the AI Tour, Copilot events and GitHub, for student programs spanning K-12 and Minecraft, and across dozens of product lines. These are organized into searchable Figma libraries.
As the sole visual designer, and as the scope of incoming requests grew, I worked with my manager to select priorities at work. The custom badge work was deprioritized in favor of work on higher-visibility areas of the site instead, the homepage and various new community pages. For the newer badge requests, I designed a flexible generic badge in different color schemes that could scale. It didn’t need custom illustration for every new module. The colors were matched to product color branding where possible.
The badge artwork had a longer life than the badges themselves. The illustrations were frequently repurposed for presentation decks and internal communications, giving the work additional usefulness across the organization.
︎︎︎ (coming soon - Badges project page)
Glyph iconography
Microsoft Learn uses the Fluent 2 iconography system within its UI, but card highlight sections for pages needed larger and more expressive icons. A small set of glyphs existed previously, but it was limited in scope, visually dated, and used muted colors that didn't align with the official brand colorways. It was a good base and starting point for the new set.
I designed the new glyphs for clarity at small sizes and compatibility across Learn's light, dark, and high-contrast themes. Each icon was created from a defined list of the most common content categories: training, tutorials, announcements, documentation, overviews, concepts, and code samples. The strongest versions were pushed through, with the lesser impact glyphs saved as reserves, some of those were reworked with other themes later on.
The gradient color system gave the full set some variety for the many different pages that utilize the glyph set on Learn, while staying consistent in their look and feel.
︎︎︎ (coming soon - glyphs and iconography project page)
Microsoft Learn uses the Fluent 2 iconography system within its UI, but card highlight sections for pages needed larger and more expressive icons. A small set of glyphs existed previously, but it was limited in scope, visually dated, and used muted colors that didn't align with the official brand colorways. It was a good base and starting point for the new set.
I designed the new glyphs for clarity at small sizes and compatibility across Learn's light, dark, and high-contrast themes. Each icon was created from a defined list of the most common content categories: training, tutorials, announcements, documentation, overviews, concepts, and code samples. The strongest versions were pushed through, with the lesser impact glyphs saved as reserves, some of those were reworked with other themes later on.
The gradient color system gave the full set some variety for the many different pages that utilize the glyph set on Learn, while staying consistent in their look and feel.
︎︎︎ (coming soon - glyphs and iconography project page)
Microsoft Learn Product icons
The Microsoft Learn product mark was pre-existing. My work involved refreshing the exam, applied skills, and certification marks to align with the existing visual system, and to concept and build new icons for plans, challenges, courses, skills, and ask learn, the ai assistant. These were produced in both filled and outline variants.
Assets were exported as high-resolution PNG and SVG files, organized into a downloadable folder, embedded in a PowerPoint for easy stakeholder access, and consolidated into a single Figma file. That file served as a comprehensive icon resource for Learn and the broader team. It housed the new glyphs, product icons, Fluent 2 iconography and legacy icons I built from my time at Microsoft Azure, organized by category type in dedicated pages.
A separate request came in to design a new product mark for Microsoft Learn that would sit cohesively within the broader Microsoft product suite. The concept I developed used a soft star form with a colored ribbon and a pen shape held in the negative space. These visual metaphors represent achievement, learning, and thinking. The mark was shelved while the platform's direction and primary function were being re-evaluated, but it served as a meaningful exploration of how Learn's identitycould evolve.
︎︎︎ (coming soon - Glyphs and iconography project page)
Photography from Microsoft Brand Central
Photography is an opportunity to bring warmth and and tell a story on the people behind technology. Our preconceptions of who can learn are built into the world around us, and it is important to show diversity in skilled roles to encorage and uplift overlooked cultures and people who learn and build with Microsoft products across age, race, gender and abilities.
The vast majority of content on Microsoft Learn is technical content, images of people highlights the message of upskilling, improving workflows and problem-solving real-world challenges that is Learn’s core function.
Microsoft Brand Central provides a large library of licensed photography for internal use. I set up a Figma file with images to pull from, and wrote selection guidelines. I chose images that conveys positive, driven energy through body language, facial expressions and posture.
The figma notes include cropping and image formatting. Brand Central images are often composed or shot in ways that don't align with the container dimensions for imagery on a page. Photoshop’s generative fill can extend image edges seamlessly, though it needs some tuning to choose the best output. the photos below have all been expanded using photoshop’s AI. Instructions and notes for this workflow are included in the Figma file notes.
︎︎︎ (coming soon - photography project page)
