Diagrama Hipertexual y el Guión gráfico



El Diagrama Hipertexual y el Guión gráfico son herramientas para conceptualizar el proyecto, y se elaboran en la fase de reproducción.

Diagrama de hipertexto: nos sirve para diseñar la estructura del sitio web. Es un esquema gráfico que refleja la articulación de los contenidos en nodos y enlaces. Es graficar la estructura de la navegación.

Un ejemplo de Diagrama de hipertexto:03_jerarquica.jpg


Guión gráfico o Wireframe: Es un esquema de la colocación de elementos de la interfaz en la pantalla (menús de navegación, submenus, pestañas, contenidos de texto, fotos, video,..)
Uno para cada apartado o sección del proyecto. En caso de que se requiera, se diseñará también un storyboard.

Storyboard: en lo referente al diseño de la interfaz gráfica, el storyboard muestra a través de un gráfico prototipado la funcionalidad de la interfaz y la disposición de cada uno de los elementos que contiene. Aquí intervienen los contenidos hipertextuales, previamente editados, la disposición de éstos dada a través del hipertexto y la idea gráfica que se plantea para el desarrollo de la multimedia.

El guión gráfico sirve para ubicar los diferentes contenidos en la interfaz y para determinar cuáles serán los elementos de ayuda a la navegación.
Un ejemplo de Wireframe:
08_wireframes.jpg

Como se puede ver en el ejemplo, en el guión gráfico no se hace aún el estudio del diseño gráfico de la interfaz.

Programas on-line para crear el guión gráfico o wireframe:
http://mockflow.com/
http://stage.fluidia.org/
http://stripgenerator.com/strip/create
http://www.gliffy.com