One product, from wireframe to working prototype

A prototype should test how a product works. Keeping the same product through every design stage makes that possible.

Start with the job

Before drawing a screen, write down what someone needs to accomplish. A dashboard is a container; reviewing a task, finding a document, or approving a request is a job. Choose one clear journey and make its starting point, decisions, and outcome explicit.

Keep the structure consistent

The wireframe, visual design, and prototype should describe the same interface. Keep navigation, content order, and component positions consistent as you add detail. If the wireframe shows a desktop application and the prototype suddenly becomes a mobile experience, you are testing a different journey. Explore mobile layouts deliberately, as their own related flow.

Make interactions answer a question

A clickable button is useful when it helps test a decision. Can someone find the next step? Do they understand whether an action succeeded? What happens when there is no content, a request fails, or an operation takes time? Include these states in the prototype instead of polishing only the ideal screen.

Turn feedback into a smaller next step

Watch someone use the prototype without explaining each screen. Record where they hesitate and what they expect to happen. Then revise the specific interaction that caused confusion. This keeps iteration grounded in the experience rather than turning every review into a debate about visual preferences.

← All articlesLet’s talk ↗

Have a product in mind?
Let’s shape it together.