“Antes de hacer algo, piénsalo bien”. ¿Quién no ha oído esta frase alguna vez en su vida? Es de sentido común. Pero lo que mucha gente todavía no sabe es que, antes de arrancar cualquier proyecto, puede resultar muy útil plasmar las ideas en un papel o en una pantalla. Sí. Como lo oyes:

No importa si eres un consultor IT, un analista de negocio o un diseñador web. “Dibujar” lo que tienes en la cabeza antes de lanzarte a redactar, a programar o a diseñar puede resultarte de gran ayuda.

Si dibujas lo que tienes en la cabeza, tendrás la oportunidad de:

1. Asegurarte de que el planteamiento de partida tiene bases sólidas: en cuanto plasmas tus ideas en un papel o en una pantalla, comienzan a aflorar dudas e inconvenientes que hasta ese momento no te habías planteado. Pasar del concepto al boceto exige ordenar y estructurar las ideas, y saca a la luz aspectos que no estaban en nuestra cabeza.

2. Compartir tu idea con más gente. Pasar de lo abstracto a lo concreto -por ejemplo, de una idea a un esquema- nos ayuda a compartir nuestro proyecto con el resto de la gente: clientes, usuarios y colaboradores. Siempre es más fácil comunicar algo con un apoyo gráfico.

Para dibujar lo que piensas puedes utilizar lápiz y papel, claro. Pero también hay otros recursos y herramientas:

Mapas mentales

Un mapa mental es un diagrama usado para representar las palabras, ideas, tareas, u otros conceptos ligados y dispuestos radialmente alrededor de una palabra clave o de una idea central. Se utiliza para la generación, visualización, estructura, y clasificación taxonómica de las ideas, y como ayuda interna para el estudio, organización, solución de problemas, toma de decisiones y escritura. Más información en la Wikipedia.

Puedes utilizar Freemind, un software gratuito, para construir más fácilmente tus mapas mentales.

Y 2 sistemas de diagramación que se han convertido en auténticos clásicos a la hora de construir un sitio web:

Diagramas de flujo

Son esquemas que representan la estructura y el flujo de navegación de un sitio web o de una aplicación. Algo así como un “plano” en el que se muestran las conexiones y la interacción entre las diferentes partes de un sistema. El aspecto de los elementos es lo de menos mientras pueda comprenderse el flujo. Esta visión esquemática y de conjunto te permitirá sacar a la luz bastantes nudos y contradicciones que hasta el momento habían pasado inadvertidos.

Ejemplo de diagrama de flujo.

Wireframes o maqueta

Un wireframe es una representación esquemática de una página web. No muestra elementos gráficos, porque lo importante es establecer el contenido y el comportamiento de las diferentes páginas.

El wireframe puede ser más o menos detallado: se considera de baja fidelidad cuando se limita a representar aspectos generales, y de alta fidelidad cuando alcanza un gran nivel de detalle, por ejemplo, en el caso de una maqueta dinámica que permite, incluso, interactuar al usuario.

Ejemplo de wireframe o maqueta.

Diferencia entre wireframe y prototipo

Un wireframe no debe confundirse con un prototipo. Hay una diferencia fundamental entre ambos: los prototipos se construyen para funcionar -aunque no cuenten con una funcionalidad completa- mientras que los wireframes o maquetas tienen como principal objetivo representar el sistema, y no tanto actuar. Podríamos realizar un wireframe de baja fidelidad con lápiz y papel, y sería perfectamente válido siempre que resulte comprensible.

Estructura, no diseño

En ambos casos (diagramas y maquetas), el aspecto es absolutamente secundario. De hecho, introducir elementos de diseño en esta fase suele consistir un grave error: el cliente enseguida centrará la discusión en las formas y colores, dejando de lado otros temas fundamentales

Entre las aplicaciones que puedes utilizar para tus diagramas web se encuentra Jumpchart.

Más información sobre los wireframes en el blog de Olga Carreras.

Esta entrada fue publicada el Jueves, 11 de diciembre de 2008 a las 9:24 por danielcabrera y está clasificada bajo: Aplicaciones útiles, Consejos prácticos. Puede hacer un seguimiento de los comentarios de esta entrada gracias al feed RSS 2.0. Puede dejar un comentario, o enviar un trackback desde su sitio.