Wireframes: Sketches digitales

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

Practica de portfolio

Convierte esta leccion en evidencia real: arma una entrega pequena que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabaja con un caso propio o con una empresa ficticia, pero deja claro el problema, la decision y el resultado.

• Entregable: una captura, documento, repositorio o tablero con el resultado final.


• Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.


• Mini-rubrica: si otra persona lo revisa, debe entender que hiciste, por que y como repetirlo.