Bosquejos en papel dentro del proceso de diseño

Cuando hablamos de un proyecto de cierta envergadura empezamos a buscar las formas de obtener los mejores resultados, por cierto, algo que deberíamos hacer siempre, pero por cuestiones de tiempo y costos no siempre hacemos.

Hoy mientras navegaba de casualidad fue a dar con la imagen de un bosquejo de la interface de una nueva aplicación para el Iphone, esto me motivo a escribir sobre la importancia y el como bosquejar nuestros proyectos para obtener mejores resultados y aunque parezca mentira, ahorrar mucho tiempo.

Comencemos por lo básico: ¿Por qué debemos bosquejar?

En PSD Tuts, blog que ya recomendé en otra oportunidad, nos dan 5 razones muy validas.

1. Desarrollo rápido de un concepto
2. Composición rápida de un esquema
3. Mejor comunicación con un cliente para la aprobación
4. Exploración visual
5. Redefinición una solución visualmente

Como podrán ver en las razones que nos brindan se hace mucho hincapié en el tiempo y la velocidad que implica realizar un bosquejo en papel antes de pasar a la pantalla las cosas. Además de estos puntos yo agregaría que trabajar un diseño en papel nos permite pensar en los detalles que en la pantalla no lo haríamos, tener un esquema enfrente de nosotros de una manera tan estática como puede ser una hoja de papel nos brinda una perspectiva completamente diferente, probablemente la explicación de esto sea que el papel nos permite eliminar cualquier distracción y solo centrarnos en el proyecto y sus funcionalidades.

Les aseguro que el papel a la hora de organizar un sitio es mucho mas rápido que el de hacerlo directo en la pantalla, y también podemos guardar la relación a la perfección.

Por ejemplo una resolución de 1024×768 píxeles, resolución que hoy en día se considera la mas adoptada por lo usuarios de internet, podemos «dibujarla» en centímetros fácilmente y estaríamos hablando de unos 36.12 x 27.09 cm. Un tamaño perfectamente aplicable a la mayoría de los formatos de papel. De esa forma mantendremos el ratio sin ningún tipo de problemas.

Inclusive para los más adinerados o vagos 😀 pueden optar por comprar un cuadernillo con las escalas ya impresas. Y para los mas prácticos pueden directamente descargar un PDF con todas las marcas correspondientes a las resoluciones de pantalla mas utilizadas, por ejemplo les recomiendo que descarguen el PDF de WV4.

Técnica para realizar un bosquejo:
Creo que es inmejorable el artículo de 37 signals, pero si lo resumimos en pasos prácticos la idea seria esta:

1. Realiza una lista de todos los ítems que debería contener el sitio, intentando no olvidar nada.
2. Busca las relaciones entre cada uno de los ítems que aparecen en el listado creado en el punto anterior.
3. Organiza los grupos que obtuviste en el paso anterior por prioridad, es decir, reorganiza por orden de importancia.
4. Realiza un esquema de cada grupo en papel.
5. Coloca todos los esquemas de cada grupo juntos en el marco contenedor.
6. Lleva el esquema a la realidad.

Creo que el modo de trabajar un esquema de diseño web que plantea 37 signals es muy bueno y no le hace falta ningún otro adicional, probablemente existan mas técnicas o inclusive varias practicas para agilizar el trabajo de realizar el bosquejo.

Por ejemplo, algo que note muy practico, es que la persona que realizo el bosquejo de la aplicación del Iphone armo pequeños recortes de los botones y pantalla del móvil para luego poder clonar esas figuras en segundos, una idea excelente.

Conclusión: Hay que volver al papel, aunque sea muy poco cool 😀

Lecturas muy recomendadas:

• An Introduction to Using Patterns in Web Design
• Design process: Sketching
• The Role of Sketching in the Design Process

Bonus:

Para los que se encuentren interesados en llevar a la practica el uso del papel para bosquejar interfaces les puede ser de mucha utilidad el libro Paper Prototyping de Carolyn Snyder, un libro que va directo a la practica y que desarrolla muy bien todos los aspectos de trabajar con papel la etapa previo al diseño “en pantalla”.

En Argentina se consigue relativamente fácil en Librería Santa Fe, pero también lo pueden comprar directamente de Amazon, y luego si tienen suerte lo reciben en la puerta de su casa. Y en el peor de los casos lo tendrían que ir a buscar al CPI (centro postal internacional) Eso si, si les toca ir, les aconsejo que se armen de paciencia y desocupen el día completo.