Práctica: Prototipos con Balsamiq Wireframes

Balsamsiq

Balsamiq es una herramienta para la creación de prototipos. De uso fácil y (más o menos) intuitivo, es similar en cuanto a funcionalidad a los editores de imagen, permite arrastrar, soltar, guardar mockups en un archivo, copiar y pegar, deshacer, etc.

Entre sus características más interesantes:

• Creación de proyectos con múltiples wireframes y versiones alternativas de cada uno de ellos, para recoger varias ideas de diseño de una misma pantalla, versiones para distintos dispositivos, etc. sin necesidad de añadir más wireframes.
• Permite añadir iconos personalizados y otros objetos.
• Seleccion/Deseleccion de varios elementos simultáneamente.
• Autogenera Lorem ipsum (palabra clave: lorem).
• Además de poder exportar a png uno o varios elementos, uno, varios o todos los wireframes, facilita la exportación directa a pdf con múltiples opciones: orientación, wireframes a exportar, enlaces...
• El programa permite importar controles y plantillas creados por otros usuarios o propias.
  Controles E-Commerce Site

  Controles E-Commerce(bmpr)
  Las instrucciones para contribuir con tus creaciones están en Wireframes To Go.

En aspectos generales funciona como un editor de imágenes (Photoshop, GIMP), pero mucho más limitado. Algunas de sus limitaciones más relevantes:

• Solo permite la importación de imágenes en png y hay caracteres, como el signo '+', que no admite en el nombre.
• Se pueden bloquear varios elementos a la vez, pero no desbloquearlos.
• Cada objeto está en una capa, pero las capas están ocultas, conllevando una eternidad el desplazamiento de elementos en el eje z.
• Comportamiento de enlaces: limitado a una acción y solo a páginas externas o a elementos de la versión principal de los distintos frameworks.
• Falta de dinamismo. El programa se basa en imágenes estáticas.
• Las opciones de selección de colores están limitadas a la reducida paleta del programa. Reconoce colores personalizados en código hecxadecimal, pero solo se pueden aplicar directamente a los elementos de texto (etiqueta {color}).
• Personalización de elementos limitada. No deja, por ejemplo, cambiar el color del texto ni de los iconos dentro de las formas.
• Unicamente se puede usar una fuente para todo el proyecto entre una lista limitada.
• Las opciones para redimensionado de iconos están restringidas a unas tallas preestablecidas.

Tutorial

Tutorial básico diseñado como guía para la creación del primer wireframe. Cubre una visión general básica del producto, así como algunas de las características y controles de la interfaz de usuario.

Resultado

Prototipos

Telegram

Prototipo de la aplicación para web y móvil de Telegram.

• Prototipo: Telegram (bmpr)
• Prototipo: Telegram

SEECH

Cuando plantares