Herramientas gratuitas -o casi- para diseñar la estructura de navegación de un sitio web

Sábado, 19 de marzo de 2011

Estructura_edificioYa hemos comentado muchas veces que NO tiene sentido ponerse a diseñar y construir un sitio web “a lo loco”, por muy sencillo que éste sea.

Lo primero que conviene hacer es diseñar un sencillo de , y una de esquemática pero muy bien pensada (un ).

Este trabajo previo nos permitirá ordenar nuestras ideas, y nos ayudará a descubrir y solucionar pequeños defectos e incoherencias en la navegación que, de otra manera, hubiesen pasado inadvertidos.

Trabajar con wireframes es fundamental, porque siempre resulta más práctico y efectivo realizar cambios con los borradores -que todavía no tienen el ni la funcionalidad definitiva- que hacerlo con el producto real, cuando ya es demasiado tarde para rectificar (y demasiado costoso).

Aquí tienes 16 aplicaciones para diseñar la estructura de navegación de tu próximo sitio web. Prácticamente todas -con excepción de las dos primeras, muy conocidas- son gratuitas o incluyen, al menos, un plan gratuito.

(más…)

Recursos para elaborar wireframes, diagramas, gráficos, y flujos de navegación

Domingo, 14 de febrero de 2010

Boceto_Canaletto- ¿Tienes que dibujar la o de un sitio web?

- ¿Necesitas representar un de ?

Ya sabes que antes de arrancar cualquier proyecto, lo más útil que puedes hacer es dibujar lo que tienes en la cabeza. De esta forma contarás con una referencia para ordenar el trabajo, para valorar el alcance real, y para detectar los problemas con los que puedes encontrarte. Además, estos esquemas te permitirán compartir la información con el cliente y con el resto del equipo.

Estos consejos y herramientas pueden servirte de gran ayuda:

1. ¿Qué tipo de gráfico me conviene elaborar?

¿Tienes que elegir una forma de presentación para tus datos y no sabes por dónde empezar? Esta recopilación de tipos de gráficos puede servirte como inspiración.

2. Prefiero trabajar con lápiz y papel

Hay gente que prefiere trabajar al estilo tradicional, con lápiz y papel. Muchas veces, sobre todo en la fase de arranque, puede resultar más rápido e intuitivo, y además no pone límites a nuestra creatividad e imaginación: podemos dibujar y apuntar cualquier cosa, como en un cuaderno de notas.

La ventaja es que ahora no tenemos por qué arrancar de un papel en blanco. Aquí tienes unas plantillas imprimibles para que después completes tus wireframes o maquetas a mano.

(más…)

Antes de arrancar un proyecto, prueba a dibujar lo que tienes en la cabeza

Jueves, 11 de diciembre de 2008

“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:

Un mapa mental es un 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, , 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 que se han convertido en auténticos clásicos a la hora de construir un sitio web:

de

Son esquemas que representan la estructura y el flujo de 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 es una representación esquemática de una página web. No muestra elementos , 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 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

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.