| description | title | keywords | ms.date | ms.topic | ms.localizationpriority |
|---|---|---|---|---|---|
Learn how to design and code a Windows app that's easy to navigate and looks great on a variety of devices and screen sizes. |
Design basics |
uwp app layout, universal windows platform, app design, interface, windows app layout |
09/30/2021 |
article |
medium |
Windows 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 design language as well as the needs of our app-building community.
:::row::: :::column::: :::image type="content" source="images/app-silhouette-hero.png" alt-text="App silhouette hero image"::: :::column-end::: :::column::: App Silhouette
A high-level look at app patterns commonly used across our in-box applications. :::column-end::: :::row-end:::
:::row::: :::column::: :::image type="content" source="images/signature-experiences-hero.png" alt-text="Signature experiences hero image"::: :::column-end::: :::column::: Windows 11 Signature Experiences
See what’s new for Windows 11 design elements. :::column-end::: :::row-end:::
:::row::: :::column::: :::image type="content" source="images/navigation-basics-hero.png" alt-text="Navigation basics hero image"::: :::column-end::: :::column::: Navigation basics
Navigation in Windows apps is based on a flexible model of navigation structures, navigation elements, and system-level features. This article introduces you to these components and shows you how to use them together to create a good navigation experience. :::column-end::: :::row-end:::
:::row::: :::column::: :::image type="content" source="images/command-basics-hero.png" alt-text="Command basics hero image"::: :::column-end::: :::column::: Command basics
Command elements are the interactive UI elements that enable the user to perform actions, such as sending an email, deleting an item, or submitting a form. This article describes the command elements, such as buttons and check boxes, the interactions they support, and the command surfaces (such as command bars and context menus) for hosting them. :::column-end::: :::row-end::: :::row::: :::column::: :::image type="content" source="images/content-basics-hero.png" alt-text="Content basics hero image"::: :::column-end::: :::column::: Content basics
This article provides some practical tips and examples to help you design the content of your app: Windows spacing rationale, using the type ramp to demonstrate hierarchy, lists and grids, and how to group controls. :::column-end::: :::row-end:::