¿Que es un Wireframe?

Conocido también como: Draft, Sketch, Layout, Blueprint, Croquis

Frecuentemente confundido con: Maqueta, Mockup, Prototype

Propósito: Ayudar a los involucrados (Stakeholders) de un proyecto a conocer, visualizar y discutir sobre funcionalidades, estructura o requerimientos a través de una representación de interfaz de software. Este entregable tiene por objeto principal levantar información para modelar la interfaz de usuario.

Definición: Un wireframe es una representación visual en Blanco y Negro de una interfaz de usuario. Aunque generalmente es ejecutada por un diseñador de experiencia de usuario (UX Designer) cualquier integrante del equipo puede hacerlo como ayuda visual, de forma tan sencilla como un boceto en una servilleta.

Descripción: Un wireframe describe los componentes y contenido de una interfaz. Usualmente se hace en las fases iniciales del proyecto con fines de planeación. Debe ser una representación monocromática para alejarse de detalles y enfocarse en cuestiones iniciales del proyecto. Es conveniente que se desarrolle desde una perspectiva general para progresivamente ir integrando detalles. 

Un wireframe puede definir uno, varios o todos estos aspectos:

• La estructura (Layout) de una Vista (View) o Página, o una sección
• Componentes de interfaz de usuario y como están relacionados o agrupados
• Mostrar el flujo de una tarea de usuario (User Task) dentro de la vista. Por ejemplo una barra de navegación
• Contenido y estructura de datos, así como su jerarquía y posición

Un proceso detenido y detallado al hacer el wireframe puede revelar elementos no considerados o mejores soluciones, por mencionar solo algunos beneficios. Entre mejor calidad de información se integre al wireframe, mejores serán los resultados logrados por el equipo. Es posible evitar desviaciones, reducir esfuerzo y riesgos.

Recomendaciones:

• No utilizar color a menos que sea relevante para demostrar. Por ejemplo una notificación de alerta
• No construir sobre wireframes revisados con comentarios. Guarde el original para referencia y haga revisiones sobre una copia nueva.
• Evite términos como Baja o Alta fidelidad  (Low, Hight fidelity) al solicitar un wireframe, puede llevar a hacer cosas a la ligera o sin cuidado. En lugar de usar términos ambiguos determine la cosas a considerar en el wireframe, como la Estructura principal (Main Layout), componentes interactivos or representar información o datos de forma jerarquica con contenido simulado.

Un wireframe en ingeniería es equivalente al plano que podría usarse la construcción de un edificio, en el plano se enlista y define todos los elementos constructivos. La falta o representación equivocada de algo puede conducir a resultados indeseados. Otro ejemplo más sencillo; la utilidad de un wireframe se puede comparar con el apoyo que da una receta de cocina. Sin una receta detallada se puede cocinar una plato mas o menos bien conociendo el procedimiento pero ignorar la lógica de preparación o los ingredientes simplemente va conducir a resultados poco afortunados.