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

Patterns

• Brand
• Brand Bar (code)
• Splash Screen
• First-Run
• Paging Panel (code)
• Steps to Start (code)
• Trial Feature(code)
• Trial Version (code)
• Value Placemat (code)
• Video Placemat (code)
• General
• Base Styles and Typography Ramp
• Commands
• Multi-Section (code)
• Settings (code)
• Navigation
• Back Button (code)
• Navigation (code)
• Navigation & Commands (code)
• Pivot (code)
• Tab Bar (code)
• Notifications
• Client Dialog (code:Alert, Navigation, Typeramp)
• Embedded Dialog (code)
• Feedback (code)
• Inline Message (code)
• Message Banner (code)
• Progress (code:progress bar, spinner)
• Toast (code)

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

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