Prototipado de pantallas con Pencil
0. Índice de contenidos.
1. Entorno
Este tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil MacBook Pro 15′ (2 GHz Intel Core i7, 8GB DDR3 SDRAM).
- Sistema Operativo: Mac OS X Lion 10.7.1
- Pencil 2.0.3
2. Introducción
Ya hemos comentado varias veces que el prototipado de pantallas nos sirve para hacernos una idea de cómo vamos a diseñarlas y al mismo tiempo poder enseñarle al cliente
un boceto del resultado final sin necesidad de tener que hacer un gran esfuerzo en maquetaciones que puede que luego haya que tirar a la basura porque haya que realizar
cambios sobre los diseños propuestos.
En los tutoriales Primeros pasos con balsamiq mockups y Prototipado rápido de pantallas (mocks) con Google Drawings os presentamos dos herramientas para poder hacer esto. Hoy os presentamos otra alternativa Pencil.
3. Prototipando
Pues como hemos adelantado en la introducción, Pencil es una herramienta de prototipado de interfaces de usuario, pero no sólo eso, además es un proyecto Open Source disponible para las plataformas de desarrollo más comunes (Windows, Mac y Linux). Con esto os presentamos otra alternativa libre para hacer nuestros prototipos.
La descarga e instalación no tiene gran misterio, os descargáis el archivo para vuestra plataforma y seguís los pasos de instalación, en el caso de Mac es un archivo comprimido que una vez descomprimido ya está directamente el «.app» que lo normal es copiarlo en «/Applications». Una vez instalado lo ejecutamos y ya estamos listos para empezar a hacer nuestros prototipos.
A primera vista vemos la típica estructura de las herramientas de diseño de pantallas o de diagramas, con un amplio conjunto de colecciones de elementos donde podremos ir buscando aquellos elementos que nos vaya a ir haciendo falta. Si echamos un vistazo podemos ver que tenemos elementos con la apariencia específica de varios sistemas, como Windows o incluso para dispositivos móviles Android o iOS.
Además de los elementos que tenemos en las colecciónes preinstaladas, también tenemos disponible un gran número de imágenes con la herramienta de «Tools -> Clipart browser …» que busca en http://openclipart.org/.
También podemos crearnos nuestra propia colección con los elementos e imágenes que queramos. Por ejemplo, vamos a crearnos una colección de imágenes con el logo de Autentia y de Adictos al Trabajo. Seleccionamos el menú «Tools -> Developer tools -> Stencil Generator» para crearnos nuestra colección y donde incluiremos todas las imágenes que queramos, rellenamos los campos del asistente y finalmente salvamos el fichero «.zip» con la nueva colección.
Una vez creada la colección lo siguiente que tendríamos que hacer es añadir la nueva colección en nuestro grupo de colecciones. Para hacer esto seleccionamos «Tools -> Install new collection …» y seleccionamos el fichero «.zip» que hemos generado antes. Nos saldrá una alerta porque la colección no está firmada.
Aceptamos, y ya tenemos instalada nuestra colección justo con las otras.
Una vez ya hemos visto como crear nuestra propia colección, empezamos haciendo nuestra primera página web, en este ejemplo lo hacemos para dispositivos móviles. Como ejemplo pondremos una pantalla con un listado de cursos y al selecciónar uno de ellos se mostrará su descripción.
4. Navegando
Como podéis ver, con el conjunto de elementos que tenemos disponibles resulta sencillo el hacer el prototipado de pantallas, pero algo que nos va a aportar valor añadido es poder dar un prototipado navegable en HTML a nuestros clientes con el que ellos puedan jugar y simular la navegación que va a hacer un usuario por la aplicación.
Para hacer esto, lo primero que tenemo que hacer el asignar este comportamiento de navegación. Elegimos uno de los elementos del listado y pulsando con el botón derecho nos aparece un menú donde seleccionaremos «Link to …» y la página a la que queremos hacer la navegación, en nuestro caso «Link to … -> detail».
Haciendo esto sobre cada unos de los elementos de nuestra página que vayan a realizar una navegación simulamos el comportamiento de la misma. Ahora ya sólo nos falta exportarlo a HTML.
Por defecto Pencil nos viene con unas plantillas de exportación, pero podemos conseguir más en https://code.google.com/p/evoluspencil/downloads/list?q=label:Template. En este ejemplo usaremos la plantilla de exportación «GUIPrototypingSmall». Nos descargamos el fichero y una vez descargado volvemos a Pencil y en el menú «Tools -> Manage Export Template» nos sale el asistente con el que podremos importar el fichero descargado.
Finalmente para realizar la exportación, seleccionamos «Document -> Export Document …», y en el asistente seleccionamos «Single web page»
Marcamos las página que queremos incluir en la exportación,
Y finalmente seleccionamos la plantilla de exportación que queremos y donde guardarla.
Esto nos habrá creado una página HTML y dos carpetas para las imágenes de las páginas y recursos. El resultado de la exportación lo podéis ver aquí.
5. Conclusiones
Ya sabíamos que el uso de herramientas de prototipado nos son muy útiles sobre todo a la hora de crear bocetos de las pantallas de nuestras aplicaciones. Ahora os hemos mostrado una alternativa Open con la que podemos hacer todo este tipo de prototipado y que además nos incluye una exportación navegable, por lo que se convierte en algo muy útil en las fases iniciales de nuestros proyectos.
Hola Borja, Me ha servido tu tutorial. Gracias por publicar
Tengo una pregunta que espero me puedas ayudar. ¿Hay una forma de ocultar páginas en Pencil Project? La idea es dejar visibles solo las páginas con las que se está trabajando.
Saludos
muy buen tutorial.
tengo una pregunta, para mobile, ¿como se agrega una imagen dentro de un «border bottom action bar»? o ¿se puede hacer con otro objeto?