Skip to content

UI Design Philosophies

Fluent

Fluent is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included.

Fluent for Web

Microsoft's Fluent UI Web Components are designed to help you build Fluent web apps using extensible Web Components. he package composes the @microsoft/fast-foundation Web Component package and styles it with the Fluent design language.

With Fluent UI Web Components you can:

  • Build a modern, standards-based, highly performant, highly accessible web front-end
  • Build a web front end using only web platform code, no other frameworks, or
  • Integrate with many popular frameworks like .NET, Blazor, Vue, React, etc.
  • Build a web-standards UX built with W3C Web Component standards
  • Leverage the existing Fluent UI design language as design tokens
  • Customize the design language for your project by modifying and creating new design tokens
  • Use the components out-of-the-box to build your web user experience or
  • Customize, compose and build new Web Components based on the libraries that Fluent UI Web Components is built on, FAST
  • Be part of a dynamic, open-web development community

Fluent for Windows

WinUI 3

WinUI is a user interface layer that contains native controls and styles for building Windows apps. It embodies Fluent Design, giving each Windows app the polished feel that customers expect.

Fluent UI React Native

Fluent UI React Native is an open-source library built with JavaScript and React Native components. Use it to create Fluent experiences that work across Windows and across other platforms. It contains information about colors and typography, as well as custom controls and customizations

Fluent for iOS

Uses Fluent UI Apple which offers customizations and custom controls that deliver unique Fluent experiences to customers using iOS devices.

Controls

Fluent UI iOS includes an expanding library of controls written in Swift and supporting Objective-C. These controls implement the Fluent Design language and provide consistency across Microsoft experiences.

Fluent for Android

Uses Fluent UI Android which offers customizations and custom controls that deliver unique Fluent experiences to customers using Android devices.

Controls for Android

Fluent UI Android includes an expanding library of controls written in Kotlin. These controls implement the Fluent design language and bring consistency across Microsoft app experiences.

Fluent for macOS

Uses Fluent UI Apple which offers customizations and custom controls that deliver unique Fluent experiences to customers using macOS devices.

Controls for macOS

Fluent UI macOS includes an expanding library of controls written in Swift and supporting Objective-C. These controls implement the Fluent Design language and provide consistency across Microsoft experiences.

Fluent for cross-platform

Fluent UI React Native includes an expanding library of controls written in JavaScript. These controls implement the Fluent Design language and provide consistency across Microsoft experiences.

FluentUI React Native is still in the alpha stages of development for both the components and the repo.i.e. | Windows | macOS | iOS | Android | |---------------------|---------------------|---------------------|-------------| | Alpha (in progress) | Alpha (in progress) | Alpha (in progress) | Coming Soon |

BOOTSTRAP

Features

  • Sass variables and mixins
  • responsive grid system
  • extensive prebuilt components
  • powerful JavaScript plugins

Implementation

Bootstrap can be implemented with Angular, flutter

Bootstrap widgets

The angular way

Angular widgets built from the ground up using only Bootstrap 5 CSS with APIs designed for the Angular ecosystem.

The only dependencies are Angular, Bootstrap 5 CSS and Popper

// Installation for Angular CLI
ng add @ng-bootstrap/ng-bootstrap

ANT-DESIGN

Features

  • Enterprise-class UI designed for web applications.
  • A set of high-quality React components out of the box.
  • Written in TypeScript with predictable static types.
  • Whole package of design resources and development tools.
  • Internationalization support for dozens of languages.
  • Powerful theme customization in every detail.

Environment support

  • Modern browsers and Internet Explorer 11 (with polyfills)
  • Server-side Rendering
  • Electron

Implentantions

React is used to encapsulate a library of components which embody our design language. We welcome the community to implement our design system in other front-end frameworks of their choice.

  1. Ant Design of React (official implementation)
  2. NG-ZORRO - Ant Design of Angular
  3. NG-ZORRO-MOBILE - Ant Design Mobile of Angular
  4. Ant Design of Vue
  5. Ant Design Blazor
  6. San UI Toolkit for Ant Design
  7. antizer (ClojureScript)

Frequency of change

  • Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
  • Monthly release: minor version at the end of every month for new features.
  • Major version release is not included in this schedule for breaking change and new features.

MATERIAL DESIGN

Features

  • Adaptable system of components supporting best practices of UI design.
  • Open-source code.
  • Material streamlines collaboration btwn designers & developers.

Implementations

Material is a design system created by Google to help teams build high-quality digital experiences for:

  1. Android
  2. iOS
  3. Flutter
  4. the web

WEB Integration

  • Material Web Components: MDC Web integration for Web Components (using vanilla components)
  • Material Components for React: MDC Web integration for React (using foundations/adapters). Please note that this project is no longer under active development.

Additional third-party integrations

  • Preact Material Components
  • RMWC: React Material Web Components (using foundations/adapters.)
  • Angular MDC
  • Blox Material: Angular Integration Library.
  • Vue MDC Adapter: MDC Web Integration for Vue.js (using foundations/adapters.)
  • Material Components Vue: MDC Web Integration for Vue.js (using vanilla components)
  • BalmUI: Next Generation Material UI for Vue.js
  • Ember Material Components: MDC Web integration for Ember (using vanilla components)
  • MatBlazor: Material Design components for Blazor
  • Svelte Material UI: A library of Svelte 3 - - Material UI components.

The last major update was may 2021

REFERENCES

Comments