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.

Convertí esta lección en un caso visual para portfolio.

Mostrá proceso, criterio y resultado: problema, referencia, decisión de diseño y pieza final. Eso hace que el perfil parezca profesional.

Paso 1

Armá una pieza o pantalla antes/después con el concepto aplicado.

Paso 2

Explicá por qué elegiste layout, jerarquía, color o componente.

Paso 3

Exportá una imagen limpia y sumala a tu portfolio o LinkedIn.

Wireframes: Sketches digitales