Microsoft UWP Design Language

UX Design | Visual Design | Vector Production

You can see examples of the work produced and read more about the Universal Windows Platform at the Windows Dev Center

The Universal Windows Platform (UWP) allows you to create and deploy applications to multiple devices, independently from their form factor and using a single codebase. We were tasked to create the design principles and guidelines to help developers build their UWP apps.

Working with effective pixels

Being device agnostic, the UI of a UWP has to appear crisp at any combination of screen sizes and densities. For this reason, given the spectrum of device densities currently on the market, we devised a grid based on multiples of 4. The simple rule of snapping all UI elements to multiples of 4 allows designers to create freely, without having to compromise the quality of their output.

"Effective pixels enable you to focus on the actual perceived size of a UI element without having to worry about the pixel density or viewing distance of different devices. For example, when you design a 1'' by 1'' element, that element will appear to be approximately 1'' on all devices. On a very large screen with a high pixel density, the element might be 200 by 200 physical pixels, while on a smaller device like a phone, it might be 150 by 150 physical pixels."

Standard patterns

The next step in the process was to define standard UX patterns, which can be used by designers and developers to build their app. Think of them as a series of framework options that will solve for the most common use cases and enable you to focus on crafting your app rather than have to spend time figuring out UX mechanics. The Microsoft team was responsible for identifying these patterns and we were in charge of putting them to use.

Based on the guidelines established above, we designed a series of third party apps which illustrate proper implementation of the the UWP design guidelines, as well as provide inspiration for developers to create their own.

Running

The Running app connects you with runners in your area and tracks your most important pieces of data.

It further develops the Nav Pane pattern to display the nav item currently selected, as well as provide explicit targets for all navigation items. These appear in icon form only in the collapsed state of the navigation. Labels and overflow nav items are displayed only when the nav tray is open.

Food Truck

Finding what to eat for lunch is as easy as tapping on one of the food trucks nearest to you. The app uses Tabs as its primary navigation aid and the Master Detail model to list and display the details of the vendors close to you.

News

Time to stay updated with the rest of the world with the News app. The News app lets you keep track of your favorite news sources on desktop, tablet, mobile phone and Xbox.

It combines the use of Pivots for primary navigation and Nav Pane for secondary navigation. You can toggle between different topics through the Pivots at the top of the page and manage your news sources by accessing the Nav Pane on the top left of the screen.

Creation

Nav Pane and Active Canvas are the best combination to create content via our Creation app. The Nav Pane lets you quickly access whatever tool you want to use, while the Active Canvas opens up endless possibilities in terms of image manipulation. As easy as tap and draw.

To further promote the adoption of the Windows 10 platform by developers, some of the Universal Apps we created were used as best in class examples during the Microsoft Build Developer Conference 2016, held in San Francisco.