This project highlights the re-design of our core Microsoft Office experience icons. As an evolution of our visual identity, we focused on reflecting the simple, yet powerful and intelligent qualities of the Office creation tools.
The carefully crafted icons honored the heritage of the Office brand, while welcoming its new future. Ultimately, the process yielded a flexible system adopted throughout Microsoft, working across multiple platforms and devices.
To learn more about this project, please read our article on Medium.
Simplicity over complexity was our approach when defining the silhouette of the icon system, which embraced both symmetrical and asymmetric forms. Below are samples of the grid we utlized, featuring shapes with and without a letter plate.
Tint and Shade
The extended Microsoft brand color palette shown here was used to ensure the app icons did not have a predominant color. It was constructed by building a ramp of tints and shades from each Microsoft brand color. Each app icon featured a single color ramp.
In order for icons to remain legible across a broad range of sizes, the propotion and layout of each icon and its components, including size sensitive elements, such as stroke width, was adjusted to better align with the pixel grid. We took special care at smaller icon sizes where there were fewer pixels to utilize.
The samples shown here (not to scale) display how the Microsoft Excel app icon has been modified to scale non-proportionally, which allows for better legibility at small sizes. In total, there were five versions of the Microsoft Excel app icon.
Process and Story
The images below are additional digital renderings that illustrate our creation process and demonstrate the systematic quality of the icon designs.