Microsoft Redesigns +100 of Its Application Icons

0
10

What are the microsoft icons?

Last year, Microsoft redesigned the Office icons to show our customers that we have developed our products to support the changing world of work. A world where, despite being more mobile than ever, social connection and collaboration are essential for success. A world with immense potential for creativity and growth thanks to new information flows.

At Microsoft, we’ve worked to help facilitate and improve these types of interactions and experiences. Scaling an icon design effort from 10 products to over a hundred to reflect this new world of work was daunting and exciting.

New icons for Microsoft Office and many more

Microsoft Redesigns Its Icons: Scaling a design in the Microsoft ecosystem requires an open and flexible system.

But design teams from across the company came together as a collective to develop design guidelines that encourage individuality while creating a coherent whole. From enterprise to small business to consumer, product teams ensured that each icon authentically represented both the truth of the product and Microsoft’s larger brand.

We share knowledge, iterations, obstacles and successes. We compared icons in different contexts and made changes for each other. Most importantly, we inspire each other. This was truly an effort by One Microsoft, and we can’t wait to hear what you think.

Microsoft redesigns its icons
Microsoft Redesigns Its Icons: From Windows utility icons to mixed reality icons in Microsoft Dynamics, all of our new icons were cut from the same fabric.

Expanding the openness of our design system

From tools like a calculator to a mixed reality application that places an expert anywhere in the world, the diversity of our clients’ needs continues to grow exponentially. We needed our modern icon system to continually reflect the changing tides.

With the new wave of icon redesigns, we face two major creative challenges. We needed to signal innovation and change while maintaining familiarity with customers. We also had to develop a flexible and open design system to cover a variety of contexts while remaining true to Microsoft.

Microsoft redesigns its icons, A designer's desktop covered with icon materials and drawings.
Microsoft Redesigns Its Icons: Rich gradients, smooth curves, and fluid motion connect the Edge and Office logos with each other and with the rest of the icons.

Fluid design

Our fluid design system was instrumental in helping us overcome both of these challenges. Fluido emphasizes building the familiar: designing for what our clients already understand, not asking them to develop new habits or learn something new. Fluido is also about creating space for a diverse yet connected system. To account for such a breadth of contexts and experiences, we expanded our initial library of icon colors, materials, and finishes.

Microsoft redesigns its icons,
Microsoft redesigns its icons:
Microsoft redesigns its icons,
Microsoft redesigns its icons

People spend most of their work time using Microsoft Edge and Office to get things done, and teams were excited to experiment with the new materials for these popular products. We know how important these experiences are to our clients, making the icons necessary to fit in and stand out at the same time. Based on extensive testing and customer feedback, we introduced rich gradients, broadened our color spectrum, and implemented dynamic motion with ribbon qualities.

Our clients are also beginning to use mixed reality to achieve goals in a whole new way. The combination of the physical and digital worlds in our icons helped us think beyond the traditional manifestations of colors, finishes and materials. We needed to consider the third dimension, so we chose new materials that reflected light and depth and felt more tactile.

Whether our clients use their phone, PC, or VR headset to get work done, we wanted to reach people in all environments. The new design guidelines helped us unify icon building across the company and within each product family.

Designing our future together

Our community has been on this journey with us from the beginning, and the road to this icon redesign was no different. We run countless rounds of research for each icon. From mild to wild, we explore a multitude of design directions and listen to clients from all over the world. We learned what didn’t resonate with people (flat design and muted colors) and what did (depth, gradations, vibrant colors, and movement), all of which drove our decisions.

Microsoft redesigns its icons, A designer's desktop with materials and icons.
Designing for 3D means starting in 3D.

As we continue to evolve our technology and roll out new icons that will reflect the future of Microsoft, our design system will also evolve to address new scenarios that we have not yet considered. Developing a system that spans the spectrum from literal to abstract while balancing product identity and Microsoft brand is a huge challenge, but nothing worth achieving is always easy.

There is always work to be done, but we are incredibly proud of what our teams achieved and we can’t wait to see how you respond. Let us know your thoughts in the comments below!


To stay informed with Microsoft Design, follow us on Instagram , Twitter Y Facebook , or join our Windows Insider program . And if you’re interested in joining our team at Microsoft, head over to aka.ms/DesignCareers .

LEAVE A REPLY

Please enter your comment!
Please enter your name here