Modern design
at Microsoft

Going beyond flat design

A design journey


Growing up, I dreamed of becoming a Formula One race car driver — the raw speed, cutting-edge technology and competition had me hooked. At the same time, I was fascinated by the idea of working in design and being a part of creating things that are as beautiful and unique as they are delightful and rich with personality.

I ultimately took a path that led me to Microsoft 16 years ago where amazing technology and fierce competition abound. But Microsoft was hardly synonymous with design.

That is, until about three years ago when a brilliant community of designers started to think differently about design and ultimately established a Microsoft design ethos. Since then a remarkable shift has taken place.

Nick Bilton of The New York Times recently wrote: (Microsoft’s) “decision to focus on ‘flat design,’ a type of visual scheme where everything has a smooth and even look, was a few years ahead of the rest of the technology and user interface industry.”

Though “flat design” is a popular meme right now, there is something much, much deeper going on here at Microsoft. With my own lifelong passion for design I immersed myself in the community and got a front-row seat on a journey that has its roots as far back as the late ‘90s with Encarta’s bold use of typography and clean interface. But it truly sprang to life in late 2010 with the launch of Windows Phone and in the last few weeks has advanced even further with Windows 8.1 and Xbox One.

I started from the very place I bet you are right now — disbelief that Microsoft is leading the way on design.

Your browser does not support the video element.

The emergence of modern design


By 2010 technology was ubiquitous in our lives, almost excessively so. Things had become too complex (including our products) and weren’t centered on people. With more and more levers and controls (and toolbars), the ubiquity and complexity became a barrier to what we aspired to do with software: empower people to get stuff done.

It was time for a change.

In February of that year, design leads from across the company set in motion a new design direction. They decided enough was enough: It was time to refocus on people and place a greater emphasis on a consistency of design across products such as Windows, Office, Windows Phone and Xbox.

Now when you look at a Windows Phone, Windows 8 tablet or PC, or an Xbox console, they look like a family of devices. And when I 

use these devices, they behave like a family of devices, sharing my content, settings and experiences across them.  I vividly remember the first time I was handed a Windows Phone. I entered my email address and saw the phone light up with my contacts, photos and social networks — magically and effortlessly. It happened again when I first powered up my Windows 8 tablet.

I was witnessing design beyond the user interface — something designers call UX, or user experience. And I was witnessing it from Microsoft. Somewhere deep inside the company, someone was thinking about my experience beyond a single device or application. Now when I jot down a note in OneNote on my laptop it’s instantly available on my Windows Phone. When I take a photo on my Windows Phone it’s instantly available on my home TV via SkyDrive on Xbox. All with zero intervention from me.

This sounds obvious now, but obvious isn’t easy and it certainly didn’t happen overnight.

I asked around, searching for the design czar who made this change happen. Who was handing down design edicts from the mountain? Nobody. So I dug some more and

found enormous depth to the thinking. Depth that went way beyond “flat design” to three foundational external influences and a set of design principles that were organically adopted by every design team in the company.

These external influences are foundational to design at Microsoft both today and tomorrow.

The Modern Design Movement (The Bauhaus), with its focus on making the “function” beautiful is the first influence. At the heart of the Bauhaus philosophy is stripping away superfluous decorations to focus on the essence of the functional. There are many parallels in today’s computing world. The practice of mimicking real-world materials such as glass, brushed metal or leather, and effects such as drop shadows, reflections and lens flares, are an attempt to adorn experiences without being functional. When Sam Moreau, design director for Windows, says, “The content is the interface,” he’s channeling his inner Bauhaus.

International Typographic Style (or Swiss Style) is the second influence. It’s a graphic design style that emphasizes cleanliness,

readability and objectivity. The hallmarks of Swiss Style are great typography, a focus on layout and grid systems, and the use of bold, flat color. It’s a style that is seen in way-finding signage at airports and other transportation hubs, which are by their nature busy and information-dense environments — hence why it works so well in our busy, digital world. When this approach is infused with the things people love (their photos, their people, their apps), you end up with something as personal and unique as Windows Phone.

The field of Motion design is the third influence. Early pioneers such as Saul Bass used great graphic design, typography and motion to create title sequences that set an emotional stage for films. In creating a stage for creativity, expression and productivity in products such as Windows, Office, Bing, Visual Studio and Xbox, designers understood that not only could motion support those activities, it could also aid usability and create a positive emotional impact.

 

