Part Three: The details · Screens
Placeholder text and tidy examples make a design look finished. Real names, real lengths and real mess are what it will have to hold.
In the mockup, every customer is called Jane Cooper. Every project title is three words. Every card has a photo, and every list has exactly five items. The design looks calm and balanced, and everyone approves it.
Then it meets the world. A customer is called "Dr. Oluwaseun Adebayo-Williamson (Accounts Payable)". A project is titled "Q3 migration, DO NOT TOUCH until Raj is back". One account has no items and another has four thousand. Half the people never uploaded a photo. The name wraps onto three lines and pushes the button off the card. The balanced grid now has ragged holes in it.
All of this was predictable. The mockup was a drawing of content the designer wished for. Placeholder text is worse still, because it hides the question of what the words are. A block of lorem ipsum is always the right length.
The developer usually finds the gap first, in the middle of building, with no designer nearby. So the decisions about truncation, wrapping and missing data get made in a hurry by whoever hits them.
Content is also the cheapest test of the idea itself. Writing the actual label and the actual sentence often shows that the screen has nothing to say, or too much.
A dependable habit: for every piece of content, design for the longest it can be, the shortest, and none at all.
Jane Cooper
Designer
Sam Lee
Engineer
Ana Ruiz
Manager
Therefore:
Design with the real words, names and numbers the product will hold, taken from actual customers where you can. Try the longest case, the shortest, the empty one and the very many before calling a design done.
In practice. Ask for an export of real records from a few accounts with the personal details changed. Pour them into your current design. The first screen that breaks is the next thing to fix.
Goes with. Even a sketch that is ROUGH ENOUGH TO CHANGE (22) should carry real words. The empty case is its own pattern, THE EMPTY SCREEN TEACHES (71), and the very-many case leads to LISTS THAT ANSWER THE QUESTION (69).