Quantcast
Channel: Stories applauded for by Danielle McClune on Medium
Viewing all articles
Browse latest Browse all 11

Iconic Icons: Designing the World of Windows

$
0
0

Introducing the new Windows 10 icons in Fluent Design

Windows 10 Start menu with Fluent iconography
The new Windows 10 icons in Fluent Design.

To design for Windows is to design for the world. Today, Windows 10 powers hundreds of millions of devices around the globe: in schools, homes, offices, and on the go. It’s part of the history of computing itself, and designers have been along for the journey since the outset, bringing the aesthetic principles of design to a new paradigm of user-friendly computing.

That journey has evolved remarkably, always with a focus on the way people rely on technology to achieve their best. The Windows 1.0 operating system (OS) premiered to the world in 1985 (no old jokes, please). Microsoft held a steady strategy in the early years of Windows: build it, release it, build it again. These were predictable 3-year cycles in which Windows was literally shipped in a box. Rhythms began to change with the onset of the early web when people were introduced to the idea of being super-connected to all the world’s information. Over time, this new behavior shifted from desktop to mobile. Computing, knowledge, and global connection became even more ubiquitous.

6 Mail logos in chronological order
Evolution of the Mail icon over time

Icons of the Future

Fast forward to the era of Windows 10 and the concept of the personal computer (the PC, fondly) means something entirely different than it did three decades ago. It’s estimated that there are four connected devices per person, with that number rising steadily. As designers, this signals to us that modern life is complicated. And as designers for Windows, this signals a need for simplicity at the systems level.

In terms of a system, we can look to the Windows icons as a means of wayfinding. Systems are inherently complex and icons provide simple points of reference. We may not even realize how much we rely on these subtle cues to navigate the OS — our brains are amazing machines that synthesize this information in the background. We rely on that cognitive machinery when we design, helping the mind multitask, organize, and communicate.

This design choreography becomes more critical as technology advances. That’s why we’ve embarked on a multi-year effort across Microsoft’s design teams to redesign our icons: a system within a system. Flat, monochrome icons look great in context of colorful tiles, but as more icon styles enter the ecosystem, this approach needs to evolve. When icons in the taskbar and Start menu are different styles, it creates more cognitive load to scan and find applications. We needed to incorporate more visual cues into the icon design language using our modernized Fluent Design Language.

Put simply: we evolved. Our experience ecosystems are incredibly intricate and have started to spill out of Windows into third-party platforms like Android, iOS, and Mac. We’re dedicated to making our icons familiar, beautiful, and inclusive within the modern phenomena of cross-platform, cross-device experiences.

Familiarity in Change

When updating the language of the system, we didn’t move away from established iconography: the translation from function to image that’s become familiar to our brains. Research shows that people want consistency in design and connection to brand, with enough differences to aid in recognition. We stretched the language to allow for literal representations as well as abstract metaphors while maintaining a common DNA that ties them all together.

Eight iterations of the calculator icon in a row.
We explored myriad of design directions for the calculator icon from a monochrome version (left) to the current Fluent version (right).

Leveraging the Fluent Design System, we introduced depth and color to our iconography. These additional cues are subtle, but they make a world of difference when scanning an interface. We live among multiple operating systems, constantly switching between tasks, priorities, and identities. The addition of color also gives a cohesive design language across platforms: the icon that’s familiar in Windows 10 is the same on Android, iOS, and Mac, providing a wayfinding path across your digital life. The new rounded corners across the Windows 10 interface achieve the same goal: making these icons feel like they live in the real world; something familiar and approachable to grab onto.

Most people will start to see new icons as app updates from the Microsoft Store. If you’re a Windows Insider in the Release Preview ring, the Mail and Calendar icons rolled out this morning. And if you’re an Insider in the Fast ring, you’ll start to see some the new icons today and even more in the coming months.

This real-world journey continues with designers across Microsoft sharing insights, research, and feedback to make the best possible system for our global customers. Redesigning these icons signals our commitment to the evolution of the Windows OS, honoring its legacy while redefining the archetype in which it lives. We love learning about the ways our customers rely on Windows to work, learn, play, and achieve, inspired by how the humble operating system can simplify modern life. Keep talking to us!

Thanks to my collaborators: Danielle McClune (writing), Maxwell Prendergast, Ryan Bickel, and Mike LaJoie (visuals), and everyone across Microsoft who helps make Windows great.

To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.


Iconic Icons: Designing the World of Windows was originally published in Microsoft Design on Medium, where people are continuing the conversation by highlighting and responding to this story.


Viewing all articles
Browse latest Browse all 11

Latest Images

Trending Articles





Latest Images