Office UI Fabric: designers vs developers
Design Development Microsoft 365Making apps and intranets look nice is often a battle between designers and developers. Working in design-driven projects has taught me a lot as a developer and I can definitely see the importance of having the final product not only be functional, but also look pixel perfect. However, I also understand the difficulty in implementing some design elements in code.
Cut from the same cloth
Fortunately this creative tension can be minimised in design and development for Office 365. Office UI Fabric is a front-end framework that fits in Office 365. It also provides a range of tools that can help designers and developers build solutions that are user-friendly and consistent with the wider Microsoft product experience.
For developers, there are libraries for React, AngularJS and iOS that can be installed as dependencies into projects. If you’re familiar with SharePoint framework, chances are you would have already used UI Fabric in React.
- https://developer.microsoft.com/en-us/fabric#/components
- https://developer.microsoft.com/en-us/fabric#/angular-js
- https://developer.microsoft.com/en-us/fabric#/fabric-ios
For designers, an extensive set of toolkits are available for Office and SharePoint projects:
https://developer.microsoft.com/en-us/fabric#/resources.
But this isn’t very creative 🙁
While this may seem to limit creativity in a sense (where there is less of a need for custom-designed components), however its power comes into play when a solution needs to work within a Microsoft product such as SharePoint.
Seamless-ness and consistency is key when building a solution and this common design language translates ideas into production more efficiently.
Creativity is not completely lost; it can be used to combine and collectively design the many UI Fabric components as a set, rather than focusing on the more granular elements like buttons and form fields. Thus, designers can focus on creating wholesome solutions that work to fulfill the demanding requirements of modern apps and intranets.
In practice
At Breadcrumb Digital, we design in Adobe XD using the UI Fabric toolkit supplemented by some more design magic done in Adobe Illustrator.
XD provides the tools to create high fidelity, interactive mock-ups that demonstrate how things work internally and to project stakeholders. A very helpful feature in XD is the ability to publish design specifications that include the values for colours, fonts and spacing in an easily digestible way. This allows designs to be validated and implemented in code more accurately and efficiently.
Doing it good
In closing, we can think of Office UI Fabric as not only a front-end framework but also a shared design language and style guide for your design and development teams that helps put more focus on problem solving and less on creative differences – though a little is always a good thing. 🙂
