Isometric Illustrations

To address user complaints that interfaces were “bland” and “boring”, Microsoft needed an illustration approach to help add color and storytelling to their enterprise apps. I was tasked with creating system for creating isometric illustrations that was dynamic and easily scalable. But first, I needed to understand exactly what an “isometric illustration” was.

Understanding Isometric
Isometric translates to “having equal dimensions.” To build an isometric illustration, we start from three lines of equal length that form into an isometric triangle.

We then multiply our triangle by six, and form it into a hexigon. This gives us the basis for our isometric cube that contains the three planes where our illustrations can be positioned.

Isometric VS Perspective Before strarting the design process for building these isometric illustrations, I was much more familiar with the concept of “perspective”, in particular, drawing with a perspective to give a sense of depth or volume. With perspective drawing, a diminishing point is used to give a sense of closer objects appearing larger. Isometric images, on the other hand, tend to appear unnaturally flat. This adds to the charm of isometric illustrations where the goal is to also give the image a sense of depth.

From Icons to IllustrationsMicrosoft has a large library of icons that would act as the visual basis for our illustrations. The process I defined was to position an icon on a square, add a color scheme, then adjust the angle of the square to fit the different isometric planes. We can then build out three different levels of depth. With full-color and grey-scale options, this results in 24 variations of a single illustration for teams to choose from.

Implementation
The real potential for storytelling happens when these simple illustrations are combined to form a more complex image.

To help teams build consistent, composit illustrations, I assembled a guidance document with a list of best practices such as:
- Limit the number of individual illustrations in a composit image to 2–5.
- Use a variance in scale and depth to create a visual hierarchy.
- Limit the overall color palette, and when applicable, use a single highlight color.

Results
After defining an approach for building and implementing isometric illustrations for Microsoft’s enterprise apps, I built an illustration library with over 300 individual images and 100 composite images. The library was open source, so that teams that were constructing their own illustrations could contribute their designs. Illustrations from this library were adopted by over 30 applications, and helped improve the visual storytelling for our customers.