tl;dr: Breadboarding ➤ Sketches ➤ Elements
- Breadboard with words, lines and arrows
- Sketch with visuals using a fat marker
- Define the elements as the output
Searching for a design workflow
I wanted to use a simple, short and practical design workflow to build user interfaces. However, as soon as I scratch the surface of potential options, it became apparent that these established design workflows, while popular, carry bags of their own concerns.
Concerns on existing workflows
These established design workflows don't fit the flow I imagined to practice, because they ...
- have too many phases (i.e. time consuming)
- are too theoretical (i.e. straightforward on paper but uncertain in practice)
- encourage too much details (i.e. from specs, to wireframes, to mocks, to prototypes, et al.)
- depend on too many tools (e.g. Balsamiq? Figma? Framer? ... incl. their own plugins)
- expect more than one individual in order to work (e.g. groups, collaborators, etc.)
... and a lot more of unnecessary things to transform a simple idea into a reality.
Shape Up's workflow
Then while searching, I remembered the simple and practical approach from Basecamp's book, Getting Real. However, while it was a great read, the implementation details were missing, which were what I'm looking for—an identifiable and repeatable design process that's simple enough to be understood, short enough to be possible, and practical enough to be useful.
And then I stumbled on their latest book, Shape Up, written by Ryan Singer, who worked at Basecamp for more than 17 years and is currently the Head of Product Strategy. It was the design workflow I was looking for.
So, in this writing, we'll attempt to explore and demonstrate the design process that they've been effectively using for almost two decades (since 2003).
Breskel design workflow
Let's call this design workflow: Breskel
- Bre (for breadboarding)
- sk (for sketches)
- el (for elements)
We simply combined the first few letters of each phase to make it easier to remember. :)
The aim of breadboarding is to translate ideas into words.
The goal is to reveal the key components and how they connect to each other without too much details; No pictures, just words, lines, and arrows to connect them.
It's composed of three things:
- a place
- an affordance
- the connection line
... is a location (or state) that might change.
It's written with an underline.
- A page (location)
- A field (state)
... is an action that can be taken.
It's written under the place (after underline).
- A click
- A key press
1.3. Connection line
... is the connection between an affordance and a place.
It's written with a line and an arrow from affordance to a place.
- Clicking (affordance) a link goes to another page (place; location)
- Pressing a key (affordance) updates the form field (place; state)
Or fat marker sketches to be exact.
The aim of fat marker sketches is to translate words into visual representations.
These visual representations are drawn as simple and straightforward as possible in order to prevent the temptation of creating wireframes.
2.1. Fat marker
There's one very important thing in this phase to make it effective, and that's to use a fat marker (e.g. a Sharpie) to draw the visuals. The thickness of the marker's tip will limit the level of details that can be drawn as sketches.
Once the idea is translated into words and visualized, we can start defining the elements.
The aim at this phase is to turn visualizations into concrete forms (i.e. elements).
These concrete forms are the output that will be used in the design.
At this point, we can ...
- proceed to build the interface
- iterate over the design workflow
- or stop the whole idea and move to the next