Práctica: Prototipos con Balsamiq Wireframes
Contenido
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. 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
![Tutorial Balsamiq Wireframe](../../../img/tutorial_wireframe.png)
Prototipos
Telegram
Prototipo de la aplicación para web y móvil de Telegram.
![Prototipo Telegram Prototipo Telegram](../../../img/telegram.png)
SEECH
Prototipo de la para web de la tienda de ropa de tallas grandes infantiles SEECH. Versión PC y móvil.
Cuando plantares
Prototipo de la para web de horticultura ornamental Cuando plantares. Versión PC, tablet y móvil.