Write the empty state before the full one

When I open a design file, the screen with the most attention is nearly always the full one: a table with rows, a dashboard with numbers, a project that already has a name. It looks good in a review. A new user never sees it on their first visit.

What they see is empty, and that screen has three jobs. Say what this place is for, say what will appear here later, and offer the one action that starts filling it. A faint illustration with “Nothing here yet” does none of those.

I try to write that sentence before I design anything else. If I can't say in one line what belongs on the screen, either the screen is doing too much or I haven't settled what the thing on it is. It's a cheap test, and it catches vague ideas early.

Lists go empty again later, for different reasons. A filter that matches nothing, a search with no results, an account where the last item was deleted. Each needs its own message. “You haven't added anything yet” and “Nothing matched that search” shouldn't share a picture.

If I catch myself planning a guided tour for an empty screen, I take it as a sign the main action is in the wrong place. I move the action onto the empty screen and drop the tour.