1. 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
Mockingbird
Mockflow
Framebox
Lovely Charts
Me 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. SketchFlowque forma parte
deMicrosoftExpressionBlend (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.
2. 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.
MicrosoftExpressionBlend De la que hablare en el siguiente apartado.
Me gustaría añadir tres experiencias personales en este ámbito:
Microsoft ExpressionBlend
MicrosoftExpressionBlend junto con SketchFlowpermite 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.