A listing composition usually shows about six items. The titles are all a similar length, every card has an image, and nothing has gone wrong. On the real site, though, that screen begins life with zero items. Just after launch, after a visitor picks an odd filter, after a search with no matches — empty is not an exception, it is a frequent state.
If the empty state is not in the design, it gets made during the build. Usually it becomes a blank white area, and visitors read blank as broken. A screen the designer never intended now exists on the site.
The states worth drawing every time
You do not need to draw every possible case. These five cover most of the places where a build drifts from the intent.
The empty state earns the most. It needs three things: why it is empty, whether that is normal, and what the visitor can do next. “No items yet” ends the visit. “Nothing matches those filters yet — would you like to see everything?” produces the next click.
Long titles always arrive in real operation. Do card titles clamp at two lines, run to three and push the rest down, or truncate with an ellipsis? Leave that undecided and you get a listing where every card is a different height — and you find out after release.
Edge cases come from the content
If you are unsure which exceptions matter, the fastest route is to ask whoever manages the content. “What is the longest title we have?” “Are there items with no image?” “Does this list ever come back empty?” Three answers give you three exceptions to draw.
On a WordPress site these states are especially visible. An archive can legitimately return zero results at any time, and the more tags and filters exist the likelier that becomes. Designing listings with the empty screen drawn at equal weight is what pays off here.
More on validating state design on real screens is in the development workflow archive, and tidying up the empty and error screens on a live site is part of our optimization program.
Next part
Drawing states requires real content. The next part is about what placeholder text hides — why uniformly sized fake sentences quietly lie to your layout.