Office UI Fabric is a responsive, mobile-first, front-end framework, designed to make it simple to quickly create web experiences that align with the Microsoft Office Design Language.

With a forthcoming public launch of Office UI Fabric, I was asked to produce a site design that would serve as a useable tool and a clean example of the framework in use.

One of the key design decisions here was to present the framework as a set of tools for both designers and developers. An easy to use yet powerful way to get up and running with Office UI elements–whether they are creating a new app from scratch or adding new features to an existing one.

Previous versions were centered around features and lacked UI design tools, snippets and code implementation tutorials.

The site allows design teams to use Fabric to ensure that their unique designs feel at home in the Office 365 family.

The design provides engaging content and official, approved tools such as Illustrator swatches to help designers build an experience that fits harmoniously within the Office 365 family.

Developers are encouraged to build with Fabric, with dive-in points for novice and experienced developers. The result is an easy and customizable experience that plays well with the other tools they’re using.

Fabric styles helped shape the type ramp and interactions in my design for the OneDrive developer site. View a more in-depth case-study Microsoft work here.