From db4593f46a836a1483c3cfcf81708b3549753180 Mon Sep 17 00:00:00 2001 From: Sam Ramon <15154970+samantharamon@users.noreply.github.com> Date: Wed, 29 Oct 2025 16:50:35 -0700 Subject: [PATCH] Update low engagement articles --- docs/design/add-in-color.md | 13 ++++++++++-- docs/design/branding-patterns.md | 22 +++++++++++++++----- docs/design/data-visualization-guidelines.md | 2 +- docs/design/using-motion-office-addins.md | 4 ++-- docs/design/ux-design-pattern-templates.md | 4 ++-- docs/develop/dialog-video.md | 16 +++++++++----- 6 files changed, 44 insertions(+), 17 deletions(-) diff --git a/docs/design/add-in-color.md b/docs/design/add-in-color.md index 496308b49c..82e26532dd 100644 --- a/docs/design/add-in-color.md +++ b/docs/design/add-in-color.md @@ -1,7 +1,7 @@ --- title: Color guidelines for Office Add-ins description: Learn how to use colors in the UI of an Office Add-in. -ms.date: 06/18/2024 +ms.date: 10/28/2025 ms.topic: best-practice ms.localizationpriority: medium --- @@ -12,8 +12,10 @@ Color is often used to emphasize brand and reinforce visual hierarchy. It helps ![The color scheme for Office, Excel, Word, and PowerPoint. Major colors for Office are black and white, and minor colors are light gray, dark gray, and orange. The dominant color for Excel is green, Word is blue, and PowerPoint is orange.](../images/office-addins-color-schemes.png) +## Use UI component libraries [Fluent UI React](../quickstarts/fluent-react-quickstart.md) and [Fabric Core](fabric-core.md) include a set of default theme colors. When these libraries are applied to the components or layouts of an Office Add-in, the same goals apply. Color should communicate hierarchy, purposefully guiding customers to action without interfering with content. Theme colors from Fluent UI React or Fabric Core can introduce a new accent color to the overall interface. These accent colors can conflict with Office app branding and the hierarchy. Consider ways to avoid conflicts and interference. Use neutral accents or overwrite theme colors to match Office app branding or your own brand colors. +## Develop with theming APIs In Office applications, customers personalize their interfaces by applying an [Office UI theme](https://support.microsoft.com/office/365-63e65e1c-08d4-4dea-820e-335f54672310). Customers choose between four UI themes to vary styling of backgrounds and buttons in Excel, Outlook, PowerPoint, Word, and other apps in the Office suite. To make your add-ins feel like a natural part of Office and respond to personalization, use our [Theming APIs](/javascript/api/office/office.officetheme). For example, task pane background colors switch to a dark gray in some themes. With the Theming APIs, follow suit and adjust foreground text to ensure [accessibility](../design/accessibility-guidelines.md). > [!TIP] @@ -21,7 +23,7 @@ In Office applications, customers personalize their interfaces by applying an [O > - To ensure that your add-in applies the correct color combinations in its UI, test it with all four Office themes, including the **Use system setting** option. > - For guidance on how to dynamically match the design of your PowerPoint add-in with the current document or Office theme, see [Use document themes in your PowerPoint add-ins](../powerpoint/use-document-themes-in-your-powerpoint-add-ins.md). -Apply the following general guidelines for color. +## Apply best practices - Use color sparingly to communicate hierarchy and reinforce brand. - Overuse of a single accent color applied to both interactive and non-interactive elements can lead to confusion. For example, avoid using the same color for selected and unselected items in a navigation menu. @@ -30,3 +32,10 @@ Apply the following general guidelines for color. - Ensure that all text is [accessible](accessibility-guidelines.md). Be sure that there is a 4.5:1 contrast ratio between foreground text and background. - Be aware of color blindness. Use more than just color to indicate interactivity and hierarchy. - To learn more about designing add-in command icons with the Office icon color palette, see [icon guidelines](../design/add-in-icons.md). + +## See also + +- [Office Add-in design language](add-in-design-language.md) +- [Accessibility guidelines](accessibility-guidelines.md) +- [Branding patterns](branding-patterns.md) +- [Fluent UI React in Office Add-ins](../quickstarts/fluent-react-quickstart.md) diff --git a/docs/design/branding-patterns.md b/docs/design/branding-patterns.md index 08036409e4..6a3e86b489 100755 --- a/docs/design/branding-patterns.md +++ b/docs/design/branding-patterns.md @@ -1,17 +1,19 @@ --- title: Branding patterns design guidelines for Office Add-ins description: Learn how to brand your Office Add-in while staying compatible with the visual design of Office. -ms.date: 05/18/2023 +ms.date: 10/29/2025 ms.topic: best-practice ms.localizationpriority: medium --- # Branding patterns -These patterns provide brand visibility and context to your add-in users. +Implement recommended design patterns in your add-in to promote brand visibility while maintaining seamless integration with Office applications. ## Best practices +The following table outlines design best practices to enhance your add-in's brand recognition. + |Do |Don't| |:---- |:----| | Use familiar UI components with applied branding accents like typography and color. | Don't invent new UI components that contradict established Office UI. | @@ -20,16 +22,26 @@ These patterns provide brand visibility and context to your add-in users. | Make your solution recognizable and connect your screens together with consistent visual elements. | Don't hide your solution with unrecognizable and inconsistently applied visual elements. | | Build connection with a parent service or business to ensure that customers know and trust your solution. | Don't make customers learn a new brand concept if there's a useful and understandable relationship that can be leveraged to build trust and value. | -Apply the following patterns and components as applicable to allow users to embrace the full utility of your add-in. +## Design patterns and components + +Apply the following patterns and components to allow users to embrace the full utility of your add-in. -## Brand Bar +### Brand Bar The brand bar is a space in the footer to include your brand name and logo. It also serves as a link to your brand's website and an optional access location. ![Brand bar displayed in an add-in task pane of an Office desktop application.](../images/add-in-brand-bar.png) -## Splash Screen +### Splash Screen Use this screen to display your branding while the add-in is loading or transitioning between UI states. ![Brand splash screen displayed in an add-in task pane of an Office desktop application.](../images/add-in-splash-screen.png) + +## See also + +- [Office Add-in design language](add-in-design-language.md) +- [Color guidelines for Office Add-ins](add-in-color.md) +- [First-run experience patterns](first-run-experience-patterns.md) +- [Accessibility guidelines](accessibility-guidelines.md) +- [Best practices for developing Office Add-ins](../concepts/add-in-development-best-practices.md) \ No newline at end of file diff --git a/docs/design/data-visualization-guidelines.md b/docs/design/data-visualization-guidelines.md index a79ed3de77..857ecd656b 100644 --- a/docs/design/data-visualization-guidelines.md +++ b/docs/design/data-visualization-guidelines.md @@ -1,7 +1,7 @@ --- title: Data visualization style guidelines for Office Add-ins description: Get some good practices for how to visualize data in an Office Add-in. -ms.date: 06/27/2023 +ms.date: 10/29/2025 ms.topic: best-practice ms.localizationpriority: medium --- diff --git a/docs/design/using-motion-office-addins.md b/docs/design/using-motion-office-addins.md index 8ea02e6595..09c85be98b 100644 --- a/docs/design/using-motion-office-addins.md +++ b/docs/design/using-motion-office-addins.md @@ -1,7 +1,7 @@ --- title: Using motion in Office Add-ins description: Get best practices for using transitions, motion, or animation in Office Add-ins. -ms.date: 06/27/2023 +ms.date: 10/29/2025 ms.topic: best-practice ms.localizationpriority: medium --- @@ -34,7 +34,7 @@ We recommend using [Fluent UI](../design/add-in-design.md) to create a visual co - [Fluent UI React motion patterns](https://react.fluentui.dev/?path=/docs/theme-motion--page) - [Fabric Core motion and animation patterns](https://developer.microsoft.com/fluentui#/styles/web/motion) -Use it to fit seamlessly in your add-in. It will help you create experiences that are more felt than observed. The animation CSS classes provide directionality, enter/exit, and duration specifics that reinforce Office mental models and provide opportunities for customers to learn how to interact with your add-in. +Use it to fit seamlessly in your add-in. It will help you create experiences that are more felt than observed. The animation CSS classes provide directionality, enter, exit, and duration specifics that reinforce Office mental models and provide opportunities for customers to learn how to interact with your add-in. ### Best practices diff --git a/docs/design/ux-design-pattern-templates.md b/docs/design/ux-design-pattern-templates.md index dfaac7111e..16659a272d 100755 --- a/docs/design/ux-design-pattern-templates.md +++ b/docs/design/ux-design-pattern-templates.md @@ -1,7 +1,7 @@ --- title: UX design patterns for Office Add-ins description: Get an overview of the UI design patterns for Office Add-ins, including patterns for navigation, authentication, first-run, and branding. -ms.date: 06/27/2023 +ms.date: 10/29/2025 ms.topic: overview ms.localizationpriority: medium --- @@ -36,7 +36,7 @@ The patterns are organized by key actions or experiences that are common in an a Browse each grouping to get an idea of how you can design your add-in using best practices. > [!NOTE] -> The example screens shown throughout this documentation are designed and displayed at a resolution of **1366x768**. +> The example screens shown throughout the design pattern documentation are designed and displayed at a resolution of **1366x768**. ## See also diff --git a/docs/develop/dialog-video.md b/docs/develop/dialog-video.md index 2bb498bbea..19f2bbdfb4 100644 --- a/docs/develop/dialog-video.md +++ b/docs/develop/dialog-video.md @@ -1,14 +1,14 @@ --- title: Use the Office dialog box to play a video description: Learn how to open and play a video in the Office dialog box to create engaging user experiences. -ms.date: 09/25/2025 +ms.date: 10/29/2025 ms.topic: how-to ms.localizationpriority: medium --- # Use the Office dialog box to show a video -This article shows you how to play a video in an Office Add-in dialog box to create more engaging user experiences. +Play a video in an Office Add-in dialog box to create more engaging user experiences. Videos in dialog boxes are perfect for: @@ -23,7 +23,7 @@ To play a video in a dialog box with the Office dialog API, follow these steps. 1. Create a dedicated video page that contains an iframe and no other content. The page must be in the same domain as the host page. For a reminder of what a host page is, see [Open a dialog box from a host page](dialog-api-in-office-add-ins.md#open-a-dialog-box-from-a-host-page). - In the `src` attribute of the iframe, point to the URL of an online video. The protocol of the video's URL must be HTTPS. In this example, we'll call this page "video.dialogbox.html". + In the `src` attribute of the iframe, point to the URL of an online video. The protocol of the video's URL must be HTTPS. In this example, we'll call this page **video.dialogbox.html**. Here's the markup: @@ -34,12 +34,18 @@ To play a video in a dialog box with the Office dialog API, follow these steps. ``` -1. Call `displayDialogAsync` in the host page to open "video.dialogbox.html". +1. Call `displayDialogAsync` in the host page to open **video.dialogbox.html**. -1. Handle dialog close events (optional). If your add-in needs to know when the user closes the dialog box, register a handler for the `DialogEventReceived` event and handle the 12006 event. For details, see [Errors and events in the Office dialog box](dialog-handle-errors-events.md). +1. (Optional) If your add-in needs to know when the user closes the dialog, handle dialog close events. Register a handler for the `DialogEventReceived` event and handle the 12006 event. For details, see [Errors and events in the Office dialog box](dialog-handle-errors-events.md). ## See it in action For a sample of a video playing in a dialog box, see the [video placemat design pattern](../design/first-run-experience-patterns.md#video-placemat). ![A video playing in an add-in dialog box in front of Excel.](../images/video-placemats-dialog-open.png) + +## See also + +- [Use the Office dialog API in your Office Add-ins](dialog-api-in-office-add-ins.md) +- [Best practices and rules for the Office Dialog API](dialog-best-practices.md) +- [Handle errors and events in the Office dialog box](dialog-handle-errors-events.md)