Mock-up

A mock-up is a simple prototype used to visualize and test a product or service during the design process, helping gather cheap and quick feedback from users.

About

A Mockup is a visual representation or prototype of a product, interface, or design, often used to demonstrate appearance, functionality, or layout. Unlike wireframes, Mockups are more detailed and provide a closer approximation of the final product. They are valuable in user testing, stakeholder communication, and design validation, where seeing a realistic representation helps in evaluating aesthetics, usability, and overall user experience. Mockups bridge the gap between concept and reality, guiding development and refinement.

Suitable for

  • Presenting the main purpose and format of the product
  • Cheap and quick feedback
  • Interaction and transformation with the user

Deliverables

Sketches

Rough, hand-drawn representations of the user interface layout that help visualize initial concepts and ideas.


Paper Prototypes

Physical representations of the user interface, typically crafted from paper or cardboard, that are used to simulate the interactions with the digital product.


Digital Wireframes

Low-fidelity digital representations of the user interface layout, focused on organizing user interface elements and outlining the structure of the product.


Interactive Prototypes

Digital representations of the user interface that allow users to interact with and navigate through the UI, simulating real-world product usage.


High-Fidelity Mockups

Visually accurate representations of the final product design, including the precise user interface elements, typography, and colors.


Style Guides

Documentation that outlines the visual design system, such as color palette, typography, user interface elements, and design patterns.


User Flows

Visual diagrams that represent the step-by-step journey a user takes within the product, highlighting each interaction and decision.


Usability Testing Reports

Detailed summaries of usability testing sessions, providing insight into user interaction with the mockups, and identifying usability issues and design opportunities.

Procedure

1

Identify project goals and target audience

Begin by outlining the primary objectives of the project and identifying the target audience. This information will guide the overall design process and ensure that the mock-up meets the needs of the users.

2

Conduct UX research

Conduct user research to collect insights and data about your target audience's needs, preferences, pain points, and experiences. Use a variety of research methods such as interviews, surveys, focus groups, and observation to gather valuable input that will inform your design decisions.

3

Create wireframes

Design low-fidelity wireframes as a skeleton of the user interface structure, outlining the arrangement of different elements within the layout. Wireframes provide a visual representation of the overall structure and organization of the design while focusing primarily on usability.

4

Develop visual design

Apply visual design principles to the wireframes to develop a style guide, select color palettes, fonts, and other design elements that reflect the project's goals and target audience. This step transforms the wireframes into a visually appealing and cohesive design.

5

Create mock-up

Use design tools like Sketch, Figma, or Adobe XD to create a high-fidelity mock-up based on the wireframes and visual design components. Mock-ups are static representations of the final user interface design that provide an accurate visual preview of how the product will look and function.

6

Gather feedback and iterate

Share the mock-up with stakeholders, team members, and potential users to collect feedback on the design. Analyze the input received and implement necessary changes in the design. Repeating this feedback loop helps in refining the mock-up and aligning it with user needs and expectations.

7

Test usability

Perform usability testing by asking target users to complete specific tasks with the mock-up. Observe their interactions and identify any usability issues or roadblocks they encounter. Revise the design to address these concerns and enhance the overall user experience.

8

Finalize mock-up and handoff

Once the mock-up has undergone multiple iterations and has been validated through testing, finalize the design. Prepare the mock-up for handoff to developers, including any necessary annotations, specifications, and assets to ensure a smooth transition from design to development.

Support the project

Donate to UX Methods today. As the largest UX method database on the web, your contributions will help maintain our platform and drive exciting new features. Keep the resource free, up-to-date, and comprehensive for everyone. Make a difference in the UX community!