This repository is a library of common UX design patterns for Office Add-ins. It represents a set of best practices for add-in interfaces. The patterns are built using Office UI Fabric components and styling. They complement Office experiences and follow add-in UX design principles. As you design your own Office Add-in, refer to the patterns, download the templates to quickly create your own mock-ups using Adobe Illustrator, or download the code.
Current Fabric Version Used: 2.6.1
- Browse PDF files of the Office Add-in UX design patterns.
- Download the ZIP of the repo to access all the Adobe Illustrator templates
- Download the code to start building add-ins.
-
Brand
- Brand Bar (code) - The brand bar is a space in the footer to include your brand name and logo.
- Splash Screen - This is a screen for displaying your branding while the add-in is loading.
-
First-Run
- Paging Panel (code) - Takes users through a series of features or information before they start using the add-in.
- Steps to Start (code) - Provides users with an ordered list of steps to perform to get started using your add-in.
- Trial Feature (code) - Allows unlocking a feature in an add-in, and signing-up for a trial version of the add-in.
- Trial Version (code) - Shows users how to get started with a trial version of your add-in.
- Value Placemat (code) - Communicates your add-in's value proposition.
- Video Placemat (code) - Shows users a video before they start using your add-in.
-
General
- Authentication Dialog Single Identity - Present authentication screens to your end users.
- Authentication Dialog Multiple Identity - Present authentication screens to your end users.
- Base Styles and Typography Ramp - Basic guidelines for typography and padding.
- Commands - Shows how to present the command bar in your add-in.
- Multi-Section (code) - Displays a common layout and set of tools that may be used within an add-in.
- Settings (code) - Displays common components that may be used within an add-in's settings menu.
-
Navigation
- Back Button (code) - Shows a task pane with Back and Next Page buttons.
- Navigation (code) - Shows a hamburger menu in a task pane.
- Navigation & Commands (code) - Displays navigation and command options together.
- Pivot (code) - Displays navigational links in a bar at the top of the add-in space.
- Tab Bar (code) - Shows navigation links at the top of the add-in space using icons and labels.
-
Notifications
- Client Dialog (code: Alert, Navigation, Typeramp) - Displays a dialog in the main space of the Office application.
- Embedded Dialog (code) - Displays a dialog inside of the add-in space.
- Feedback (code) - Allows an add-in to ask for customer feedback.
- Inline Message (code) - Indicates error, success, or information.
- Message Banner (code) - Provides information in a collapsible, dismissable banner.
- Progress (code: progress bar, spinner) - Shows how to indicate the progress of a long-running process.
- Toast (code) - Provides a brief message that fades away after a few seconds.
- Icon Production Template, Open the pdf as reference, use the AI file for production
- Office UI Fabric Icon Master Sheet, Open the pdf as reference, use the AI file for production
- Office Add-in Templates for Desktop
- Office Add-in Templates for iPad
- Outlook Mobile
- Store Experience Toolkit (In Progress)
- These templates are vector files produced with Adobe Illustrator or .ai files.
- The files are produced at 200% size to accommodate high resolution screens.
- All pattern files contain simplified versions of the Office applications in the background. Refer to the helpful add-in templates for more accurate backgrounds.
- When designing with these assets please keep the following in mind:
- Copy the add-in UI from a pattern file and place into the Office Add-in template of your choice.
- Icon assets have been converted to outlines and reproduced at 200% to match
- Font sizes similarly produced at 200%: 11pt = 22pt
- To open, edit and design with these templates, we assume you have a Segoe UI font.
- Some files contain linked files from the folder called "Embedded Backgrounds".
- Some common elements used across files have been created as symbols. These can be found in the "Embedded Symbols" folder.
- Best practices for developing Office Add-ins.
- Office UI Fabric, The UI toolkit for building experiences for Office and Office 365.
- We love your feedback - bugs, feature request and general questions are all posted on the issue tracker.
- This repository is a work in progress. We're actively improving existing design patterns and adding new ones.
- 10/3/2016 - Added rudimentary in app store template.
- 9/22/2016 - Updates to authtentication patterns, adding new files for single and multiple identity provider patterns.
- 8/9/2016 - Updates to cross-link markdowns with code samples
- 7/29/2016 - New pattern added, multisection.
- 5/19/2016 - Added Brand Bar code link.
- 5/16/2016 - Added markdown files for each pattern.
- 5/6/2016 - Added links to code repo.
- 4/7/16 - Updates to the auth flows and dialog patterns
- 3/31/16 - Updates to dialog patterns files and other minor fixes
- 3/30/16 - Added 4 new first run patterns, updated brand_bar and notifications_inline_messages pattern
- 3/25/16 - Additional templates and patterns added
- 3/24/16 - Initial read-me and patterns release
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.