Wireframing ¿Qué es?Modelo que representa un diseño de un sistema con “baja fidelidad”.Trata de mostrar de manera esquemática:

La principal información y contenido (Que). La disposición y estructura de la información (Donde). Una descripción y una visualización básica de la interacción del usuario con el sistema.

(Como).

Deberían de ser rápidos y fáciles de crear.Se centraran en la representación del sistema pero no en el diseño (colores, estética, materiales…) incluirán las partes mínimas del funcionamiento y apariencia del sistema para ser representativos de este pero sin entrar en detalles que lleve demasiado tiempo representar.

En una frase: Representación esquemática de un sistema centrado en la información mínima relevante, la estructura mínima representativa y la iteración principal del usuario. Palabras Clave: Dummy, preliminar, estático, blanco y negro, rápido de crear…

Escenarios de uso Creación y/o diseño de una idea o producto. El hacer un wireframe nos ayuda a

pensar, aclarar conceptos, visualizar y contextualizar las ideas… Comunicación interna para el equipo de desarrollo. Es una gran herramienta para que

todos los participantes en el desarrollo de un producto/proyecto tengan una visión general del sistema y de esquema básico de este.

Herramientas MockingbirdMockflowFrameboxLovely ChartsMe gustaría añadir una que utilizamos en mi trabajo (utilizamos tecnologías Winforms, WPF y Silverlight) y que es especialmente útil para las dos últimas. SketchFlow que forma parte de Microsoft Expression Blend (Ahora simplemente Expresión) de que hablare más adelante.Tiene la ventaja de que para la creación del wireframe dispone de controles que presenta una mínima iteración (controles que se ocultan al pulsar botones …) .Mockup¿Qué es?Representación de fidelidad media-alta del diseño de un sistema.

Representa la estructura de la información, visualización de contenido y muestra las funcionalidades básicas de manera estática.Un mockup trata de mostrar el diseño final del sistema (maqueta, aplicación o web simple).Mientras que un wireframe se centra en el esqueleto de un sistema el Mockup lo hace más en el diseño (aunque no sea final) de este.

El diseño no tiene por qué referirse a diseño físico ni grafico un ejemplo que utilizo en mí día a día son mockups de servicios distribuidos (El UI y el BS son realizados por diferentes equipos). Si estoy programando/diseñando un interfaz de usuario cuya lógica de negocio viene de un servicio (por ejemplo un servicio web) utilizamos un servicio que aunque ofrece todas las funciones realmente no hace nada solo devuelve datos estáticos.De esta manera se puede desarrollar utilizando las llamadas reales pero sin tener que configurar, acceder etc al servicio y sin depender del estado de finalización de este.

Escenarios de uso

Demostraciones del producto/sistema a posibles clientes potenciales. Evaluación por parte del equipo de desarrollo o de clientes.

Aunque no presente funcionalidad como representan bastante fidedignamente (o totalmente) el diseño del sistema es una muy buena herramienta para estos dos escenarios.

Herramientas En mi investigación para este caso me he encontrado con que las herramientas recomendadas para crear mockups son prácticamente las mismas que para wireframes.Estos son así en algún caso por la confusión entre los dos casos (que a veces se pueden solapar).Y porque muchas de ellas permiten además de crear un esqueleto añadir una mínima iteración y navegabilidad.

Dicho esto añadiré algún ejemplo centrado en mi campo (software) que considero que se acerca más fidedignamente:

Visual Studio, Eclipse, Xamarin. Aunque son entornos de desarrollo con una mínima idea de programación se pueden hacer aplicaciones “tontas” pero que incluyan navegabilidad (pulsar botones que muestren cosas, menús, grids de datos).

App inventor para Android . Permite crear aplicaciones Android sin saber programar, también es muy útil para crear mocukps de estas.

En el caso de productos físicos (y como ya se comentó en la teoría de este tema) una impresora 3d permitiría crear maquetas.

Microsoft Expression Blend De la que hablare en el siguiente apartado.

Me gustaría añadir tres experiencias personales en este ámbito:

Microsoft Expression BlendMicrosoft Expression Blend junto con SketchFlow permite hacer wireframes primero después darles diseño real y navegabilidad con Blend.Esta herramienta de hecho está pensada para que los diseñadores gráficos desarrollen un interfaz que luego se conectara con la implementación de este, la idea es separar las labores de diseño de las de programación. De hecho no está orientada a programadores sino a diseñadores.

Raspberry pi y Arduino Con un concepto parecido a arduino está la raspberry pi.Es básicamente un mini-ordenador de bajo coste creado para educación pero utilizado ampliamente en muchos tipos de proyectos. De hecho muchas veces se utiliza en combinación con arduino usando este para control de dispositivos hardware y el primero para software de más alto nivel.

Bibliografía:http://en.wikipedia.org/wiki/Mockuphttp://en.wikipedia.org/wiki/Website_wireframe

http://creately.com/diagram-type/article/have-you-confused-wireframes-mockupshttp://designmodo.com/wireframing-prototyping-mockuping/http://itbaf.com/blog/2013/02/18/wireframes-prototipos-mock-ups-cual-es-la-diferencia/