Microsoft design principles

Applies to Windows and Windows Phone

The foundation that drives good design

We believe that following the Microsoft design principles can help you build Store apps that delight your users, and which you can be proud of. Use these principles as you plan your app, and let them guide your design and development choices.

About modern design

For a long time, Microsoft has been a technology leader in many areas, and in 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 the 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 like Saul Bass, who used motion along with type and design to create beautiful title sequences for films. Great motion design not only delights, but it can also help explain to the user how to accomplish a task.

For more info about the design pillars, see Modern design at Microsoft.

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

  • Pride in craftsmanship
  • Do more with less
  • Fast and fluid
  • Authentically digital
  • Win as one

Pride in craftsmanship

This principle is first 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 passion 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 perfectly aligned on a grid, to colors, to the typography on an app screen. 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 gives your content coherency. There are both esthetic and practical benefits to a proportional arrangement of elements. The user can absorb the page quickly and comfortably.

The modern typographic grid is the scaffolding that lends coherency to your content

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 in the hierarchy appear distinct from each other. If you use the different property values in a consistent way, the user will get into the rhythm of your app and each level will be distinct and immediately recognizable.

Make your app's visual hierarchy clear to the userMake your app's visual hierarchy clear to the user
HierarchyInsufficient hierarchy

 

Large text, high color contrast. In the preceding example, "threads" is the header of the selected pivot item. It establishes the context of the content that appears below it. The header is high contrast (white on black) and that tells us that it's the selected item on the page. The other item's header has lower contrast (gray on black) and that de-emphasizes it.

Next largest text. The most important detail in the list of threads is the name of the person you're messaging.

Smallest text. The first line or two of each message is next in importance. Color differentiates read and unread messages from each other and from the name.

Spacing and alignment. Use more space between threads—and less space within a thread—to show hierarchy. Just right-aligning the timestamp of the message makes it stand out.

Insufficient hierarchy.Without hierarchy the page loses meaning and readability. Esthetics are lost, but more importantly, so is usability.

Who are you?

Find the typography that best reflects your app's personality. Here are some examples of typography that complement and help define the app.

Traditional typefaces reflect the serious nature of this news source

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

The typefaces in this app are contemporary and sleek

Camera360. The typefaces in this app are contemporary and sleek.

Recap and checklist

  • Sweat the details.
  • Make using apps safe and reliable.
  • Use balance, symmetry, and hierarchy.
  • Align your app layout to the grid—the new layout for apps.
  • Make your app accessible to the widest possible audience, including people who have impairments or disabilities. See Accessibility: Design Guidelines.

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 this example, names and titles are easier to read.

Let the user interact directly with contentLet the user interact directly with content
Content-focusedDistracting chrome

 

Let your content breathe

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

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

Recap and checklist

  • Be great at something instead of mediocre at lots of things.
  • Put content before chrome.
  • Be visually focused and direct, letting people get immersed in what they love, and they will explore the rest.
  • Inspire confidence in users.
  • Reduce redundancy in your UI.

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 that bring the interface to life and delight users. This principle puts people and tasks before technology.

If your app is a tablet app or a phone app, remember that a good app for people who are "on the go" focuses on simple, quick-use scenarios. For use cases like that, 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.

Live Tiles are responsive, alive, and engaging

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 distinguish different types of actions. The lock screen bounces when tapped to show that you can slide it up. An item's exit transition implies how to swipe that item back into view.

Use motion meaningfully

Recap and checklist

  • Be responsive to user interaction and ready for the next interaction.
  • Design for touch and direct interaction.
  • Delight your users with motion.
  • Smoothly connect to what comes before and after.

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.

Be infographic, not just iconographicBe infographic, not just iconographic
IconographicInfographic

 

Recap and checklist

  • Be dynamic and alive with communication.
  • Use typography beautifully.
  • Use bold, vibrant colors.
  • Connect to the cloud so users can stay connected to each other.

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 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 throughout the ecosystem of Microsoft 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 give you the opportunity to design for scenarios that aren't possible by building for just one platform.

Consider how your app could work across the ecosystem of devices and form factors

Recap and checklist

  • Use the UI model.
  • Work with other apps to complete scenarios by participating in app contracts.
  • Use our tools and templates to promote consistency.

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

Related topics

Planning Windows Store apps
Navigation design for Windows Store apps
Commanding design for Windows Store apps
Touch interaction design
UX guidelines for Windows Store apps
Making great Windows Store apps
Accessibility for Windows Store apps

 

 

Show:
© 2014 Microsoft