10.2.4.1. Design review

Mockups are high-fidelity visual representations that closely resemble the final UI, including colors, typography, branding, and spacing.

Mockups serve as a detailed representation of how the final user interface (UI) will look. Unlike wireframes, which are more simplistic and focus on layout, mockups incorporate elements such as colors, fonts, and overall design theme. They are created after wireframes have been approved, ensuring the content is more aligned with the final product’s visual style.

Think of mockups like a full-scale model of a house. Just as a model allows you to see how everything will look together, mockups help you visualize the finished app or website, giving a clear picture of what users will experience.

Purpose:

• Communicate look and feel
• Collect feedback on design and user experience
• Align stakeholders on final visual design

The purpose of mockups is threefold: first, they help communicate the intended look and feel of the UI to stakeholders, ensuring that everyone has a clear understanding of the design direction. Second, mockups are used to gather feedback on design elements, allowing stakeholders to express their opinions before finalizing the design. Lastly, they help align all involved parties—designers, developers, and stakeholders—on the visual aspects of the project, ensuring everyone is on the same page regarding the final product’s appearance.

Imagine hosting a taste test for a new burger recipe. You present a full version of the burger instead of just the ingredients. This full presentation allows your testers to provide feedback on the overall experience, just like how mockups showcase the complete design for user feedback.

Characteristics:

• Full-color designs
• UI elements like buttons, menus, icons
• Often interactive when converted into prototypes

Mockups have several key characteristics. They are designed in full color, which helps convey the intended branding and aesthetic values of the product. They visually depict all the user interface elements such as buttons, menus, and icons, providing a realistic impression of the final product. Many mockups can also be interactive; when turned into prototypes, they allow users to click through and experience the interface flow, which gives a better feel for how users will interact with the finished design.

Think of mockups as a movie trailer. Just as a trailer shows colors, sound, and scenes from the movie, giving you an immersive preview, mockups showcase the elements and style of the final UI for testing and feedback.

Used In:

• Design review
• Developer hand-off
• Marketing or presentation demos

Mockups are crucial in various stages of the design and development process. They are primarily used during design reviews, where feedback is gathered from stakeholders on the UI’s look and feel. They also serve as a vital tool during the developer hand-off, where designers provide developers with the visual elements and specifications needed to accurately build the UI. Additionally, mockups are often used in marketing and presentation demos to showcase the product’s design and functionality to stakeholders, clients, or potential customers.

Imagine a chef presenting a dish to food critics before the restaurant opens. The dish is beautifully plated, just like a mockup is a polished version of the design. The feedback from the critics can influence the final presentation, similarly to how feedback on mockups shapes the product before it's built.

--