StoryBoard: secuencia de wireframes que muestran cómo se realiza una tarea.

Planos: diagramas de organización y funcionamiento

Los diagramas de organización y funcionamiento se llaman BluePrint (también Architecture Map o Diagramas de contenido o flujo) y pueden ser más o menos avanzados. Es lo que también se denominamapa web. vemos dos ejemplos, uno más sencillo y otro más completo:

Como se ve, el objetivo de estos diagramas es mostrar la estructura del sitio y su flujo de navegación.

Para la realización de este tipo de diagramas de recomienda siempre el "Vocabulario visual para describir arquitectura de información y diseño de interacción" de Jesse James Garrett.

Una herramienta sencilla y gratuita, recomendable para realizar mapas web sencillos, es XMind. Para realizar diagramas más complejos se pueden utilizar cualquiera de las herramientas recomendadas más adelante para la realización de wireframes.

Maquetas: diagramas de presentación

Por otro lado hemos visto que tenemos los diagramas de presentación, cuyo objetivo es mostrar el contenido de las páginas, concretando los elementos que se plantearon en los primeros planos (blueprints) y ubicándolos en las páginas o pantallas del producto final.

Podemos tener distintos tipos de prototipos, que en ningún caso incluyen el diseño gráfico puesto que este se aplica en una etapa posterior. Para simplificar, podemos hablar de:

• Prototipos de Baja fidelidad: son un conjunto de dibujos que representan cómo estarán organizados los elementos en las páginas, de tal manera que implementan aspectos generales del sistema sin entrar en detalle. Dentro de prototipos de baja fidelidad hablaremos de:
  • Sketching: un sketch es un boceto rápido e informal que se realiza en papel para transmitir una idea o concepto con rapidez y claridad. Suele realizarse durante las entrevista iniciales como técnica eficaz para comunicar al cliente conceptos o proponer alternativas a un problema; también es muy útil durante un brainstorming o en las reuniones con el equipo de trabajo. Es una forma eficaz de comenzar el prototipado de un sitio web, pues permite trabajar ágilmente con varias ideas y esquematizar las páginas.
  
  El libro de referencia suele ser "Sketching User Experience" de Bill Buxton. Es interesante el artículo "Bill Buxton : Sketching versus Sketchiness, what's the difference for UX design?" de Joel Eden sobre si deberíamos hablar de sketching o de sketchiness. Otro artículos recomendados:Sketching Design, de Yan Schober y "Sketching User Experience" (Comparativa entre sketching y prototipo)
  • Wireframe: permite crear una referencia visual de la estructura de una página web, definiendo al detalle el contenido y su distribución visual, organizando así la información a nivel de página. Lo trataremos en detalle en el siguiente apartado.
  • StoryBoard: secuencia de wireframes que muestran cómo se realiza una tarea.
    
    Imagen tomada de "Wireframes for the Wicked", de Michael Angeles, Nick Finck and Donna Spencer
    
    
    El doctor Granollers propone un nuevo tipo de prototipado, el StoryBoard Navegacional, que une los dos tipos de prototipado. Lo expliqué en el artículo, "Metodología DCU MPlu+a".
    Algunos autores los denominan Wireflows (Wireframes+Flowcharts):
    
    Imagen de: Galería de entregables UX – Wireflows,uxd.cl
    También podemos oír hablar de “Thumbnail Sketches”, que es simplemente un storyboard de scketches:
    
    Imagen tomada de "Close Photoshop and Grab a Pencil: The Lost Art of Thumbnail Sketches", de Joshua Johnson
    
    Imagen de: Galería de entregables UX – Wireflows,uxd.cl
• Prototipo de Alta Fidelidad (también llamados maqueta, mockUp o prototipo funcional), con los que se representan aspectos más precisos. Sirven, por ejemplo, para detallar el proceso interactivo global de una o varias tareas concretas. Son prototipos o maquetas dinámicas, normalmente en (X)HTML, que simulan o tienen implementadas partes del sistema final a desarrollar. Pueden ser de muy distintos tipos, completo o parcial, horizontal o vertical, etc.

En Sidar tienes un excelente artículo sobre distintos tipos de prototipado. 

El propósito de crear estos prototipos es dar la oportunidad de evaluar el diseño prematuramente. El objetivo es producir estos prototipos rápidamente y evaluarlos eficazmente para que puedan ser refinados, elaborados y reevaluados antes del producto final. Ingeniería de la Usabilidad aplicada al desarrollo de un portal web administrado dinámicamente, José M. Belmonte Marín