# Mockups

> A mockup is a static, high-fidelity representation of a product's interface. Unlike wireframes, mockups focus on the visual and aesthetic aspects, including colors, typography, images, and other graphic elements to simulate the final product's appearance.

*Tags: ux, artifact, ui-design, junior*

---


> [!info] Quick Definition
> A mockup is a static, high-fidelity representation of a product's interface. Unlike wireframes, mockups focus on the visual and aesthetic aspects, including colors, typography, images, and other graphic elements to simulate the final product's appearance.


## What are Mockups?

If a wireframe is the blueprint of a house, a mockup is the color model or 3D render that shows how the finished house will look. It's a static (non-interactive) design that communicates the art direction and visual design of the product.

Mockups answer questions like:
- What is the color palette and how is it applied?
- What typefaces will be used for headings and body text?
- What will the icons and images look like?
- What is the spacing and visual composition of the screen?

They are the natural evolution of wireframes, adding the visual design layer on top of the already defined structure.

## Why are they important?

- **They visualize the final product:** They allow stakeholders and the team to see a realistic representation of how the product will feel and look.
- **They drive visual design decisions:** They are the playground for defining and refining the visual identity of the interface.
- **They serve as a guide for developers:** They provide exact visual specifications (colors, sizes, spacing) that developers will use to build the interface.
- **They detect visual inconsistencies:** They help ensure the visual language is coherent across all screens.

## How are they made?

1.  **Start from a solid Wireframe:** Never start a mockup from scratch. Take the approved wireframe as the structural base.
2.  **Apply the Design System or Style Guide:** Use the color palette, typography, icons, and components defined in the project's design system. If one doesn't exist, this is the time to start creating it.
3.  **Replace the placeholders:** Swap the gray rectangles for real or high-quality images. Replace "Lorem Ipsum" with the final text content or a very close approximation.
4.  **Refine the details:** Adjust spacing (margins, paddings), font weights, shadows, and other visual details to achieve a balanced and aesthetically pleasing composition.
5.  **Create variations:** Mockups are often created for different interface states (e.g., empty state, error state, success state).

## Mentor Tips

- **Consistency is key:** A successful mockup is visually coherent. Make sure recurring elements look and behave the same way everywhere.
- **Design for the worst case:** Don't just use short names like "John." Test with long names like "Maximiliano de la Torre" to see if your design breaks. The same applies to text.
- **Don't forget accessibility:** Check that color contrasts are sufficient for people with visual impairments. Make sure font sizes are readable.
- **Prepare for handoff:** Organize your layers in Figma (or whatever tool you use) logically. This will greatly facilitate the developers' work.

## Resources and Tools

- **Main Tools:**
    - **[Figma](https://www.figma.com/):** The leading tool for UI design and mockups.
    - **[Sketch](https://www.sketch.com/):** A popular alternative for macOS.
    - **[Adobe XD](https://www.adobe.com/products/xd.html):** Adobe's entry in the interface design space.
- **Inspiration and Visual Resources:**
    - **[Dribbble](https://dribbble.com/):** Ideal for visual trend inspiration (be careful, not everything is usable!).
    - **[Behance](https://www.behance.net/):** For more complete design case studies.
    - **[Unsplash](https://unsplash.com/):** For high-quality images.
    - **[Google Fonts](https://fonts.google.com/):** For a huge selection of free typefaces.
- **Guides:**
    - **[The Role of Mockups in Design](https://www.nngroup.com/articles/mockups/)** - Nielsen Norman Group


---

Source: https://www.fernandoux.com/en/wiki/artifacts/mockups/