The Challenge: Microsoft wanted to bring the applications that make up it's developer offering under a single product family umbrella. The products included Visual Studio IDE, Visual Studio Team Services, Visual Studio Code, Visual Studio Blend, and Xamarin. The first step towards this goal was creating a set of icons that would bring the products together as a family. The icons needed to clearly represent each product, perform well at small sizes, and be congruous with the existing Visual Studio infinity shape and each other. 

Our team began working to create a set of icons that would bring the products together as a family in 2014. The direction of the project, guidelines, requirements, restrictions, and design brief changed several times, so over the course of two years we came up with hundreds of designs. 

To create a set of icons that clearly go together as a family, I wanted to find an overall visual concept that would tie them together. I also wanted the concept to relate directly to the purpose, use, and keywords used to describe Microsoft's developer applications. The concept needed to be visually interesting but also conceptually meaningful. 

For now, I'm only going to show one of the concepts I presented. This set of icons was based on the concept of folded paper. I took several of the keywords that describe Microsoft's developer tools and demonstrated how the concept relates directly to those keywords.

The Concept: An explanation of how the concept behind the set of icons ties in with keywords used to describe the Visual Studio family of products.

The Icons: Each icon in the set was designed to look like it's made of folded paper. I created an infinity shape to represent Visual Studio. The other icons were all represented by letters. T for Team Services, C for Code, B for Blend, and X for Xamarin. I created a few variations with and without shading, and in different colours. The icons went together well as a family, each product was distinguishable from the others and it was possible to identify which icon was for which product, the icons scaled well so they would still be recognizable even at very small sizes, they worked well in flat, one colour versions, and the designs related directly to Visual Studio both conceptually and visually with the use of sharp edges, angles, and the purple colour.

The Final Word: The set of icons was well received and selected as one of the finalists. Ultimately the stakeholders decided to go in a different direction. 

All designs and material displayed on this page are Copyright ©Microsoft.

Back to Top