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
- Office Add-in Templates for 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.