Select a language to translate this page!
Powered by Microsoft® Translator
Great design helps your Windows Store apps stand out from the crowd. Improvements to the Windows platform in 8.1 Preview, such as an expanded common controls set with greater design flexibility, allow Windows Store apps to achieve richer designs than ever before. In this blog post and related Build talk, I discuss how the Microsoft design language is evolving in key areas of Windows user interface--personality, patterns, principles, and platform. Windows in-box apps and experiences are used as examples to show how these “4 P’s” can be leveraged to create compelling app experiences.
Windows Store apps have visual and interactive design personality. Personality helps to differentiate your app, strengthen your company’s brand, and create a positive emotional connection with your users. To achieve a great personality, be creative with the composition, typography, color and motion of your app.
There is a misconception that the Microsoft visual language consists only of uniform rectangles in a grid. Yes, this is one way to compose your user interface but not the only one. Windows experiences are structured, clean, and have a clear information hierarchy, but they’re not boring.
The new Windows 8.1 Preview Search results could have displayed all the information in a uniform grid layout, but that would do a disservice to the richness of the content provided by Bing. The design consists of a collage of beautiful full-bleed images using an accent color to make the information more visually pleasing.
Search results in Windows 8.1 Preview
Search results layout diagram in Windows 8.1 Preview
We believe typography is beautiful. Typography plays an important role in the personality of the new Alarms app. We use a 32 point Segoe UI Light font to display the time, which is centered within the radial dial to emphasize its importance. Colored alarm labels create a connection to the colored alarms.
The Alarms app features great typography design
Windows colors are rich, saturated and vibrant. The new Reading List app uses its rich app brand color to create visual interest in the user interface. Swatches of color that begin at the group headers and reach to the app’s edge make the app feel immersive and provide visual cues about the freshness of content, getting darker for older content.
Reading List layout diagram
Windows is alive with motion. Great motion helps connect what comes before to what comes after, making the experience feel fast and fluid. Many animations are built into the common controls, such as the list controls, and are available for use in the Windows animation Library. Use these to make your app feel dynamic or to add moments of delight.
Design flexibility is built into the platform, so be creative with your app personality.
For more info, see:
Windows UIs exhibit common user interface patterns. In Windows 8, we provided a set of patterns for navigation, commanding, scrolling content, presenting data, text editing, and essential controls. In Windows 8.1 Preview, we’ve made additions that provide more design flexibility and support for multiple windows sizes and orientations.
The hub is a key pattern for content-rich Windows Store apps. This highly flexible pattern consists of groups of heterogeneous content, which provide a consistent way to navigate across sections as well as deeper into a section. In Windows 8.1, there is a common Hub Control (WinJS and XAML) that supports this pattern with many built-in features, such as the ability to call out hero content, common experience with mouse, touch and keyboard, and responsive performance.
Anatomy of a Hub
The Windows Store for Windows 8.1 is built using the Hub control
The Navigation Bar (WinJS only) is another new common pattern for Windows 8.1 Preview. It’s a specialized app bar that contains navigation commands and is invoked by swiping from the top or bottom edge with touch and by right-click for mouse. It provides a consistent, global navigation across an app. It scales to handle many links and can show one or more levels of hierarchy.
The Windows Store uses the nav bar as global navigation
The app bar pattern itself has evolved to support more flexible and scalable commanding. As the app window decreases in width, the commands get closer together and labels get dropped automatically. Commands can be easily grouped together. Users can now easily use the keyboard across commands.
At full screen, the command labels are visible
Labels drop off as the window width is decreased. Commands can also be grouped into flyouts.
Patterns around presenting data have evolved for Windows 8.1 Preview. In addition to the familiar horizontal grid, you’ll see more apps starting to take advantage of support for both horizontal and vertical grids, cell-spanning grids, and drag-and-drop. We encourage you to consider taking advantage of these patterns to deliver the best presentation of data for your user and scenarios.
Drag and drop between lists in Mail
Text editing in Windows 8.1 Preview benefits from more intuitive selection including the ability to easily select entire words and fine cursor placement with touch.
For more info, see:Navigation design for Windows Store appsCommand design for Windows Store appsPaul Gusmorino's 2011 //build talk on creating Windows Store apps using common controls
Windows UIs are grounded in a set of design principles. These five principles represent our design philosophy:
These principles are a valuable tool used across our engineering team to ensure that everyone is building towards a product with a clear point of view that’s cohesive and consistent. They’re used by the Windows engineering team to create the beautiful experiences in Windows 8 and 8.1. We highly encourage Windows app builders to adopt our principles or build upon them to guide you towards achieving that great app.
For more info, see: Microsoft Design Principles in the Windows Dev CenterWindows Design Director Sam Moreau’s 2011 //build talk on principles and personality
Windows UIs are built on the Windows platform. Taking advantage of the controls and other features of the platform enables you to build a really great Windows UI. This is because so much of the look and feel of your app comes down to the fundamental behaviors and characteristics of the platform itself. Examples include all the details of how users can select and edit text, the way touch panning sticks to your finger, and how users can navigate around using touch, mouse, and keyboard.
As you design and build your Windows Store apps, take advantage of the improvements we’ve made in the 4 P’s of user interfaces--
You can learn about these in more detail and see more great examples from my and Paul Gusmorino’s Build talk: Designing and Building Windows User Interfaces:
Your browser doesn't support HTML5 video.
Download this video to view it in your favorite media player: High quality MP4 | Lower quality MP4
Let your creativity shine and go forth and create great Windows Store apps!
--Moneta Ho Kushner, Senior Design Lead, Windows
I love the design of these things. I would really like to see this design expand to Windows Phone too, though. Take the Alarms app for example... it should look the same and behave the same on Windows 8 and Windows Phone.
@smallmountain You realize this is the Windows App Builder blog...specifically dedicated to windows store apps. On the Windows Desktop there's already a ton of content on how to build using WPF, Win Forms, and Silverlight. It's not that those technologies are dead...just that they're mature.
@smallmountain - I am perfectly aware that a major change in the Mail App is coming. Those who have tried it report that it still has the issue that it cannot print out a single page or a range of pages in a multi-page email. It remains badly-designed as far as printing is concerned.
Great stuff' I would love to have a universal theme where all apps have the same color like windows phone.
@Geoff Coupe - In case you are not aware, a supposed major update of the Mail app is coming along with Windows 8.1. It will either ship with Windows 8.1 RTM or just after. The Mail app has been a major problem in so many ways in Windows RT. The update needs to be ridiculously good.
@xpclient iOS7 has been widely ridiculed even by Apple fanboys for sloppy inconsistent and confusing design. If you think iOS7 is an example of good design you should not be commenting.
This is all very well, but it seems to me that the Mail App development team still hasn’t got a clue on how to use the Windows 8 printing system.
You can’t just print the current page, or a selection of pages from the Mail App. Something that’s easily done with the traditional Windows Print dialog, but which is totally impossible with the Mail App. It is also the same with the IE10 App in Windows 8 (but that has been fixed for IE11 in Windows 8.1). Both Apps drop the “Pages” setting from the Modern UI Print screen. See gcoupe.wordpress.com/.../small-steps
The Reader App team and now the IE11 App team understand how to use the printing platform. Could someone please, please tell the Mail App development team how to use it, for heaven’s sake?
The colors Microsoft uses as part of Metro design language are far too flat, too Windows 3.1 era-ish, too repulsive - it's not modern. Flat design can also be done with some gradients that makes it look better. I recommend Microsoft designers take a look at iOS 7. It is also without the skeuomorphism and embellishments but keeps the overall look richer by using subtle gradients. Also, using white icons everywhere is a bad idea. This is the fundamental difference Apple got right with iOS 7's design vs Metro which personally I feel quite repulsive.
Well, I also found one really nice post on Windows 8 Themes which I would like to present here.
I just wish that Bing Search Hero for Locations worked like it does for those in USA and them doing their goodness for locations.
See the attached for what AUSTRALIA gets for doing a location search "San Diego" http://sdrv.ms/1cM2xG6 (Note it's a very POOR relation)
The DUMB thing is that the new Seach Hero works fine with People/Bands.
Here we go again. We have an article on the Windows App Builder Blog entitled "Designing and Building User Interfaces for Windows." And the article is just about Windows Store apps. Are you trying to tell us that Windows Store apps is all there is now? When you say Windows now, you mean "Windows Store"? We should just assume that? Desktop applications are down the memory hole?
It's not completely your fault, because Microsoft has done such a horrible job naming these things. If "Windows Store" apps had an intelligent name, kind of like Google has Android, it would be a lot easier for you guys to communicate without making people angry.