El wireframe
Un wireframe es un esquema de baja fidelidad que fija qué hay en una pantalla y dónde está, sin color, sin la tipografía final y sin la imagen definitiva, y es el primero de los tres documentos con los que se acuerda una pantalla antes de construirla.
Término
El wireframe (esquema de baja fidelidad)
Categoría
Documento intermedio del proceso de diseño
No confundir con
El mockup, que ya muestra el aspecto terminado
Dónde se decide
Antes de elegir color y tipografía, nunca después
Qué es un wireframe
Un wireframe responde una sola pregunta: qué contenido lleva esta pantalla, en qué orden y con qué importancia relativa. Lo que lo separa de sus documentos hermanos es lo que deliberadamente no decide. Son tres los documentos de la escalera de fidelidad, y cada uno tiene prohibido invadir al siguiente: el wireframe fija el contenido y su posición, el mockup fija el aspecto y el prototipo fija el comportamiento. Un wireframe que ya trae la paleta decidida dejó de servir para lo que existía.
Qué produce un wireframe y qué no debe decidir
Lo que produce un wireframe es un juego de esquemas, uno por pantalla o por estado del recorrido, más el inventario de contenido de cada una.
| Documento | Qué fija | Qué no debe decidir |
|---|---|---|
| Wireframe | Qué contenido hay y dónde va | Color, tipografía final, imagen |
| Mockup | El aspecto terminado, todavía estático | Qué pasa al tocar algo |
| Prototipo | El comportamiento: responde a la interacción | Cómo está construido por dentro |
La escalera se recorre en ese orden por una razón de costo: cambiar de sitio un bloque en un wireframe cuesta un minuto, y el mismo cambio en un prototipo cuesta rehacerlo.
Quién hace el wireframe, y contra qué criterio
El wireframe lo hace quien responde por el contenido y su estructura, y el criterio es que sea barato de tirar a la basura. Ese criterio se vuelve verificable si el encargo tiene un brief con una forma acordada de medir el resultado: sin ella no hay brief, hay un deseo, y sin ella cualquier esquema es defendible. Un wireframe se juzga contra lo que el encargo dijo que la pantalla debía lograr, no contra el gusto de quien lo mira.
De qué fundamentos depende: agrupación, jerarquía y proceso
Un wireframe depende sobre todo de dos principios de agrupación formulados por la psicología de la Gestalt, que arranca con Max Wertheimer en 1912 y se ordena como principios en 1923: la proximidad y la semejanza. Sin color y sin imagen, lo único que queda para decir que dos cosas van juntas es que estén cerca o que se parezcan en forma o en tamaño. Por eso un wireframe es una prueba muy limpia de la jerarquía: si la agrupación no se entiende en gris, tampoco se entenderá en color.
Con qué se confunde: el boceto, el mockup y la alta fidelidad
El wireframe se confunde con tres cosas. Con el boceto, que es exploración privada y no compromete a nadie. Con el mockup, que es su paso siguiente. Y con la expresión wireframe de alta fidelidad, que en rigor es una contradicción: si trae color, tipografía definitiva e imágenes reales, es un mockup con otro nombre. La expresión se usa igual, y conviene entonces decir en voz alta qué está cerrado y qué sigue abierto, porque el equipo tratará como decidido todo lo que vea dibujado.
Dónde se ve el resultado: el formulario que sale en el orden esperado
Un wireframe no se publica nunca, así que su resultado se ve en negativo: en un formulario cuyos campos siguen el orden en que la persona tiene los datos a la mano, en una ficha de producto donde el precio no está escondido debajo de la descripción. Muchos se dibujan todavía a mano sobre una hoja A4 de 210 × 297 mm, y esa hoja no es un atraso: obliga a resolver la jerarquía con posición y tamaño antes de que aparezca cualquier otro recurso.
Cómo se estudia y cómo se juzga un esquema
Un esquema se juzga con una prueba de una sola pregunta: alguien que no estuvo en el proyecto lo mira y dice para qué sirve esa pantalla y qué se espera que haga ahí. Si hace falta explicárselo, el problema está en el esquema. Ese mismo criterio se aplica en un portafolio, donde lo que se evalúa no es la cantidad de piezas sino si se puede reconstruir la decisión que hay detrás de cada una, y los wireframes son justamente donde esa decisión queda visible.
Qué cambia cuando el wireframe se dibuja en la computadora
Dibujar el esquema en la computadora cambia una cosa y es la que hay que vigilar: el programa invita a subir la fidelidad sin darse cuenta. La frontera se cruza en un punto concreto y medible. En cuanto se escribe un cuerpo tipográfico en puntos, y el punto PostScript mide 1/72 de pulgada, es decir 0.3528 mm, el documento dejó de ser un wireframe y pasó a ser un mockup temprano. La ventaja real de la computadora es otra: repetir el mismo esquema para veinte pantallas sin volver a dibujarlo.