North by Northwest © 1959, © 2009 Turner Entertainment Co. and Warner Bros. Entertainment Inc. Distributed by Warner Home Video. All rights reserved.

 

Charting Microsoft’s design principles


Those three influences underpin Microsoft's design principles. At first glance, it's easy to assume that Microsoft's design approach is simply “tiles and typography.” That myth was dispelled two years ago when I sat in a cavernous room on our Redmond campus. Four hundred designers from across the company, representing every design discipline at Microsoft, gathered to discuss the principles and share how they were applied. Tiles and typography this is not. Here's how designers at Microsoft explain them and how I've observed them being applied:

Pride in craftsmanship
Pride in craftsmanship is about devoting time and energy to small things that many will see often. It’s about engineering experiences that are complete and polished at every stage — be that pixel-perfect icons or error messages that make sense to real people. With Surface,

pride in craftsmanship was elevated to a new level. The device is constructed from a unique approach called VaporMg (pronounced “vapor-mag”) — a combination of material selection and engineering process that delivers a device that is both thin and light while being very strong and durable. Surface really is a feat of engineering — and a work of art.

Craftsmanship isn’t just about hardware, though. As I’ve toured the design studios in Microsoft, I’ve witnessed microscopic care applied to every pixel, every movement and what those details communicate. Take a magnifying glass to icons in Windows Phone and you’ll see attention to detail. Set a picture password in Windows 8 and you'll see how design makes technology “feel” more personal.

Fast and fluid
Products that feel immersive and responsive are compelling, delightful and bring the interface to life. Products should be designed to let people interact directly with content and respond to actions with matched energy.

Your browser does not support the video element.

Meaningful use of motion can tell a story. Windows Phone’s entire design is about getting you in and out of the phone as quickly as possible — it’s fast and fluid with a focus on simple, quick-use scenarios. SkyDrive and Outlook.com embrace this principle, too. They focus on reductionism, subtle motion and graceful speed to help people get stuff done and bring their content to the fore.

Designers on a wide variety of products and services are taking these principles to heart. Late last year I spent an afternoon in the design studio of the team building Outlook Web Access (OWA) for Exchange Server 2013. They were in the process of building a radically new OWA that scales the user interface to different screen sizes and across touch, mouse and keyboard inputs.

Authentically digital
Being authentically digital is about going beyond the rules and properties of the physical world to create new and exciting possibilities in a purely digital realm. It’s about designing for the form factor, be it hardware or software. And it's about delivering interfaces free from unnecessary decoration or ornamentation.

In software, traditional visuals such as beveled buttons, reflections, drop shadows and the use of faux materials such as simulated wood grain, brushed metal and glass are attempting to mimic real-world materials and objects. Microsoft is pushing those notions aside — our designers are celebrating the fact that software is digital and made of pixels and elements such as typography, color and motion-enabled experiences that aren't possible in the real world. As content comes to life, the user interface gets out of the way. Live Tiles for messaging and photos on Windows 8 and Windows Phone bring the experience to life for me with my photos and the people I care about — not with a static icon. Expressing myself digitally through my Xbox Live avatar is another authentically digital experience that celebrates digital design.

In hardware, authentically digital means being honest about materials and interaction. If a button looks like metal, it should be metal — if not, it’s communicating a lack of authenticity.

Do more with less
This principle is concerned with focusing on only what is needed — reducing to the essence and celebrating content. Our

Your browser does not support the video element.

research shows people don’t care about the origin of a fake light source that may display a drop shadow on an icon — it’s superfluous. A Microsoft designer’s focus is on making every element have a clear and useful purpose. No more, no less. It helps communicate what is most important so a person can focus on the task at hand.

The Office team is consistently focusing on how to design productivity-related experiences that scale across devices and user contexts. Office on a phone is primarily a consumption and light editing experience, so the interface is tailored to suit that medium. Office on a large screen affords more information density on the screen without being overwhelming. On a laptop or tablet users toggle between these two experiences based upon the context of the task at hand. The goal is to deliver a product that helps customers do brilliant things every day, on any device and from anywhere, by helping them focus on the task and not the tools or technology.

Win as one
The design principles are about much more than visual style — they're about a series of consistent experiences. Small details such as

