Glosario

Qué es un wireframe

Un esquema para acordar contenido y jerarquía. Si dura semanas, está haciendo el trabajo de otra cosa.

Grupo 01 · Producto y proceso

Un wireframe es el esquema de una pantalla, dibujado sin color ni tipografía definitiva. Su único objetivo es acordar qué elementos hay, en qué orden y con qué importancia.

Aquí no se aprueba una pantalla hasta que funciona, así que el wireframe dura días y es un paso de conversación, no un entregable que se firma. Las mismas personas que dibujan el esquema trabajan sobre lo que se construye después, así que nadie tiene que explicárselo a un equipo posterior.

La consecuencia es que discutimos posiciones de botones sobre algo que ya responde al ratón. Un menú que parece razonable en un esquema deja de serlo cuando entran dentro todos sus elementos reales.

Cuándo importa

Importa al principio, para una cosa concreta: fijar qué información entra en la pantalla y cuál se va a otro sitio. Esa decisión es barata en un esquema y cara cuando ya hay código, porque arrastra consultas de datos y permisos.

También importa cuando hay varias personas del lado del cliente con opiniones distintas. Un wireframe permite descubrir pronto que dos áreas del cliente esperan cosas incompatibles de la misma pantalla. Descubrirlo en la demostración final cuesta una fase entera.

Donde no ayuda es en decidir si algo se entiende. Para eso hace falta que se pueda pulsar, y por eso pasamos pronto a una versión navegable aunque esté fea.

Lo que viene después no es «maquetar»

Cuando el diseño se piensa por pantallas sueltas, cada una acaba con su propio botón y su propia forma de mostrar un error. Con el tiempo hay muchas maneras de decir lo mismo y ningún sitio donde cambiarlas a la vez. Lo que sostiene la coherencia son las decisiones compartidas: va de eso la nota un design system es una lista de decisiones. Donde antes se nota es en un panel de datos, así que conviene leer también dashboard.

Cómo lo usamos

En un proyecto de software a medida los esquemas viven en la primera semana de cada fase y después no se tocan. A partir de ahí, lo que se revisa es la pantalla real, con datos reales, en el navegador.

En el diagnóstico aparecen menos todavía: tres semanas dan para mirar el sistema que ya existe y decidir por dónde se entra.

  1. Software a medidaServicio
  2. Un design system es una lista de decisionesNota
  3. Qué es un prototipoGlosario
  4. Qué es un dashboardGlosario

¿La duda es sobre tu propio sistema?

El diagnóstico la responde con el código delante: qué falla, cuánto cuesta arreglarlo y por dónde entrar.

Pedir un diagnóstico