Creación: 18-06-2010
Índice de contenidos
1. Introducción
2. Entorno
3. ¿Qué es Google Drawings?
4. ¿Pero estamos locos, o qué?
5. ¿Cómo podemos usar el wireframe kit de Morten Just?
5.1. Uso del “Web Clipboard”
6. Algunos trucos para el manejo de Google Drawings
7. Conclusiones
8. Sobre el autor
1. Introducción
Hace algunos días mi compañero Roberto Canales escribía un tutorial
(http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=mockups)
sobre Balsamiq Mockups (http://www.balsamiq.com/), posiblemente una de las mejores herramientas para prototipado rápido de pantallas (o por lo menos una de las que más me gustan 😉
En este tutorial vamos a ver otra alternativa: Google Drawings.
2. Entorno
El tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil MacBook Pro 17′ (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM, 128GB Solid State Drive).
- NVIDIA GeForce 9400M + 9600M GT with 512MB
- Sistema Operativo: Mac OS X Snow Leopard 10.6.3
- PostgreSQL 8.4
3. ¿Qué es Google Drawings?
Si disponemos de una cuenta de Google, seguramente ya conozcamos
Google Docs (http://docs.google.com). Google Docs es una suite de ofimática en la nube, que Google nos ofrece de forma gratuita. Con esta suite podemos crear documentos,
hojas de cálculo, presentaciones y algunas cosas más.
Pues bien, Google Drawings es la más reciente incorporación de Google a su suite de ofimática en la nube, permitiéndonos en este caso dibujar. En efecto Google Drawings es simplemente una herramienta de dibujo, al estilo del Paint de Windows.
jajaja, menos mal que en la empresa no me dedico yo al diseño 😛
4. ¿Pero estamos locos, o qué?
Esta es la pregunta que os podríais hacer cualquier de vosotros al llegar a este punto. ¿Cómo se nos ocurre usar un programa de dibujo para hacer prototipado rápido de pantallas? Eso sería de todo menos “rápido”.
Pues bien, en principio tendríais razón si no fuera por gente como Morten Just que ha preparado una colección de mocks para usar con Google Drawings. Podemos encontrar esta colección en su página “A wireframe kit for Google Drawings and 5 reasons it beats
Omnigraffle and Visio”
(http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/).
¿En qué consiste este “wireframe kit”? Simplemente es una colección de dibujos que representan componentes comunes, de forma que podamos hacer copy/paste y así vayamos construyendo nuestros prototipos de pantallas.
De hecho tenemos varios documentos, de forma que cada uno de ellos contiene componentes de un tipo determinado, por ejemplo para móviles, para aplicaciones web, …
5. ¿Cómo podemos usar el wireframe kit de Morten Just?
Es muy sencillo, basta con pinchar sobre
http://docs.google.com/leaf?id=0B6D4v-c42Zy5NjdkMDAwMzMtMTQ0MC00ODBkLWIyYWEtZTM5OGEzNzYxNmVm&hl=en_GB
y tendremos acceso a todos los documentos. Esta una característica muy interesante de Google Docs, y es que podemos publicar nuestro trabajo para compartirlo con los demás.
Una vez tenemos la la lista de documentos pinchamos sobre el que nos interese, y se nos mostrará el detalle de ese documento.
Ahora podemos pinchar sobre “Open” y el documento se abrirá en modo de solo lectura.
Aquí podemos ver toda la “paleta” de componentes que tenemos a nuestra disposición en este documento (en la parte gris de la izquierda). Morten Just ha sido muy hábil, ya que al poner la “paleta” en la zona gris del documento, consigue que todos estos elementos se ignoren al exportar, imprimir, … el documento.
Para empezar a trabajar, sobre este documento de solo lectura hacemos File –> Make a copy… Y, tras confirmar la operación, se nos creará un documento nuevo, este caso nuestro, que podremos modificar libremente.
Una vez tenemos nuestro propio documento es tan sencillo como ir haciendo copy/paste para ir formando nuestro prototipo.
5.1. Uso del “Web Clipboard”
El método que hemos visto antes nos permite usar las paletas, pero tenemos que crear un nuevo documento a partir de la plantilla. Si simplemente queremos usar un mock podemos hacer copy/paste de este elemento concreto usando el Web Clipboard. Este elemento es el tercer icono por la izquierda que encontramos en la barra de herramientas, y que tiene forma de un portapapeles con una nube.
Este Web Clipboard nos permite no sólo copiar elementos de un dibujo a otro otro, sino que nos permite copar elementos entre distintos tipos de documentos, por ejemplo de una hoja de cálculo a una presentación, por lo que se convierte en una herramienta muy potente.
6. Algunos trucos para el manejo de Google Drawings
Vamos a listar algunas “formulas” para utilizar Google Drawings:
- Para seleccionar varios elementos podemos, con el ratón, trazar un rectángulo. Todos los elementos que queden dentro o toquen este rectángulo, quedarán seleccionados.
- Para seleccionar varios elementos lo podemos hacer con shift + click sobre el elemento que queremos añadir al conjunto de elementos seleccionados.
- Podemos agrupar juntos varios elementos, de forma que sea mas sencillo luego moverlos o manipularlos en bloque.
- Para mover de forma “fina” (desplazamiento más preciso) podemos pulsar alt mientras se mueve la figura.
- Para redimensionar una forma y mantener el aspecto de alto/ancho podemos pulsar shift mientras redimensionamos la figura.
- Cmd + z, deshará la última operación.
- No es lo mismo Edit –> copy/paste, que el Web Clipboard.
7. Conclusiones
Hemos visto como podemos convertir un programa de dibujo en una herramienta de prototipado rápido de pantallas. Esto nos demuestra como con algo de ingenio se pueden hacer grandes cosas.
Además Google Docs aporta algunas ventajas interesantes como:
- que podemos compartir los documentos con todos los miembros del equipo, de forma que conseguimos un entorno de trabajo colaborativo.
- que está en la nube, por lo que siempre que tengamos un navegador tendremos disponible nuestro trabajo. Y además no nos tenemos que preocupar de hacer copias de seguridad.
- que es gratis.
8. Sobre el autor
Alejandro Pérez García, Ingeniero en Informática (especialidad de Ingeniería del Software) y Certified ScrumMaster
Socio fundador de Autentia (Formación, Consultoría, Desarrollo de sistemas transaccionales)
mailto:alejandropg@autentia.com
Autentia Real Business Solutions S.L. – «Soporte a Desarrollo»
