States before screens

The happy path is the easy screen

Design reviews love the full state. Data in every field, a flattering photo, no errors. That screen is real for a moment and then the product spends its life elsewhere.

People meet the empty list, the failed save, the loading gap, the permission they do not have.

If those screens are invented later by whoever builds them, the product will have a visual system and a second, accidental one.

Layout hides missing states

A polished frame can make a missing state look like a detail. There is no empty message because the grid is already full in the mock. There is no error because the demo never fails.

We do not let a finished-looking screen stand in for the list. The layout is allowed to look rough until the states exist.

Write the list first

Before frames, we write the states in words. Empty. Loading. Partial. Success. Error. No permission. Too long. Offline, if it matters. Each one gets a sentence the interface will actually say.

The sentence is the design. "Nothing here yet" is a different product from "Add your first project". The picture comes after we know which one we mean.

We put the ugly states in the same file as the hero. If they live in an appendix, they will be cut.

Then the screen has somewhere to go

Once the states are named, the screen is a container for them. Spacing, type, and components already know what they have to hold.

States before screens means the happy path is just one frame in a set, not the only frame anyone designed.