mateuszruszkowski/Office-Add-in-UX-Design-Patterns

A library of common Office Add-in design patterns

Office Add-in UX Design Patterns

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

##Get Started

• 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.

##Office Add-in Design Patterns

• 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.

##Helpful Templates

• 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
  • Word Desktop
  • Excel Desktop
  • PowerPoint Desktop
• Office Add-in Templates for iPad
  • Word iPad
  • Excel iPad
  • PowerPoint iPad
• Outlook Mobile
  • [iOS](https://github.com/OfficeDev/Office-Add-in-Design-Patterns/blob/master/Helpful%20Templates/Outlook%20Mobile/iOS-Addins-Components Final.sketch)
• Store Experience Toolkit (In Progress)

##Tips & Tricks

• 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.

##Learn more

• Best practices for developing Office Add-ins.
• Office UI Fabric, The UI toolkit for building experiences for Office and Office 365.

##Comments, Questions & Contributions

• 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.

##Change Log

• 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 opencode@microsoft.com with any additional questions or comments.