Mockup

A mockup is a static visual representation of a product's design, showing how screens, pages, or interfaces will look. Unlike wireframes that focus on structure and layout, mockups include visual design elements - colors, typography, imagery, and brand styling. Unlike prototypes that demonstrate interaction, mockups are static images. They sit between low-fidelity sketches and functional prototypes, serving as a visual target for development and a communication tool for stakeholder alignment.

Why it matters

Development without visual reference produces unpredictable results. Verbal descriptions and wireframes leave too much open to interpretation. What color is that button? How large is the heading? What happens when there's no data? Mockups answer these questions before code is written.

Mockups also enable stakeholder feedback at an efficient point in the process. Changes to mockups are cheap; changes to code are expensive. Getting visual agreement before development prevents costly rework.

For product managers, mockups are communication tools that align teams around what's being built. They make abstract requirements concrete and testable.

Mockup characteristics

Mockups have distinct properties that define their role.

Visually complete. Mockups show final visual design - colors, fonts, spacing, images. They look like the finished product.

Static. Mockups don't move or respond to interaction. They're images or designs, not functional interfaces.

Screen-specific. Each mockup typically represents one screen state. Multiple mockups show different states or screens.

Design fidelity. Mockups are high-fidelity in visual design, even though they lack interactive fidelity.

Pixel-specific. Good mockups specify exact dimensions, colors, and spacing that developers can implement precisely.

Mockups in the design process

Mockups fit within a broader design workflow.

Sketches and wireframes come first, exploring concepts and structure without visual design commitment.

Mockups apply visual design to approved wireframes, creating the visual target.

Prototypes add interactivity to mockups, enabling testing of flows and interactions.

Development implements the final designs, using mockups as visual reference.

This progression moves from cheap exploration to precise specification, investing more effort as confidence increases.

Creating mockups

Effective mockups require attention to detail and design principles.

Follow design systems. Use established components, colors, and patterns for consistency and efficiency.

Design for real content. Use realistic text and data, not lorem ipsum. Real content reveals layout problems placeholder text hides.

Consider all states. Empty states, loading states, error states, and edge cases all need mockup treatment.

Specify precisely. Include exact colors, dimensions, and spacing. Ambiguity creates implementation divergence.

Document interaction. While mockups are static, annotate what happens on interaction - hover states, click behaviors, transitions.

Design responsively. If the product works across screen sizes, mockup key breakpoints.

Mockup tools

Various tools support mockup creation.

Figma is the current industry standard, supporting both mockup creation and design system management with strong collaboration features.

Sketch remains popular, especially on Mac, with extensive plugin ecosystem.

Adobe XD integrates with Adobe's broader creative suite.

Photoshop can create mockups but lacks purpose-built UI design features.

InVision Studio offers mockup and prototyping in one tool.

The tool matters less than the output. Choose based on team preferences, collaboration needs, and existing investments.

Using mockups

Mockups serve multiple purposes across the product development process.

Stakeholder alignment. Review mockups with stakeholders before development to ensure shared expectations.

Development reference. Developers use mockups as the visual target. Specs derived from mockups guide implementation.

Quality assurance. QA compares implementation against mockups to verify visual accuracy.

User testing. While prototypes test interaction, mockups can test visual comprehension and initial reactions.

Documentation. Mockups document intended design for future reference and team onboarding.

Mockup vs. related concepts

Distinguishing mockups from related design artifacts clarifies their purpose.

vs. Wireframe: Wireframes show structure and layout; mockups show visual design. Wireframes are low-fidelity; mockups are high-fidelity.

vs. Prototype: Prototypes are interactive; mockups are static. Prototypes test flows; mockups test visuals.

vs. Design spec: Mockups show visual appearance; specs document implementation details. Often used together.

vs. Final design: Mockups represent intended design; final implementation may vary due to technical constraints.

Common mistakes

Several patterns reduce mockup effectiveness.

Designing in isolation. Mockups should connect to design systems and development constraints. Design without these connections creates unbuildable designs.

Ignoring edge cases. Mockups often show ideal states. Real products need error states, empty states, and extreme content.

Inconsistent fidelity. Mixing levels of detail confuses stakeholders. Maintain consistent fidelity within a set of mockups.

Premature detail. Creating pixel-perfect mockups before alignment on structure wastes effort. Progress through fidelity stages appropriately.

No handoff process. Mockups without clear handoff to development create disconnection. Establish how designs become implementations.

Static thinking. Designing screens without considering transitions and motion misses important user experience elements.

Mockups and development

The mockup-to-development handoff is critical.

Inspection tools. Modern design tools let developers inspect mockups directly, extracting measurements, colors, and assets.

Component mapping. Mockups should use components that map to development components for consistent implementation.

Annotation. Add notes explaining behavior, interaction, and edge cases that static mockups can't show.

Feedback loops. When implementation diverges from mockup, designers and developers should discuss whether to adjust design or fix implementation.

Version control. Track mockup versions so everyone references current designs. Old mockups cause old implementations.

Effective mockups bridge design intent and development reality. They provide clear visual direction while remaining achievable within technical constraints. The goal isn't pixel-perfect adherence but faithful implementation of design intent in working software.