|
| 1 | +--- |
| 2 | +description: Deep-dive topics like layout, navigation, input, typography, and motion. Everything you need to build a solid UX foundation for your Windows app. |
| 3 | +title: Design guidelines |
| 4 | +ms.date: 12/16/2025 |
| 5 | +ms.topic: article |
| 6 | +ms.localizationpriority: medium |
| 7 | +--- |
| 8 | + |
| 9 | +# Design guidelines |
| 10 | + |
| 11 | +The Guidelines section covers the core building blocks of Windows app design. These topics define the patterns, rules, and behaviors that ensure your app feels intuitive, polished, and aligned with Fluent Design. From color and typography to motion, layout, and materials, each foundation helps you make consistent decisions that scale across pages, features, and form factors. |
| 12 | + |
| 13 | +Use these fundamentals as a guide throughout your design process—whether you're mapping out your first screens, refining interaction patterns, or ensuring your UI matches Windows conventions. Exploring these foundations early can save development time, reduce rework, and lead to better experiences for your users. |
| 14 | + |
| 15 | +--- |
| 16 | + |
| 17 | +:::row::: |
| 18 | + :::column::: |
| 19 | + [](./signature-experiences/color.md)<br> |
| 20 | + **[Color](./signature-experiences/color.md)**<br> |
| 21 | + Use color to establish hierarchy, communicate meaning, and create a cohesive visual identity.. |
| 22 | + :::column-end::: |
| 23 | + :::column::: |
| 24 | + [](./basics/commanding-basics.md)<br> |
| 25 | + **[Commanding](./basics/commanding-basics.md)**<br> |
| 26 | + Present actions in clear, consistent patterns that help users understand what they can do. |
| 27 | + :::column-end::: |
| 28 | + :::column::: |
| 29 | + [](./signature-experiences/layering.md)<br> |
| 30 | + **[Elevation](./signature-experiences/layering.md)**<br> |
| 31 | + Apply depth and layering to guide focus and reinforce the structure of your interface. |
| 32 | + :::column-end::: |
| 33 | +:::row-end::: |
| 34 | + |
| 35 | +:::row::: |
| 36 | + :::column::: |
| 37 | + [](./signature-experiences/geometry.md)<br> |
| 38 | + **[Geometry](./signature-experiences/geometry.md)**<br> |
| 39 | + Use shape, sizing, and spatial relationships to create balanced, predictable layouts. |
| 40 | + :::column-end::: |
| 41 | + :::column::: |
| 42 | + [](./signature-experiences/iconography.md)<br> |
| 43 | + **[Iconography](./signature-experiences/iconography.md)**<br> |
| 44 | + Communicate actions and concepts quickly with familiar, purposeful icons. |
| 45 | + :::column-end::: |
| 46 | + :::column::: |
| 47 | + [](layout/index.md)<br> |
| 48 | + **[Layout](./layout/index.md)**<br> |
| 49 | + Organize content with grids, spacing, and alignment patterns that improve clarity and flow. |
| 50 | + :::column-end::: |
| 51 | +:::row-end::: |
| 52 | + |
| 53 | +:::row::: |
| 54 | + :::column::: |
| 55 | + [](./signature-experiences/materials.md)<br> |
| 56 | + **[Materials](./signature-experiences/materials.md)**<br> |
| 57 | + Enhance your UI with Fluent materials like Mica and Acrylic to add depth and warmth. |
| 58 | + :::column-end::: |
| 59 | + :::column::: |
| 60 | + [](./signature-experiences/motion.md)<br> |
| 61 | + **[Motion](./signature-experiences/motion.md)**<br> |
| 62 | + Use motion to provide feedback, guide attention, and create smooth, responsive interactions. |
| 63 | + :::column-end::: |
| 64 | + :::column::: |
| 65 | + [](./basics/navigation-basics.md)<br> |
| 66 | + **[Navigation](./basics/navigation-basics.md)**<br> |
| 67 | + Help users move through your app with predictable, well-structured navigation patterns. |
| 68 | + :::column-end::: |
| 69 | +:::row-end::: |
| 70 | +:::row::: |
| 71 | + :::column::: |
| 72 | + [](./style/sound.md)<br> |
| 73 | + **[Sound](./style/sound.md)**<br> |
| 74 | + Use audio cues to provide feedback, reinforce actions, and support accessibility. |
| 75 | + :::column-end::: |
| 76 | + :::column::: |
| 77 | + [](./signature-experiences/typography.md)<br> |
| 78 | + **[Typography](./signature-experiences/typography.md)**<br> |
| 79 | + Set the tone and improve readability with consistent type choices and hierarchy. |
| 80 | + :::column-end::: |
| 81 | + :::column::: |
| 82 | + [](./usability/index.md)<br> |
| 83 | + **[Usability](./usability/index.md)**<br> |
| 84 | + Ensure your app is easy to use through intuitive interactions, clear affordances, and accessibility. |
| 85 | + :::column-end::: |
| 86 | +:::row-end::: |
| 87 | + |
| 88 | +:::row::: |
| 89 | + :::column::: |
| 90 | + [](./widgets/index.md)<br> |
| 91 | + **[Widgets](./widgets/index.md)**<br> |
| 92 | + Extend your app with glanceable, interactive surfaces that surface key information and actions. |
| 93 | + :::column-end::: |
| 94 | + :::column::: |
| 95 | + [](style/writing-style.md )<br> |
| 96 | + **[Writing](./style/writing-style.md )**<br> |
| 97 | + Use clear, concise, and helpful language to improve understanding and reduce cognitive load. |
| 98 | + :::column-end::: |
| 99 | +:::row-end::: |
![learn-build-service-prod[bot]](https://avatars.githubusercontent.com/in/237442?v=4&size=40){kind=avatar}
0 commit comments