Porthos
Well-Known Member
- Reaction score
- 12,448
- Location
- San Antonio Tx
Blank pages and redesigns have nothing on sequels.
Last year, we rolled out the new Office icons to show our customers that we've evolved our products to support the changing world of work. A world where, despite being more mobile than ever before, social connectedness and collaboration are paramount to success. A world with immense potential for creativity and growth thanks to new flows of information.
Across Microsoft, we've worked to help facilitate and enhance these kinds of interactions and experiences. Scaling an icon design effort from 10 products to over a hundred to reflect this new world of work was both daunting and thrilling.
Scaling a design across the Microsoft ecosystem requires an open and flexible system.
But design teams across the company came together as a collective to develop design guidelines that encourage individuality while creating a cohesive whole. From enterprise to small business to consumer, product teams ensured each icon authentically represented both the product truth and the larger Microsoft brand.
We shared knowledge, iterations, obstacles, and successes. We compared icons in different contexts and made changes for one another. Most importantly, we inspired each other. This was truly a One Microsoft effort, and we can't wait to hear what you think.
From Windows utility icons to mixed reality icons in Microsoft Dynamics, all of our new icons were cut from the same cloth.
Widening the aperture of our design system
From tools like a calculator to a mixed-reality app that puts an expert anywhere in the world, the diversity of our customers' needs continues to grow exponentially. We needed our modern icon system to continuously reflect changing tides.
With the newest wave of icon redesigns, we faced two major creative challenges. We needed to signal innovation and change while maintaining familiarity for customers. We also had to develop a flexible and open design system to span a range of contexts while still being true to Microsoft.
Rich gradients, soft curves, and fluid motion connect the Edge and Office logos to each other and the rest of the icons.
Our Fluent Design System was instrumental in helping us navigate both these challenges. Fluent emphasizes building off the familiar - designing for what our customers already understand, not asking them to develop new habits or learn something new. Fluent 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.
People spend most of their working time using Microsoft Edge and Office to get things done, and the teams were excited to experiment with the new materials on these popular products. We know how important these experiences are to our customers, so the icons needed to fit in and stand out at the same time. Based on extensive testing and customer feedback, we introduced rich gradients, broadened our spectrum of colors, and implemented a dynamic motion with ribbon-like qualities.
Our customers are also beginning to use mixed reality to accomplish goals in a completely new way. Blending the physical and digital worlds in our icons helped us think beyond 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 customers use their phone, PC, or VR headset to get work done, we wanted to reach people in every environment. The newest design guidelines helped us unify icon construction 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 path to this icon redesign was no different. We conducted countless rounds of research for every icon. From mild to wild, we explored a multitude of design directions and listened to customers around the world. We learned what didn't resonate with people (flat design and muted colors) and what did (depth, gradations, vibrant colors, and motion), all of which drove our decisions.
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 haven't considered yet. Developing a system that encompasses the spectrum of literal to abstract while balancing product identity and the Microsoft brand is a huge challenge - but nothing worth accomplishing is ever easy.
Read more: The Icon Kaleidoscope - Microsoft Design - Medium
Last year, we rolled out the new Office icons to show our customers that we've evolved our products to support the changing world of work. A world where, despite being more mobile than ever before, social connectedness and collaboration are paramount to success. A world with immense potential for creativity and growth thanks to new flows of information.
Across Microsoft, we've worked to help facilitate and enhance these kinds of interactions and experiences. Scaling an icon design effort from 10 products to over a hundred to reflect this new world of work was both daunting and thrilling.
Scaling a design across the Microsoft ecosystem requires an open and flexible system.
But design teams across the company came together as a collective to develop design guidelines that encourage individuality while creating a cohesive whole. From enterprise to small business to consumer, product teams ensured each icon authentically represented both the product truth and the larger Microsoft brand.
We shared knowledge, iterations, obstacles, and successes. We compared icons in different contexts and made changes for one another. Most importantly, we inspired each other. This was truly a One Microsoft effort, and we can't wait to hear what you think.
From Windows utility icons to mixed reality icons in Microsoft Dynamics, all of our new icons were cut from the same cloth.
Widening the aperture of our design system
From tools like a calculator to a mixed-reality app that puts an expert anywhere in the world, the diversity of our customers' needs continues to grow exponentially. We needed our modern icon system to continuously reflect changing tides.
With the newest wave of icon redesigns, we faced two major creative challenges. We needed to signal innovation and change while maintaining familiarity for customers. We also had to develop a flexible and open design system to span a range of contexts while still being true to Microsoft.
Rich gradients, soft curves, and fluid motion connect the Edge and Office logos to each other and the rest of the icons.
Our Fluent Design System was instrumental in helping us navigate both these challenges. Fluent emphasizes building off the familiar - designing for what our customers already understand, not asking them to develop new habits or learn something new. Fluent 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.
People spend most of their working time using Microsoft Edge and Office to get things done, and the teams were excited to experiment with the new materials on these popular products. We know how important these experiences are to our customers, so the icons needed to fit in and stand out at the same time. Based on extensive testing and customer feedback, we introduced rich gradients, broadened our spectrum of colors, and implemented a dynamic motion with ribbon-like qualities.
Our customers are also beginning to use mixed reality to accomplish goals in a completely new way. Blending the physical and digital worlds in our icons helped us think beyond 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 customers use their phone, PC, or VR headset to get work done, we wanted to reach people in every environment. The newest design guidelines helped us unify icon construction 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 path to this icon redesign was no different. We conducted countless rounds of research for every icon. From mild to wild, we explored a multitude of design directions and listened to customers around the world. We learned what didn't resonate with people (flat design and muted colors) and what did (depth, gradations, vibrant colors, and motion), all of which drove our decisions.
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 haven't considered yet. Developing a system that encompasses the spectrum of literal to abstract while balancing product identity and the Microsoft brand is a huge challenge - but nothing worth accomplishing is ever easy.
Read more: The Icon Kaleidoscope - Microsoft Design - Medium
