Product Design / Illustration / Desktop app

Microsoft Game Toolkit,
app state illustrations

Illustrations for the key states of GDK (Game Development Kit) a desktop app that helps developers build games for Xbox and PC.

Project info

Role: Visual designer for app state illustrations, in collaboration with the product design team
Team: Microsoft Game Dev team
Platform: Microsoft Game Toolkit (GDK)
Design system: Microsoft Game Dev (MGD) library
Year: 2024-2025 Q1
Status: Live

Introduction

Microsoft Game Toolkit is a free set of tools, libraries and documentation for building games on Xbox and Windows PC. The app lets developers browse, select and download the tools they need.
Along that journey, the app goes through different states: welcoming a new user, showing that no tools have been downloaded yet, waiting for the user to select tools. I designed the illustrations for those states, so each one tells people where they are and what to do next at a glance.

I owned the page end to end: structure, copy and visual design. I started from the content that already existed, the AI articles on the MGD blog, and built a simple narrative around it: what’s in it for you, proof, and an invitation to join the community on Discord.

Visual approach

I worked with a few simple rules so the four states would feel like one family: 

A dashed line means “this space is waiting for you.” Some illustrations use a dashed outline to suggest something that isn’t there yet, like a folder with no tools or a selection with nothing in it. It’s a small cue that the user can fill that space

One object per state, tied to the action. A folder for downloading tools. A selection area with a cursor for choosing them. Each object points to what the user should do next, not just to the topic.

Quiet enough for a working tool. Developers come here to get work done. The illustrations use the app’s purple accent and soft depth, but stay calm so they support the interface instead of competing with it.

Built for dark mode. Colors, highlights and shadows were adjusted so the objects read clearly on a dark background without glowing or disappearing.

Inspired by Fluent. Microsoft’s Fluent design language was a key reference, especially its approach to depth, light and soft 3D forms. Using it as inspiration helped the illustrations feel native to the Microsoft ecosystem while giving them their own character for this app.

From exploration to final delivery

Building a visual vocabulary: We started with simple geometric shapes and gradients in the app’s purple and magenta palette, looking for forms that felt technical but friendly.
Testing glass and transparency on dark: Glass textures and layered opacities were a strong trend at the time, so we tested them directly on the dark background where the illustrations would live. Some compositions added cues from the developer world, like a code symbol.
Moving into 3D: Flat gradients evolved into volumes with depth and light. Here the compositions started to include interface elements, like a cursor and a selection frame. Changing that frame from a solid to a dashed line was the moment the “space waiting to be filled” idea appeared.
From abstract to meaningful: The abstract shapes looked good, but they didn’t tell users what to do. The final illustrations kept the 3D style and the palette, and replaced abstract forms with recognizable objects tied to each action: a folder for downloading, a selection area for choosing.