# Mockups

> Un mockup es una representación estática y de alta fidelidad de la interfaz de un producto. A diferencia de los wireframes, los mockups se centran en el aspecto visual y estético, incluyendo colores, tipografías, imágenes y otros elementos gráficos para simular la apariencia del producto final.

*Tags: ux, artefacto, diseño-ui, junior*

---


> [!info] Definición Rápida
> Un mockup es una representación estática y de alta fidelidad de la interfaz de un producto. A diferencia de los wireframes, los mockups se centran en el aspecto visual y estético, incluyendo colores, tipografías, imágenes y otros elementos gráficos para simular la apariencia del producto final.


## ¿Qué son los Mockups?

Si un wireframe es el plano de una casa, un mockup es la maqueta a color o el render 3D que muestra cómo se verá la casa terminada. Es un diseño estático (no interactivo) que comunica la dirección de arte y el diseño visual del producto.

Los mockups responden a preguntas como:
- ¿Cuál es la paleta de colores y cómo se aplica?
- ¿Qué tipografías se usarán para los títulos y el cuerpo de texto?
- ¿Cómo se verán los iconos y las imágenes?
- ¿Cuál es el espaciado y la composición visual de la pantalla?

Son la evolución natural de los wireframes, añadiendo la capa de diseño visual sobre la estructura ya definida.

## ¿Por qué son importantes?

- **Visualizan el producto final:** Permiten a los stakeholders y al equipo ver una representación realista de cómo se sentirá y se verá el producto.
- **Toman decisiones de diseño visual:** Son el campo de juego para definir y refinar la identidad visual de la interfaz.
- **Sirven como guía para los desarrolladores:** Proporcionan especificaciones visuales exactas (colores, tamaños, espaciados) que los desarrolladores usarán para construir la interfaz.
- **Detectan inconsistencias visuales:** Ayudan a asegurar que el lenguaje visual sea coherente en todas las pantallas.

## ¿Cómo se hacen?

1.  **Parte de un Wireframe sólido:** Nunca empieces un mockup desde cero. Toma el wireframe aprobado como base estructural.
2.  **Aplica el Sistema de Diseño o Guía de Estilo:** Utiliza la paleta de colores, tipografías, iconos y componentes definidos en el sistema de diseño del proyecto. Si no existe, este es el momento de empezar a crearlo.
3.  **Reemplaza los marcadores de posición:** Cambia los rectángulos grises por imágenes reales o de alta calidad. Reemplaza el "Lorem Ipsum" con el contenido de texto final o una versión muy aproximada.
4.  **Refina los detalles:** Ajusta el espaciado (márgenes, paddings), el peso de las fuentes, las sombras y otros detalles visuales para lograr una composición equilibrada y estéticamente agradable.
5.  **Crea variaciones:** A menudo, se crean mockups para diferentes estados de la interfaz (ej. estado vacío, estado de error, estado de éxito).

## Consejos de Mentor

- **La consistencia es la clave:** Un mockup exitoso es visualmente coherente. Asegúrate de que los elementos recurrentes se vean y se comporten de la misma manera en todas partes.
- **Diseña para el peor de los casos:** No uses solo nombres cortos como "Juan". Prueba con nombres largos como "Maximiliano de la Torre" para ver si tu diseño se rompe. Lo mismo aplica para el texto.
- **No olvides la accesibilidad:** Comprueba que los contrastes de color sean suficientes para personas con discapacidad visual. Asegúrate de que los tamaños de fuente sean legibles.
- **Prepara para el "handoff":** Organiza tus capas en Figma (o la herramienta que uses) de manera lógica. Esto facilitará enormemente el trabajo de los desarrolladores.

## Recursos y Herramientas

- **Herramientas Principales:**
    - **[Figma](https://www.figma.com/):** La herramienta líder para diseño de UI y mockups.
    - **[Sketch](https://www.sketch.com/):** Una alternativa popular para macOS.
    - **[Adobe XD](https://www.adobe.com/products/xd.html):** La propuesta de Adobe en el espacio del diseño de interfaces.
- **Inspiración y Recursos Visuales:**
    - **[Dribbble](https://dribbble.com/):** Ideal para inspiración de tendencias visuales (¡cuidado, no todo es usable!).
    - **[Behance](https://www.behance.net/):** Para ver estudios de caso de diseño más completos.
    - **[Unsplash](https://unsplash.com/):** Para imágenes de alta calidad.
    - **[Google Fonts](https://fonts.google.com/):** Para una selección enorme de tipografías gratuitas.
- **Guías:**
    - **[The Role of Mockups in Design](https://www.nngroup.com/articles/mockups/)** - Nielsen Norman Group

---

Source: https://www.fernandoux.com/es/wiki/artefactos/mockups/