Mockup

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.

What is a mockup?

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:

• Wireframe: structure and functional requirements (static)
• Mockup: a wireframe, but with visual design (static)
• Prototype: a mockup, but with interactions (dynamic)

Anatomy of a mockup

Since mockups evolve from wireframes in a typical UX workflow, the qualities of a mockup can also be attributed to a wireframe.

Structure

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.

Content

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.

• In a wireframe, content can include images boxes, unstyled text layers, and the like. It’s typically recommended to use realistic copy even at this stage.
• In a mockup, these image boxes are replaced with real images, and the text layers are redesigned to include font family, font weight, font style, and more.

UI

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.

• In a wireframe, these elements are included, but unstyled.
• In a mockup, these elements are styled as you begin to think more about form rather than function.

Surface

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.

Different types of mockups

Mockups come in many forms: logo mockups, app mockups, website mockups, even watch mockups. But the way we design them is fundamentally different.

App mockups

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

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.

Getting feedback from stakeholders

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:

1. The design’s accessibility and usability.
2. The emotional impact of any visual elements and/or marketing campaigns.

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:

• InVision Studio
• Sketch
• Figma
• Adobe XD
• Justinmind

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 for mockups

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:

• Copy styles as code to save developers from having to manually write them.
• Download image assets in a variety of resolutions (@1x, @2x, @3x, etc.).
• Facilitate communication between designers and developers if anything seems unclear.

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:

• InVision Studio
• Figma
• Adobe XD
• Justinmind
• Sketch (when combined with Marvel, Zeplin, Sympli, or Avocode)

Mockup in the middle

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.