mockups

Mockups are static visual representations of a product or interface used to illustrate appearance and layout without interactive functionality. They are employed across disciplines such as software design, graphic design, and industrial design to communicate how a final product will look and feel, and to gather stakeholder feedback before development begins.

A mockup is distinct from other design artifacts. A wireframe emphasizes structure and layout with minimal visual detail, while a prototype demonstrates interactive behavior. A mockup focuses on aesthetics, including color, typography, imagery, and spacing, to convey branding and user experience at a concrete visual level. In practice, high-fidelity mockups can resemble the finished product closely, whereas low-fidelity versions emphasize early concept rather than polish.

Mockups can be digital or physical. Digital mockups are produced with design tools such as Figma, Sketch, Adobe XD, Photoshop, or Illustrator and can be shared for review. Physical or tactile mockups, also called maquettes, are used in industrial design or fashion to study form, scale, and ergonomics.

Creation and use: Mockups usually follow a user flow and wireframes, serving as a visual reference for branding, layout, and content. They support communication with stakeholders and guide visual design during handoff to developers, who may extract specifications for color codes, typography, and assets. They are often iterated based on feedback before moving to interactive prototypes and final production.

Limitations and considerations: Because mockups are non-interactive, they cannot validate usability or interaction models on their own. High-fidelity mockups require time and resources and may become outdated if the product's features change. When used alongside wireframes and prototypes, mockups contribute to a structured, design-led development process.