Mockups

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

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

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

Layout

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.