Representación visual básica de una página web o aplicación.
Usada en la fase inicial del diseño para mostrar la disposición de elementos clave sin detalles visuales.
// Wireframe de página de inicio /* ┌─────────────────────────────────────────────┐ │ [Logo] [Nav] [Nav] [Nav] [CTA] │ <- Header ├─────────────────────────────────────────────┤ │ │ │ Título Principal Grande │ │ Subtítulo descriptivo │ │ │ │ [ Botón CTA ] │ │ │ ├─────────────────────────────────────────────┤ │ │ │ ┌───────┐ ┌───────┐ ┌───────┐ │ │ │ Card │ │ Card │ │ Card │ │ <- Features │ │ 1 │ │ 2 │ │ 3 │ │ │ └───────┘ └───────┘ └───────┘ │ │ │ ├─────────────────────────────────────────────┤ │ Logo │ Links │ Social │ Legal │ <- Footer └─────────────────────────────────────────────┘ */ // Herramientas de wireframing: // - Figma (gratis, colaborativo) // - Balsamiq (estilo sketch) // - Excalidraw (simple, open source) // - draw.io (gratis) // Niveles de fidelidad: // - Low-fi: Cajas y líneas // - Mid-fi: Más detalle, sin colores // - High-fi: Prototipo casi final
