# Wireframes

> Un wireframe es un esquema visual de baja fidelidad de una interfaz, similar al plano de un arquitecto. Se enfoca en la estructura, la jerarquía del contenido y la funcionalidad, ignorando deliberadamente los elementos visuales como colores, tipografías o imágenes.

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

---


> [!info] Definición Rápida
> Un wireframe es un esquema visual de baja fidelidad de una interfaz, similar al plano de un arquitecto. Se enfoca en la estructura, la jerarquía del contenido y la funcionalidad, ignorando deliberadamente los elementos visuales como colores, tipografías o imágenes.


## ¿Qué son los Wireframes?

Imagina que quieres construir una casa. Antes de decidir el color de las paredes o el tipo de muebles, necesitas un plano que defina dónde estarán las habitaciones, las puertas y las ventanas. Eso es exactamente un wireframe para un producto digital.

Es una guía visual que representa el esqueleto de una pantalla. Su propósito principal es:
- **Definir la estructura:** ¿Dónde va la navegación? ¿Y el contenido principal? ¿Y los botones?
- **Establecer la jerarquía:** ¿Qué es lo más importante en la pantalla? ¿Qué debe ver el usuario primero?
- **Planificar la funcionalidad:** ¿Qué hace cada elemento interactivo?

Se caracterizan por su simplicidad: se usan cajas, líneas y texto simple (a menudo "Lorem Ipsum" o texto de marcador de posición) para representar los elementos.

## ¿Por qué son importantes?

- **Ahorran tiempo y dinero:** Es mucho más rápido y barato hacer cambios en un esquema simple que en un diseño visualmente detallado.
- **Fomentan la colaboración:** Permiten que el equipo (diseñadores, desarrolladores, product managers) se alinee en la estructura antes de invertir en el diseño visual.
- **Centran la discusión en la usabilidad:** Al eliminar el debate sobre colores o imágenes, la conversación se centra en si la disposición de los elementos tiene sentido para el usuario.

## ¿Cómo se hacen?

1.  **Boceto a mano (Low-Fidelity):** El primer paso casi siempre debería ser en papel y lápiz. Dibuja cajas y líneas para representar los elementos de la pantalla. No te preocupes por los detalles. El objetivo es explorar ideas rápidamente.
2.  **Wireframe Digital (Mid-Fidelity):** Una vez que tienes una idea clara, pásala a una herramienta digital como Figma o Balsamiq.
    - Usa rectángulos grises para imágenes.
    - Usa líneas para texto.
    - Usa elementos de UI estándar (botones, menús desplegables) sin estilo.
3.  **Añade anotaciones:** Describe brevemente la funcionalidad de los elementos interactivos. Por ejemplo, al lado de un botón, una nota podría decir: "Lleva al perfil del usuario".
4.  **Itera y obtén feedback:** Muestra los wireframes al equipo y a los usuarios. Recoge sus comentarios y haz los ajustes necesarios.

## Consejos de Mentor

- **No te enamores de tus wireframes:** Son una herramienta para pensar, no una obra de arte. Deben ser rápidos y desechables.
- **Usa texto real cuando sea posible:** Aunque "Lorem Ipsum" es útil, usar texto real (o al menos realista) ayuda a validar si el espacio asignado es suficiente.
- **Mantén la consistencia:** Si usas un tipo de caja para un botón en una pantalla, úsalo en todas.
- **Enfócate en el flujo, no solo en la pantalla:** Piensa en cómo el usuario llega a esta pantalla y a dónde irá después.

## Recursos y Herramientas

- **Herramientas Populares:**
    - **[Balsamiq](https://balsamiq.com/):** Especializada en wireframing de baja fidelidad con una estética de "boceto a mano".
    - **[Figma](https://www.figma.com/):** El estándar de la industria. Perfecto para wireframes de media a alta fidelidad.
    - **[Miro](https://miro.com/):** Ideal para wireframing colaborativo en las primeras etapas.
- **Artículos y Guías:**
    - **[Wireframing for Beginners](https://www.uxbooth.com/articles/wireframing-for-beginners/)** - UX Booth
    - **[The Ultimate Guide to Wireframes](https://www.smashingmagazine.com/2021/05/ultimate-guide-wireframes/)** - Smashing Magazine

---

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