What's the functional difference between wireframes, mockups, and prototypes? Describe a scenario.

WHAT THIS TESTS: The interviewer wants to know if you understand the product development pipeline beyond visual polish. They are checking whether you can match fidelity and interactivity to the right stage of a project, and whether you can defend a resource decision under time constraints.

A GOOD ANSWER COVERS: First, define wireframes as low-fidelity blueprints that communicate page structure and element hierarchy without color, typography, or interaction. Second, define mockups as high-fidelity static renders that showcase the final visual design including branding, imagery, and precise layouts. Third, define prototypes as interactive models that simulate user flows and functionality, allowing stakeholders to experience the product before engineering begins. Fourth, anchor these definitions to the product lifecycle by naming a specific scenario, such as choosing a wireframe during discovery to validate information architecture with minimal effort, selecting a mockup during the design phase to secure stakeholder buy-in on aesthetics, or building a prototype during usability testing to catch navigation flaws before writing production code.

COMMON WRONG ANSWERS: A red flag is treating the three terms as synonyms or saying the only difference is how good they look. Another mistake is claiming prototypes are just animated mockups without mentioning functional validation or user testing. Saying you always start with a prototype signals poor resource management, since high-fidelity interaction design is expensive to revise. Similarly, insisting on a mockup for every early brainstorm slows down iteration.

LIKELY FOLLOW-UPS: The interviewer may ask how you handle stakeholder feedback at each stage, or when you would skip a mockup and move straight from wireframe to prototype. They might also probe whether you build prototypes in code or design tools, and how you decide when fidelity is high enough for developer handoff.

ONE CONCRETE EXAMPLE: Imagine your team is planning a new checkout flow. In week one, you create a wireframe to decide whether shipping and payment should sit on one page or two. After the team agrees on the structure, you move to a mockup to present the branded layout to marketing. Finally, you build a clickable prototype that lets users test the error states for an invalid credit card, catching friction before the sprint starts.

Source: Sketch Blog