Wireframe
Un esquema de una pantalla o página que muestra qué contiene, en qué orden y cómo se navega, sin el diseño visual final.
Para qué sirve
Ayuda a decidir la estructura y la prioridad de cada pantalla antes de dedicar tiempo a colores, tipografía e imágenes.
Elementos clave
Estructura, no aspecto
Muestra qué hay y dónde, en grises y cajas, para que la conversación no se vaya al color.
Contenido de verdad
Con textos reales o parecidos, se ve antes si algo no cabe o no se entiende.
De menos a más fidelidad
Primero a mano y rápido; con más detalle solo cuando la estructura ya está clara.
Cómo se hace
Se listan los contenidos y las acciones que necesita la pantalla.
Se dibujan en cajas por orden de importancia, con la navegación incluida.
Se revisan con otras personas y se ajustan antes de pasar al diseño visual.
Aplicaciones en diseño
Cuándo usarlo
Cuando hay que acordar qué va en cada pantalla y en qué orden, antes del diseño visual.
Evita
Presentar un wireframe tan pulido que la gente opine del color en lugar de la estructura.
Para no caer
Un wireframe no prueba la interacción; para eso, enlaza las pantallas en un prototipo.
Conexiones
Autores y obras
- 2002
Jesse James Garrett
Lo situó en el plano del esqueleto de la experiencia, donde se juntan el diseño de la interfaz, el de la navegación y el de la información.
Fuentes
Fuentes originales
- Garrett, J. J. (2002). The elements of user experience: User-centered design for the web. New Riders.
Última revisión: