06 July 2014
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.
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:
The principles of good design apply regardless of the visual presentation of your brand. Principled design yields experiences that users love and rely on.
Source: Windows Phone Dev Center
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.
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.
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.
Find the typography that best reflects your app's personality.
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.
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.
Relevant commands and functionality are apparent and easy to understand and interact with.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Find the typography that best reflects your app's personality.
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.
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.
Relevant commands and functionality are apparent and easy to understand and interact with.
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.
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.
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.
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.
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.
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.
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.
