Merge branch 'main' into alvinashcraft/main-update-windows-share-topics-for-seo

Author: alvinashcraft

.openpublishing.build.ps1

@@ -8530,6 +8530,36 @@
       "redirect_url": "/windows/apps/develop/devices-sensors/scan-from-your-app",
       "redirect_document_id": false
     },
+    {
+      "source_path": "hub/apps/design/style/index.md",
+      "redirect_url": "/windows/apps/design",
+      "redirect_document_id": false
+    },
+    {
+      "source_path": "hub/apps/design/signature-experiences/design-principles.md",
+      "redirect_url": "/windows/apps/design",
+      "redirect_document_id": false
+    },
+    {
+      "source_path": "hub/apps/design/signature-experiences/signature-experiences.md",
+      "redirect_url": "/windows/apps/design",
+      "redirect_document_id": false
+    },
+    {
+      "source_path": "hub/apps/design/style/color.md",
+      "redirect_url": "/windows/apps/design/signature-experiences/color",
+      "redirect_document_id": false
+    },
+    {
+      "source_path": "hub/apps/design/style/typography.md",
+      "redirect_url": "/windows/apps/design/signature-experiences/typography",
+      "redirect_document_id": false
+    },
+    {
+      "source_path": "hub/apps/design/motion/index.md",
+      "redirect_url": "/windows/apps/design/signature-experiences/motion",
+      "redirect_document_id": false
+    },
     {
       "source_path": "hub/dev-home/project-ironsides.md",
       "redirect_url": "/windows/dev-home/dev-diagnostics",

.openpublishing.redirection.json

@@ -1,76 +1,114 @@
 ---
-description: Design guidelines and UI code examples for creating Windows app experiences.
-title: Design and code Windows apps
-ms.date: 07/19/2024
+description: Design guidelines and UI examples for creating Windows app experiences.
+title: Design Windows apps
+ms.date: 10/28/2024
 ms.topic: article
 ms.localizationpriority: medium
 ---
+# Design for Windows apps
 
-# Design and code Windows apps
+Here, you'll find design guidelines and examples for creating Windows app experiences. Windows 11 incorporates Fluent's design language and principles for a cohesive look and feel that's uniquely Microsoft.
 
-Design guidelines and UI code examples for creating Windows app experiences.
+To get the building blocks for crafting Windows experiences, use WinUI. These components incorporate Fluent's design language, so you can be confident you're building great experiences within the Fluent ecosystem.
+
+## Windows 11 design principles
+
+![Various Windows 11 design elements](./signature-experiences/images/principles_hero_1880.png)
+
+Windows 11 marks a visual evolution of the operating system. We have evolved our design language alongside of Fluent to create a design that is human, universal, and truly feels like Windows.
+
+The design principles below have guided us throughout the journey of making Windows the best-in-class implementation of Fluent.
+
+### Effortless
+
+Windows 11 is faster and more intuitive. It's easy to do what I want, with focus and precision.
+
+### Calm
+
+Windows 11 is softer and decluttered; it fades into the background to help me stay calm and focused. The experience feels warm, ethereal, and approachable.
+
+### Personal
+
+Windows 11 adapts seamlessly to the way I use my device. It bends and flexes to my individual needs and preferences so that I can truly express myself.
+
+### Familiar
+
+Windows 11 balances a new, refreshed look and feel with the familiarity of the Windows I already know. There is no learning curve; I can pick it up and go.
+
+### Complete + Coherent
+
+Windows 11 offers a visually seamless experience across platforms. I can work in many platforms and still have a consistent Windows experience.
+
+## Windows 11 signature experiences
+
+Signature experiences are the design elements Windows 11 uses to express its visual language, while maintaining a coherent look and feel across all Fluent experiences.
 
 :::row:::
     :::column:::
-        ### [Design downloads](downloads/index.md)
-        :::image type="content" source="images/downloads-1x.png" alt-text="Design downloads" link="/windows/apps/design/downloads/":::
-        Get design toolkits and samples.
+        ![A window and modal dialog in light mode on the left and dark mode on the right](./signature-experiences/images/color_hero_626.png)
     :::column-end:::
-    :::column:::
-        ### [Design basics](basics/index.md)
-        :::image type="content" source="images/basics-1x.png" alt-text="Design basics" link="/windows/apps/design/basics/":::
-        An introduction to app design and the Fluent Design System.
+    :::column span="2":::
+        **Color**<br><br>
+        [Color](./signature-experiences/color.md) helps users focus on their tasks by indicating a visual hierarchy and structure between user interface elements. Windows 11 uses color to provide a calming foundation, subtly enhancing user interactions and emphasizing significant items only when necessary.
     :::column-end:::
 :::row-end:::
 
 :::row:::
     :::column:::
-        ### [Layout](layout/index.md)
-        :::image type="content" source="images/layout-1x.png" alt-text="Layout" link="/windows/apps/design/layout/":::
-        Responsive tips and APIs for a UI that looks great on every screen size.
+        ![An application window with a single content area](./signature-experiences/images/layering_elevation_hero_626.png)
     :::column-end:::
-    :::column:::
-        ### [Controls and patterns](controls/index.md)
-        :::image type="content" source="images/controls-1x.png" alt-text="Controls and patterns" link="/windows/apps/design/controls/":::
-        All the UI building blocks you need, from radio buttons to navigation controls.
+    :::column span="2":::
+        **Elevation and layering**<br><br>
+        [Elevation and layering](./signature-experiences/layering.md) is the concept of overlapping one surface with another, creating two or more visually distinguished areas within the same surface. Windows 11 uses elevation and layering as its foundation for app hierarchy.
     :::column-end:::
 :::row-end:::
 
 :::row:::
     :::column:::
-        ### [Style](style/index.md)
-        :::image type="content" source="images/style-1x.png" alt-text="Style" link="/windows/apps/design/style/":::
-        Make your app stand out with color, typography, and acrylic.
+        ![A shopping cart icon](./signature-experiences/images/iconography_SystemIcons.svg)
     :::column-end:::
-    :::column:::
-        ### [Motion](motion/index.md)
-        :::image type="content" source="images/motion-1x.png" alt-text="Motion" link="/windows/apps/design/motion/":::
-        Bring your app to life with animations and transitions.
+    :::column span="2":::
+        **Iconography**<br><br>
+        [Iconography](./signature-experiences/iconography.md) is a set of visual images and symbols that help users understand and navigate your app. Windows 11 iconography has evolved in concert with our design language. Every glyph in our system icon font has been redesigned to embrace a softer geometry and more modern metaphors.  
     :::column-end:::
 :::row-end:::
 
 :::row:::
     :::column:::
-        ### [Shell](shell/index.md)
-        :::image type="content" source="images/shell-1x.png" alt-text="Shell" link="/windows/apps/design/shell/":::
-        Use Windows shell features to launch your app and display notifications.
+        ![A UI surface made of acrylic](./signature-experiences/images/materials_acrylic_hero_626.png)
     :::column-end:::
+    :::column span="2":::
+        **Materials**<br><br>
+        [Materials](./signature-experiences/materials.md) are visual effects that make UI surfaces resemble real life artifacts. Windows 11 uses materials to keep the UI connected to its environment. Materials bring surfaces to life and help us distinguish between focused and unfocused applications.
+    :::column-end:::
+:::row-end:::
+
+:::row:::
     :::column:::
-        ### [Input and interactions](input/index.md)
-        :::image type="content" source="images/inputs-1x.png" alt-text="Input and interactions" link="/windows/apps/design/input/":::
-        Optimize your app for touch, pen, Surface dial, and other input types.
+        ![Several UI elements highlighting new geometry in Windows 11](./signature-experiences/images/geometry_hero_626.png)
+    :::column-end:::
+    :::column span="2":::
+        **Shapes and geometry**<br><br>
+        [Geometry](./signature-experiences/geometry.md) describes the shape, size, and position of UI elements on screen. These fundamental design elements help experiences feel coherent across the entire design system. Windows 11 features updated geometry that creates a more approachable, engaging, and modern experience.
     :::column-end:::
 :::row-end:::
 
 :::row:::
     :::column:::
-        ### [Devices](devices/index.md)
-        :::image type="content" source="images/devices-1x.png" alt-text="Devices" link="/windows/apps/design/devices/":::
-        Learn about the spectrum of Windows 10 and Windows 11 devices and how to optimize for them.
+        ![Several words rendered in Segoe UI Variable](./signature-experiences/images/typography_QuickBrownFox.svg)
     :::column-end:::
+    :::column span="2":::
+        **Typography**<br><br>
+        As the visual representation of language, the main task of [typography](./signature-experiences/typography.md) is to communicate information. The Windows 11 type system helps you create structure and hierarchy in your content in order to maximize legibility and readability in your UI.
+    :::column-end:::
+:::row-end:::
+
+:::row:::
     :::column:::
-        ### [Usability](usability/index.md)
-        :::image type="content" source="images/usability-1x.png" alt-text="Usability" link="/windows/apps/design/usability/":::
-        Make your app inclusive and accessible to people around the world.
+        :::image type="content" source="./signature-experiences/images/motion-resourceful.gif" alt-text="An animated image that shows several examples of motion in the Windows UI.":::
+    :::column-end:::
+    :::column span="2":::
+        **Motion**<br><br>
+        [Motion](./signature-experiences/motion.md) describes the way the interface animates and responds to user interaction. Motion in Windows is reactive, direct, and context appropriate. It provides feedback to user input and reinforces spatial paradigms that support way-finding.  
     :::column-end:::
 :::row-end:::