Introduction to UWP app design

sample lighting app

The Universal Windows Platform (UWP) design guidance is a resource to help you design and build beautiful, polished apps.

It's not a list of prescriptive rules - it's a living document, designed to adapt to our evolving Fluent Design System as well as the needs of our app-building community.

This introduction provides an overview of the universal design features that are included in every UWP app, helping you build user interfaces (UI) that scale beautifully across a range of devices.

Effective pixels and scaling

First of all, UWP apps run on all Windows 10 devices, from your TV to your tablet or PC. How does that affect your app's UI?

same app on various devices

Well, fortunately for you, UWP apps automatically adjust the size UI elements so that they are legible and easy to interact with on all devices and screen sizes!

When your app runs on a device, the system uses an algorithm to normalize the way UI elements display on the screen. This scaling algorithm takes into account viewing distance and screen density (pixels per inch) to optimize for perceived size (rather than physical size). The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible to the user as a 24 px font on 5" phone that's a few inches away.

viewing distances for different devices

Because of how the scaling system works, when you design your UWP app, you're designing in effective pixels, not actual physical pixels. Effective pixels (epx) are a virtual unit of measurement, and they're used to express layout dimensions and spacing, independent of screen density. (In our guidelines, epx, ep, and px are used interchangeably.)

You can ignore the pixel density and the actual screen resolution when designing. Instead, design for the effective resolution (the resolution in effective pixels) for a size class (for details, see the Screen sizes and breakpoints article).

Tip

When creating screen mockups in image editing programs, set the DPI to 72 and set the image dimensions to the effective resolution for the size class you're targeting. For a list of size classes and effective resolutions, see the Screen sizes and breakpoints article.

Multiples of four

The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.

UWP scales across a range of devices with scaling plateaus of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%. The base unit is 4 because it's the only integer that can be scaled by non-whole numbers (e.g. 4*1.5 = 6). Using multiples of four aligns all UI elements with whole pixels and ensures UI elements have crisp, sharp edges. (Note that text doesn't have this requirement; text can have any size and position.)

grid

Layout

Since UWP apps automatically scale to all devices, designing a UWP app for any device follows the same structure. Let's start from the very beginning of your UWP app's UI.

Windows, Frames, and Pages

When a UWP app is launched on any Windows 10 device, it launches in a Window with a Frame, which can navigate between Page instances.

Frame

You can think of your app's UI as a collection of pages. It's up to you to decide what should go on each page, and the relationships between pages.

To learn how you can organize your pages, see Navigation basics.

Frame

Page layout

What should those pages look like? Well, most pages follow a common structure to provide consistency, so users can easily navigate between and within pages of your app. Pages typically contain three types of UI elements:

  • Navigation elements help users choose the content they want to display.
  • Command elements initiate actions, such as manipulating, saving, or sharing content.
  • Content elements display the app's content.

A common layout pattern

To learn more about how to implement common UWP app patterns, see the Page layout article.

You can also use the Windows Template Studio in Visual Studio to get started with a layout for your app.

Controls

UWP's design platform provides a set of common controls that are guaranteed to work well on all Windows-powered devices, and they adhere to our Fluent Design System principles. These controls include everything from simple controls, like buttons and text elements, to sophisticated controls that can generate lists from a set of data and a template.

UWP controls

For a complete list of UWP controls and the patterns you can make from them, see the controls and patterns section.

Style

Common controls automatically reflect the system theme and accent color, work with all input types, and scale to all devices. In that way, they reflect the Fluent Design System - they're adaptive, empathetic, and beautiful. Common controls use light, motion, and depth in their default styles, so by using them, you're incorporating our Fluent Design System in your app.

Common controls are highly customizable, too--you can change the foreground color of a control or completely customize it's appearance. To override the default styles in controls, use lightweight styling or create custom controls in XAML.

Accent color gif

Shell

Your UWP app will interact with the broader Windows experience with tiles and notifications in the Windows Shell.

Tiles are displayed in the Start menu and when your app launches, and they provide a glimpse of what's going on in your app. Their power comes from the content behind them, and the intelligence and craft with which they're offered up.

UWP apps have four tile sizes (small, medium, wide, and large) that can be customized with the app's icon and identity. For guidance on designing tiles for your UWP app, see Guidelines for tile and icon assets.

tiles on start menu

Inputs

UWP apps rely on smart interactions. You can design around a click interaction without having to know or define whether the click comes from a mouse, a stylus, or a tap of a finger. However, you can also design your apps for specific input modes.

inputs

Devices

devices

Similarly, while UWP automatically scales your app to different devices, you can also optimize your UWP app for specific devices.

Usability

Last but not least, usability is about making your app's experience open to all users. Everyone can benefit from truly inclusive user experiences - see usability for UWP apps to see how to make your app easy to use for everyone.

If you're designing for international audiences, you might want to check out Globalization and localization.

You might also want to consider accessibility features for users with limited sight, hearing, and mobility. If accessibility is built into your design from the start, then making your app accessible should take very little extra time and effort.

Tools and design toolkits

Now that you know about the basic design features, how about getting started with designing your UWP app?

We provide a variety of tools to help your design process:

  • See our Design toolkits page for XD, Illustrator, Photoshop, Framer, and Sketch toolkits, as well as additional design tools and font downloads.

  • To get your machine set up to write code for UWP apps, see our Get started > Get set up article.

  • For inspiration on how to implement UI for UWP, take a look at our end-to-end sample UWP apps.

Video summary

Next: Fluent Design System

If you'd like to learn about the principles behind Fluent Design (Microsoft's design system) and see more features you can incorporate into your UWP app, continue on to Fluent Design System.