Cuando queremos crear un proyecto nuevo, es normal que hagamos sketchs, bocetos o dibujos rápidos para tener una imagen visual de cómo será nuestra interfaz. Esto nos ayuda a más adelante poder crear el proyecto lo más semajante posible a nuesto boceto en papel. Mientras lo realizamos a lapiz, hacemos cambios, tachamos, tenemos mejor ideas y estos sketchs se convierten en el prototipo del proyecto final, en definitiva en Mockups. A este proceso se le denomina Wireframing que es la creación de la estructura de una interfaz.
Una de las mejores herramientas para crear prototipos, bocetos o wireframes es Balsamiq Mockups. Este programa tiene varias ventajas:
- Es un programa de escritorio, es decir, solo tienes que registrarte para poder empezar a utilizarlo sin ningún tipo de descarga.
- Programado en Flex y AIR por lo que crea muy rápido Wireframes.
- Interfaz fácil de usar: como se ha creado con AIR es instalable tanto en Windows como Linux y Mac OS X.
- Te permite escoger entre un montón de objetos prediseñados como: barras de estado, menús, barras de progreso, etc. Además, te permite exportar el diseño que realices en PNG, PDF e incluso al portapapeles.
- Permite incrustar tus diseños en tu página web o en informes de errores. Puedes compartir tus diseños a través de un sistema muy parecido a Dropbox. Balsamiq funciona como cualquier aplicación normal, te permite arrastrar, soltar, guardar mockups en un archivo, copiar y pegar, deshacer, etc.
Para comenzar a utilizar esta herramienta, lo primero que hay que hacer es acceder a la página principal de Balsamiq. Una vez en ella, registrarse con un email, contraseña y usuario. Cuando ya has realizado el paso anterior, te llegará un email para confirmar la cuenta y una vez realizado esto, ya podrás empezar a utilizar la herramienta.
Lo primero que te permitirá hacer Balsamiq son tres cosas: Cargar una fotografía de perfil, invitar Staff o crear un nuevo proyecto. Además, podrás acceder a diversos vídeos que sirven de guía para el uso de la herramienta. Y no solo eso, Balsamiq te envía un correo con 4 Tips para empezar a utilizar el programa.
Cuando has creado el proyecto puedes realizar tres cosas más:
Añadir un Mockup: esto te sirve para empezar a añadir Wireframes. Equipo/Acceso: invitar a colaboradores para el proyecto. Activos del Proyecto: cargar imágenes para compartir en el Mockup
Además, Balsamiq te proporciona otro vídeo tour para conseguir realizar los tres puntos anteriores. Un consejo que te damos es que a la hora de crear los wireframes, ignores por completo el diseño gráfico y pongas tu máxima atención a la interacción del usuario. Con esto logramos desplegar nuestra creatividad sin estar limitados por nuestras ideas.
Te traemos algunos ejemplos de lo que se puede realizar con esta herramienta:
Imaginemos que queremos realizar un boceto de lo que sería el diseño de iTunes. Balsamiq te permitiría realizar el siguiente sketch:
Un ejemplo más especifico es el de la página principal de ISDI.
Cabe pensar que hacer esto en lápiz y papel es más rápido que realizar wireframes, pero con Mockups no es así. Además nos permite tener un imagen más atractiva para visualizar lo que sería en un futuro nuestro proyecto y de esta manera difundirla a nuestro equipo de trabajo.
