UI Design
Interface concepts at a scale where the craft is visible. Components, states and real screens for invented products.
How this is done
Design the states, not the screen
Most interface work is spent on the screen that has perfect data in it. Real products are mostly the other states. Design empty, loading, error and far too much data first, and the good version arrives on its own.
- Draw the empty state before the full one. It is the first thing every new user sees.
- Give loading a shape that matches what is coming, so the layout does not jump when it arrives.
- Write the error text as a sentence a person would say out loud, and say what to do next.
- Paste in the longest real name, the biggest real number, and forty rows. Fix what breaks.
- Only then make it look good. Decoration on top of unsolved states is wasted work.
Try it
The same tool, four temperaments
Identical screen, identical data. What moves is density, contrast and how loudly the interface talks to somebody already having a bad morning.
Reno, Nevada
Know what you owe, today
Invoices, chasers and a running balance that is right at nine in the morning.
Start freeOchre bowl$48
Sage vase$62
Almost no color, generous spacing, one blue for anything clickable. A tool people open when they are already stressed should not add to it.
Tight rows, small type, everything on one screen. Right for somebody who lives in it all day and wrong for anybody visiting once a month.
Dark by default, low glare, numbers in a lighter weight so they do not bloom. Built for people who reconcile books after the kids are down.
Warm ground, ruled lines, serif numerals. Familiar to anyone who kept a ledger on paper, which is a lot of people who run small firms.
It depends
The same rule, four projects
None of the above survives contact with a real brief unchanged. Here is where the decision moves, and what moves it.
A consumer product
Empty states carry the onboarding. Most people meet the product with no data in it.
An internal tool
Density beats comfort. Somebody uses this all day and scrolling is the tax.
One handed mobile
Everything that matters lives in the bottom third, inside the arc of a thumb.
A screen with money on it
Slow the last step down on purpose. Confirmation is worth the extra tap.
The set
The set
Elsewhere
If one of these is close
Working on something and unsure which way to take it? Tell us which of these you keep coming back to and we will work it up against your actual brief. Most projects start as somebody pointing at two directions and saying the truth is somewhere between them. That is a good way to start.
New pieces go up on the UI Design board on Pinterest before they land here. The other sets sit on the design index, and what we build with all of it is what we do.