Learn about the essentials of mockups: what they are, the anatomy of a mockup, the different types of mockups, how to handoff mockups to stakeholders, and more.
A mockup suggests what the final design will look like, and is usually shared with clients and stakeholders between a wireframe and prototype.
Wireframes are built and shared to communicate the structure and functional requirements of the design. Mockups are essentially wireframes with an added surface layer that communicates the visual design (colors, images, typography).
Unlike a prototype, a mockup is static and doesn’t include any interactions.
In a nutshell:
Since mockups evolve from wireframes in a typical UX workflow, the qualities of a mockup can also be attributed to a wireframe.
A mockup’s overall frame is known as its structure, and shows a clear divide between the core components of the design. Examples might include the navigation, header, footer, main body, and even some components within the main body.
Structure is designed in the wireframing step, but featured in a mockup.
Physically speaking, content occupies most of the skeletal frame. By neglecting to think about content early on, it becomes too easy to design layouts that don’t display the content in a readable, digestible, and comfortable way. With this in mind, content is designed in the wireframing stage.
While the user interface doesn’t account for much of the physical space, it does represent the elements of a mockup that users actually interact with, including navigational components, links, buttons, sliders, form elements, and more.
Without the surface layer (also known as the visual design), a mockup is essentially still a monochromatic wireframe. The addition of images, fonts, colors, and other visual elements make it a mockup.
Mockups come in many forms: logo mockups, app mockups, website mockups, even watch mockups. But the way we design them is fundamentally different.
Mobile apps are usually designed for one platform at a time, so designers only need to cater for a subset of mobile devices and screen sizes. In the majority of cases, this means you can get by with the responsive resizing features offered by most screen design tools like InVision Studio, Sketch, and Figma.
Website mockups are a little trickier, as the design handoff naturally includes more artboards as you try to cater for more devices and screen sizes. This means you’ll need more maintenance on the design file and a screen design tool that supports reusable components like InVision Studio or Sketch.
Like any other design deliverable, mockups are fueled by feedback. At this stage, collaborators typically comment on visual aspects of the design that relate to both:
Luckily, whether we’re designing wireframes or mockups, the collaboration workflow is very much the same and involves sharing mockup previews with stakeholders. Mockup tools with sharing and commenting features include:
Note: Version control is a feature synonymous with mockup tools that allows teams to roll back or preview earlier versions of a mockup if needed.
Design handoff is the process of handing over the final mockup to engineers; this includes all specs and assets so they can develop the design into a real app or website. Design handoff tools give you the ability to:
Design handoff tools improve accuracy, facilitate healthy discussion and feedback, and remove the frustration of writing out design specs manually. Without them, developers are left in the dark. Mockup tools with design handoff features include:
Mockups are the middlemen of design deliverables, existing roughly between wireframes and prototypes as designers begin to explore visual design for the first time. InVision Studio can supercharge your mockup design workflow. The addition of collaboration tools and Inspect smooths everything out, and helps product teams move onto interactive prototyping with confidence.