Wireframes

Los wireframes son representaciones de baja fidelidad de una interfaz. Muestran estructura y funcionalidad, no diseno visual.

Niveles de fidelidad

• Baja: Sketches rapidos, cajas y lineas
• Media: Mas detalle, texto real, proporciones
• Alta: Cercano al diseno final (ya es mockup)

Elementos de wireframe

Simbolos comunes:

[========]  Header/Navigation
[   X    ]  Imagen placeholder
[--------]  Linea de texto
[========]  Boton
[   □    ]  Checkbox
[   ○    ]  Radio button
[_______ ]  Campo de texto
[▼]         Dropdown

Ejemplo: Pagina de producto

+----------------------------------------+
|  Logo        Nav  Nav  Nav    [Login]  |
+----------------------------------------+
|                                        |
|   +----------+  Nombre Producto        |
|   |          |  $$$.00                 |
|   |    X     |  ★★★★☆ (123 reviews)    |
|   |  imagen  |                         |
|   |          |  [--------]             |
|   +----------+  [--------]             |
|   [o][o][o]     [--------]             |
|                                        |
|                 Cantidad: [-][1][+]    |
|                                        |
|                 [==Agregar Carrito==]  |
|                                        |
+----------------------------------------+
|  Tab1 | Tab2 | Tab3                    |
|  [---------------------------]         |
|  [---------------------------]         |
|  [---------------------------]         |
+----------------------------------------+

Herramientas populares

• Figma: Gratis, colaborativo, estandar de la industria
• Sketch: Mac only, muy popular
• Adobe XD: Integrado con Creative Cloud
• Balsamiq: Especializado en wireframes
• Papel y lapiz: Rapido para ideas iniciales

Tips para wireframing

• Empieza en papel, pasa a digital despues
• No te preocupes por el diseno visual
• Usa texto real cuando sea posible
• Mantén consistencia entre pantallas
• Piensa en estados: vacio, cargando, error