Branding & Design

Amazing designs and usability with UI Fabric

How Microsofts entry into the world of style frameworks can propel your websites usability and digital customer experience.

UI Fabric by Microsoft

CSS (Cascading Style Sheets) is a powerful language that is used to style every element users can see on websites. But with the ever increasing abundance of style options and elements modern websites use it has become extensive work for developers to code and test all these style information.

Another stage where web development workflows are intense and prone to mistakes is the process of 'translating' web graphic design from the design team into actual code, that can be displayed by a browser like Google Chrome. This requires significant effort and communication between design and development team.

To mitigate the workload of creating websites and shortening the time of graphic design to web code CSS frameworks stepped in to provide a collection of often used components (think buttons, sliders, boxes) that enable production ready use with quick customisations, often eliminating the need for dedicated designers completely.

Popular style frameworks

CSS frameworks are not a new development and many are around for years. One of the oldest and still most popular examples is Bootstrap, originally developed at Twitter and today used by millions of websites.

Following the rapid development of modern frontend technologies, driven by advances in JavaScript standards and CSS3 features, many more frameworks followed and gained traction in community and business use. Such frameworks partially grew around open source development like Bulma and the fast growing component library Tailwind CSS and others are maintained by big corporate sponsors like Googles material design.

Microsofts UI Fabric

Microsoft, being a very active player in the open source community in the recent past, likewise released a styling framework that follows the design language of big business applications like the office 365 suite and outlook.

The 'UI Fabric' named framework is currently available in its 7th version and comprises ready to production styles for all often used components and UI elements of websites. Hence enabling developers to build a stylish website with modern grid layout, forms, buttons and other parts by leveraging UI Fabric.

Microsofts uses Fabric for their internal products and business suite like outlook, teams and office online making the design language extremely familiar to billions of users.

The fabric library also comes with excellent tooling support for modern frontend development with TypeScript and is available as a NodeJS package on the NPM registry, which allows easy integration into popular JavaScript frameworks like React and the static site builder Gatsby.

Style frameworks bottomline

Frameworks enable development teams to craft beautiful websites with good usability in a fast and efficient manner, potentially even without a dedicated designer.

Choosing the Fabric library provides a familiar look to users that already work with other Microsoft products and can help your customers navigate your website comfortably. However customising the colours and experience to your individual brand is advisable, to maintain product uniqueness.

If you are interested to know more about CSS frameworks like UI Fabric and how they can be used in existing or new websites and apps don't hesitate to get in touch with our design experts via the form below or email to hello@esugo.my

UI fabric UI style design CSS frameworks
Share this article

Contact us