Dev Center - Design principles

Design principles

The foundation that drives good, clean design.

Modern design

For a long time Microsoft has been a technology leader in many areas and with an array of products. Recently a change began that put even more focus on design. This change was characterized by powerful foundations, exciting and influential ideas, beautiful explorations, and a sense that anything else simply felt obsolete. The foundations of this change have become our Microsoft design principles.

The philosophy of Microsoft design is exemplified by clean, uncluttered app screens that operate quickly, minimize typing, and automatically notify you of new and updated info. The user interacts with the content, rather than with controls that represent the content. And visual elements have great fit and finish.

Foundations of modern design

There's far more depth, character, and background to our modern design than you could represent with the label "flat design". Our design language is based on three distinct pillars.

  • The Bauhaus: Beginning in 1919, this iconic design school promoted a powerful design philosophy: remove anything that's superfluous. It's one thing to understand what your app's core functions are, but it takes discipline to fiercely reduce functionality down to that core. Antoine de Saint-Exupéry observed that perfection is achieved when there is no longer anything to take away. Simplicity leads to beauty, but also to usability.
  • International typographic style (Swiss Style): Swiss Style inspires Microsoft design first and foremost in bold, clean, beautiful type. This style promotes cleanliness, readability, and objectivity as its central themes. From this style we have taken the necessity of a grid, both typographic and visual, and the use of asymmetric layouts in a principled and beautiful way.
  • Motion design: Motion brings experiences to life and conveys a sense of elegance. We draw inspiration from pioneers such as Saul Bass, who used motion along with type and design to create beautiful title sequences for films. Great motion design not only delights, it can also help explain to the user how to accomplish a task.

For more info about these pillars, see Modern Design at Microsoft.

These inspirations led us to our own principles, which guide us in all of our design. While these are the principles that we have chosen, they are in some ways ubiquitous to all of design and we hope they'll help you further your brand on our platform. These are the Microsoft design principles:

Pride in craftsmanship

This principle is the first one for a reason. Creators, builders, and craftspeople throughout history have distinguished themselves as professionals by taking pride in their work. This principle is about attention-to-detail. Devoting time, energy, and love to the smallest details that are seen often or by many. It's about designing an experience that's complete and polished at every stage—from pixels aligned perfectly on a grid to colors to the typography on a page of an app. Challenge yourself to feel pride in your craftsmanship at every stage of development.

Get on the grid

In graphic design, the modern typographic grid is the scaffolding that lends coherency to your content. There are both esthetic and practical benefits to a proportional arrangement of elements. The user will be able to absorb the page quickly and comfortably.

Hierarchy and balance

To make your app's visual hierarchy clear to the user, show different types of information with different properties. You can use font size, font color, positioning, and spacing to make different levels look distinct from one another. If you balance the use of these different property values in a consistent way, the user will get into the rhythm of your app and each level of hierarchy will be distinct and immediately recognizable.

Who are you?

Find the typography that best reflects your app's personality.



The New York Times app
Traditional typefaces reflect the serious nature of this news source.


Camera360
The typefaces in this app are contemporary and sleek.

Do more with less

This principle limits your app to its core functions and no more. Think content, not chrome. Content takes many forms: pictures, emails, news articles, and so on. Remove chrome to leave only the most relevant elements on-screen, and make navigation elements from the content itself where you can. Let clean, immersive experiences rule. Every element on the screen must have value and a clear purpose.

This principle doesn't mean that you should sacrifice intuition. A design is successful if navigation elements guide the user to discover how to interact with the app. Great design balances intuition with reduction and yields a clean, beautiful final product.

Content, not chrome

Let the user interact directly with content. By removing the chrome and taking advantage of font, scale, and color, content surfaces more easily. In the example, sender names and titles are easier to read.

Content focused

Distracting chrome

Let your content breathe

Relevant commands and functionality are apparent and easy to understand and interact with.

Fast and fluid

This principle ensures that experiences are immersive and responsive. It promotes the kind of compelling animations, transitions, and responses that may not be expected, but which bring the interface to life and delight users. This principle puts people and tasks before technology.

Remember that a good mobile app focuses on simple, quick-use scenarios. People use phones while they're "on the go," so you need to design your app accordingly. Focus on delivering exactly what users want, with speed and focus, and you will be on your way to a great design.

Be alive

Live Tiles are responsive, alive, and engaging. Plus, they can run the gamut of your imagination—from notifying you about a new email to giving you the inside tip on drink specials at your favorite bar.

Motion

Create a sense of continuity, and let your app tell its story, through meaningful use of motion. Motion can prompt a user to initiate an action or to distinguish different types of actions. The lock screen bounces when tapped to show that you can slide it up. And an item's exit transition implies how to swipe that item back into view.

Authentically digital

This principle embraces the limitless capacity of innovation that the digital domain makes possible. Skeuomorphism looks to the rules and properties of the physical world to inform its design metaphors. But we embrace the power, language, and unique possibilities of our medium.

Just as the Bauhaus design school taught the removal of superfluous design elements, this principle encourages shedding digital similes, such as leather or texture effects, stitching, shadows, and reflections. Embrace a more powerful and scalable design language. This is the foundation of the authentically digital principle.

Info is in

Be infographic, not just iconographic. Information delivery is the primary goal, and it shouldn't be lost in unnecessary details. Adopting the infographic approach means cleaner content, actionable info, and no distractions.

Infographic

Iconographic

Win as one

This principle is about unifying your own work, aligning it with the common ecosystem where possible, and innovating where necessary. Factor your work so that apps and user scenarios on different platforms work together as one familiar experience and one brand. Users find familiarity empowering and they don't want to relearn for each surface they interact with. So build on the common platform of Microsoft software and services. Base your experiences on established and common controls, gestures, interaction patterns, animations, and even common authentication and storage cloud services.

In other words, try not to reinvent the wheel. Innovation is great, but not at the expense of the user experience. Every app also conveys a certain tone of voice, a personality that resonates with users. Check out how we approach Voice and start thinking about how to use it in your app. Find what works for your app and don't hesitate to emulate what has proven effective.

Think platform

Consider how your app could work across the ecosystem of devices and form factors. Ask yourself, "What is this device best at?" and optimize the experience to those unique strengths. Using multiple platforms can even enable scenarios that aren't possible by building for just one.

The principles of good design apply regardless of the visual presentation of your brand. Principled design yields experiences that users love and rely on.