The Big Idea

Breadboard UI empowers teams to visually diagram flows and interactions without getting bogged down in visual styling.

Breadboarding is “pre-wireframing” – a lightweight method developed by Ryan Singer for diagramming user flows and interactions quickly and accurately.

The core of an interface design is made up of the affordances and the connections between them. What will the person see and do, in what order, to get from A to B. Once you work that out, there are thousands of ways to change the visual styling. - Ryan Singer


By separating an interface's function from its visual styling, teams can:

  • Diagram flows and interactions quickly
  • Collaborate more effectively using a "just right" level of abstraction
  • Save hundreds of hours in lost productivity and late stage surprises

What You Get

Breadboard UI Kit: svg library & source files
Video Tutorials: Breadboard UI Kit + your favorite design tool
Quickstart Guide - Quickly master the Breadboarding Method

Breadboard UI Kit

Get the complete set of components from Ryan Singer's seminal blog post.

Video Tutorials

2-min videos for using Breadboard UI into your favorite design tool!

Quickstart Guide

Quickly develop a mastery of the what, why, and how of Breadboarding