Pigment Board Assembly Handbook · Version 2.0
The TwinSix field guide for assembling Pigment boards. No design background needed: just the order to work in, a few decisions, and a checklist before you ship.
Four principles that explain every rule that follows. Absorb them and most decisions make themselves.
Meet the eight people we build for. Decide who a board serves before you place a single widget; their goals settle what belongs and what doesn't.
Rough the board out in FigJam with the TwinSix Pigment UI libraries before touching Pigment. The components carry the grid and spacing, so layout is all you decide.
A board is not a place to display data. It's a place to help someone decide something. Everything else follows from that.
Build for how your users actually work, not for what's easy to build, and not for what looks impressive in a demo.
If a number doesn't change what someone does next, it doesn't belong on the board. Lead the eye to the few that do.
Negative space is doing a job; it makes the numbers that matter easy to find. When in doubt, take something out.
Every board should look like it came from the same place. Match the layout, spacing, and labels across all of them.
Your boards should look professional and read as clear and engaging — that's what drives intuitiveness and adoption.
The techniques below help eliminate the friction between the user and your content.
Every board is for a person with a job to do. These are the eight we build for most. Before you place a single widget, pick the one you're serving; their goals decide what belongs on the board, and what doesn't. Open a card for the detail.
"Know the person, and the board almost builds itself."
A few real boards with the secret sauce applied. Flip between Before and After to see the difference. Use the arrows to browse the examples.
Once you know who you're designing for, you can start sketching. Rough out the layout in FigJam with the TwinSix Pigment UI libraries (blocks are cheap to move here), then rebuild the approved version in Pigment.
Open a FigJam file. Click the "+" at the right of the bottom toolbar, choose "Stickers", then "Add your own" under the Libraries section. From there, you can add the four libraries below.
| Library | What you'll grab |
|---|---|
| Pigment Layout Library | Filters, masthead, headers and KPI widgets |
| Pigment Chart Library | Bars, lines, donuts — pre-styled |
| Pigment Table Library | From basic to more complex tables |
| Pigment Template Library | Whole board layouts to start from, by theme |
Draft, review, then build. Most of the thinking happens before Pigment.
"Moving a block in FigJam costs seconds,
not a rebuild."
When to bring the UX team in, and what to expect at each step. The earlier UX sees a board, the cheaper it is to get right.
Six things that cover almost everything you'll build. Follow the default; the exceptions are rare and always called out.
We call buttons Call to Actions for a reason: they show users their options, set expectations, and point to what's expected next.
Use headers to group widgets and break long boards into chapters.
The Spacer widget is your best friend.
None of this needs design taste: it's all yes or no. Run it on every board.
0 of 25 checked
Plain words from the UX world.
