Go Back

Microsoft UWP Design Language

Summary

We conceived and created six unique third party apps to showcase the flexibility of the Windows 10 Universal Apps platform.

Microsoft UWP

What We Did

UX Design | Visual Design | Vector Production

Check It Out

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

The Challenge

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.

The Guidelines

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.

The Applications

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.

Microsoft UWP Running App

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.

Microsoft UWP Food Truck App

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.

Microsoft UWP News App

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.

Microsoft UWP Creation App

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.

Client

Microsoft