Prototyping
Beginner
25 minutes
Build Prototypes That Look Real by Designing the Data Before the UI
Make prototypes more credible by designing realistic data, states, and edge cases before generating UI.
Outcome
A prototype that supports better feedback because it represents realistic product states.
Workflow steps
1
Define realistic records
Create sample users, accounts, statuses, permissions, and edge cases.
2
Map product states
Include empty, loading, error, success, and partially complete states.
3
Generate UI from data
Use the data model and sample records as the foundation for the prototype.
Why this workflow matters
A prototype with fake-looking data produces shallow feedback. Realistic data makes product questions visible.
How to run it
Before generating screens, define the data model, representative records, edge cases, and states the UI must handle.
What good looks like
Stakeholders should react to product behavior and tradeoffs, not placeholder content.