What is a mockup?

Mockups are mid to high-fidelity static visual designs that represent the look and feel of user interface (UI) design. They demonstrate the basic content layout, color schemes, typography, white spacing, and user navigation. Mockups can be created using online visual design apps or software.

Benefits of mockups
Mockups provide you with a snapshot of your final product

Mockups are produced before development is started, and enable final iterations before coding the design.

Mockups stimulate collaboration and communication

When designers and developers gather to review mockups, they can discuss what is and isn’t working in the design, and propose final changes to the design before progressing the project into development.

Mockup revisions can be done quickly and easily

Before web development begins, it’s important to ensure all visual elements are properly placed and nothing is missed. Mockups are an easy way to illustrate this. Since mockups are typically from mid to high-fidelity designs, revisions can often be done relatively quickly without significant time and budget.

Anatomy of a mockup

Colour palettes should be demonstrated within a mockup and reviewed to ensure they are aligned with the client’s project goals and brand guidelines.


Typography refers to the font type, size, style, alignment, spacing, and indentions. Typography should be clean, clear, and easy to read within your mockup.


The content layout refers to how content is displayed on a screen – text, images, illustrations, and more. The layout should follow a strategic content hierarchy, where the most important information is presented first.

Contrasting elements

Contrasting colours are key to effective design. They can increase visibility and draw the user’s eye down the page or to key content such as a call-to-action.

White space

White space (or negative space) is an empty space not taken up with content (text, images, etc). White space is powerful, as it gives room for the eye to focus on content. A lack of sufficient white space can cause users to become overwhelmed and miss important aspects of the page.

Visual navigation tools

Visual navigational tools include toggles, sliders, headers, footers, arrows, and dropdown menus. They are critical to design and should always be included within a mockup to demonstrate the final user experience.


Relevant Terms

Low-Fidelity Prototypes

Low-fidelity prototyping is a fundamental phase in the web design process. Ideas and concepts are presented using simple lines and shapes without concern for aesthetics or detailed content.


Prototyping is a crucial phase of any design project that uses an interactive, navigable version of wireframes to simulate how the final product will work.

Mobile App Mockups

A mobile app mockup is an in-between stage between a wireframe and a developed prototype. Mockups present finished design - including colour palette, typography, imagery, layout, button styles, etc.

Let’s start writing your success story.

Book a Call