List of modular UI technologies

Social Experience Design 🎭
#1

This list topic is for collecting resources and projects that focus on modular and composable UI technologies.

#2

Block protocol by Hash.ai

The open standard for block-based apps. The Þ Block Protocol enables applications to make their interfaces infinitely extensible with interoperable components known as blocks.

This technology was once evaluated by Github Next, but deprioritised. Wordpress has a plugin that supports integration of blocks in the UI. Blocks can be developed as React, Vue and WebComponents in addition to a Blocks specification, and using SDK’s.

The parent company Hash.ai uses the technology to support rich knowledge graphs, focusing on particular domains:

#3

Micro front-ends and composable front-end architectures

Micro-frontends are the result of breaking down large user interfaces into smaller, more manageable and independently deployable pieces, with benefits at an organizational level.

This website is a collection of patterns & practices by Natalia Venditto. Though it is a rather random collection, it provides some good ideas on various approaches to modularization.

#4

Atomic Design by Brad Frost

Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and showcases techniques to transform your team’s design and development workflow.

Design System framework goes from Atoms, to Molecules, to Organisms, to Templates, to Pages
Design System framework goes from Atoms, to Molecules, to Organisms, to Templates, to Pages1024×768 542 KB

Table of Contents

  1. Designing Systems: Create design systems, not pages

  2. Atomic Design Methodology: Atoms, molecules, organisms, templates, and pages

  3. Tools of the Trade: Pattern Lab and the qualities of effective style guides

  4. The Atomic Workflow: People, process, and making design systems happen

  5. Maintaining Design Systems: Making design systems stand the test of time