Mockup

A mockup is a static, non-interactive representation of the user interface that simulates the look and feel of the final product. Mockups demonstrate the overall design, layout, and navigation of a product, as well as the placement of elements such as buttons, text, images, and forms.

Designers usually use design software such as Adobe XD, Sketch, or Figma to create mockups. You can implement them at various stages of the design process. At an early stage, mockups can be used to explore different design ideas and gather feedback. Later on, they are used to test usability and gather feedback from users.

Explore other types of UI deliverables that improve collaboration and ensure the whole team is on board within the UI Design Deliverables lesson.

Mockups are particularly useful for UI/UX designers. They help teams to visualize the final product and make decisions regarding the design before the development process starts.

As a key element of the design handoff, mockups can help developers assess the functionality of the design, as well as its visual appeal. Mockups are also used for showing other stakeholders the design before it’s handed off to developers. They can be shared with clients and other stakeholders, and are often used for user testing. Bonus use for mockups is in your portfolio, where they can make your designs look more professional and illustrative.

While mockups and prototypes are both parts of the design process, they serve different purposes and have different levels of detail and interactivity.

A mockup is a static representation of a design, typically created in a graphic design tool such as Figma or Adobe XD. It gives a visual representation of the design, including layout, typography, color, and imagery, but does not include interactivity or animation. Mockups are used to give stakeholders an understanding of what the final product will look like and to make design decisions.

A prototype, on the other hand, is a more interactive functional representation of a design. It can range from a low-fidelity, paper-based prototype to a high-fidelity, digital prototype built using software like Figma or InVision. Designers use prototypes to test the functionality and user experience of a design. This allows designers and stakeholders to get a better understanding of how the design will work and feel in real life.

Creating mockups typically involves the following steps:

1. Define the goals and objectives: Determine what you want to communicate with mockups and what design decisions you expect to be made.
2. Define user flows to illustrate: break a user flow into steps and assign each step to a screen. At this point, you can create sketches using pen and paper.
3. Choose the right tool: Select a graphic design tool that suits your needs and skill level. It could be Sketch, Figma, or Adobe XD.
4. Gather assets: Collect all the necessary assets, such as images, typography, and colors, to include in the mockups.
5. Set up the basic layout: Establish the overall layout of the mockups, including the size, grid, and margins.
6. Add design elements: Start adding design elements to the mockups, such as typography, color, imagery, and buttons.
7. Review and refine: Review the mockups and make any necessary changes or refinements.
8. Share and present: Share the mockup with stakeholders, either by exporting them as static images or by using a presentation tool like InVision.

Remember that mockups are meant to be simple, static representations of the design. Therefore, the focus should be on clearly communicating the design decisions rather than worrying about visual appeal.