shared iconography and typography and more subtle capabilities such as shared interaction metaphors (swiping, gesturing, searching, etc.) deliver that consistency. Each time a customer uses one of our products we want it to look and feel like it came from the same company — from the packaging to the retail experience all the way through to using a product. When you connect a Touch Cover to a Surface, it feels as if they were born in the same place; they work together seamlessly and are comfortable and elegant together. When you search using Bing, it looks the same regardless of whether you're on Xbox, a Windows laptop, a Windows Phone or a non-Microsoft device. When you control Xbox from your tablet or Windows Phone using SmartGlass, it's a magical experience. The thoughtful application of the core design principles makes this happen.

Putting the principles to work


These principles are now applied across graphic, industrial, motion and audio design, and across our packaging, websites and advertising — in fact, across pretty much everything we do. Over the past three years it's been nothing short of a revolution, something Nick Bilton at  The New York Times recognized: “It might sound audacious to think that Microsoft, the arbiter of uncool, was at the forefront of design a few years ago. But it was.”

And we aren’t stopping.

Last week we gave a first look at Windows 8.1, including examples of where the principles are applied with more ways to reflect your personality — more colors, new tile sizes, backgrounds and motion for the Start screen. When you apply the new large tile size to something such as weather, it’s a perfect example of the content becoming the interface.

Building on this theme, the Search Charm in Windows 8.1 provides search results powered by Bing in a rich, simple-to-read, aggregated view of many content sources (the Web, apps, files, etc.), and SkyDrive brings an even deeper connection with the cloud and your other devices. It’s an ongoing application of our win-as-one principle to create experiences that work together as if they were built together.

A few weeks ago we showed Xbox One and the many ways it embraces the design principles, whether through the interface, shared iconography, the inclusion of familiar behaviors from Windows 8 such as Snap view (which lets you have two applications simultaneously on screen), or the application of the Segoe font that's familiar to Windows Phone and Windows 8 users.

And that’s just the software.

Xbox One physically embodies our design principles. Viewed from above, it's two 16:9 rectangles, inspired by the aspect ratio of Live Tiles. The new controller is a product of relentless attention to detail — whether it's micro texture on the thumbstick (a response

to observing how gamers grip the top and side during gameplay), embedding the battery compartment for more comfort and balance, or the triple-shot of injected resin buttons with that familiar Segoe font. (The buttons look so good my daughter thought they were candy.)

Beyond Microsoft, application developers are taking the design principles and using them to make their apps shine. As the operating system fades to the background apps, and more importantly your content, take center stage. A perfect example of this is Facebook’s beta app on Windows Phone. It complements the principles of do more with less and authentically digital while still being true to the Facebook brand. On Windows 8, I love applications such as WeatherFlow and NextIssue that use the canvas of Live Tiles to do more with less and elevate content beyond the icon.

 
Your browser does not support the video element.

What’s next for design at Microsoft?


It’s been a fascinating journey over the past three years as I’ve watched Microsoft designers refine, hone and thoughtfully apply these principles across the company. The designers mimic their creations; they rarely step into the limelight; they prefer their work be in the foreground. But as a fan of their work, I can’t resist sharing what others are saying about it.

Paula Scher on Microsoft design

Partner at Pentagram

Your browser does not support the audio element.

“The language that Windows Phone 8 presents is a very digital language, it says ‘this is digital information presented on a smartphone,’ and as such is not trying to bring in other cultural ideas. ... It is a nice, clean, pure color, interface. The tiling system is intuitive. It is not over-designed to bring in other narratives from other objects.” – Design Museum, England

“I like where Microsoft is going; they’re moving away from skeuomorphism and thinking more about touch” – Yves Behar

This is a multiyear journey, so there’s a WHOLE LOT more to do. Occasionally, I still stumble across broken experiences, confounding error messages and inconsistency, but increasingly they’re exceptions. While flat design is the meme of the moment, design at Microsoft is about something different. Our designers have done something I didn’t dream of: They’ve brought personality to technology. They’ve put me and all of the people and content that I love at the center and connected my devices in a deeply personal way.

Sixteen years ago, I joined a company known for cutting-edge, world-changing technology. That was enough for me to check my passion for design at the door. Now I’m part of a company that’s combining incredible technology with brilliant design to transform our everyday work-and-play experiences.
I'm living the dream …

web analytics