![Page 1: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/1.jpg)
Jair Camargo AhumadaEsp. En Informática
![Page 2: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/2.jpg)
Storyboard
Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad) a lo largo del sitio web y en cada una de las páginas
![Page 3: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/3.jpg)
Diagramas de organización y funcionamiento
BluePrintMostrar la estructura del sitio y su flujo de navegación
![Page 4: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/4.jpg)
Diagramas de presentación I Wireframe o StoryBoard (Prototipos de Baja fidelidad)
Dibujos que representan cómo estarán organizados los elementos en las páginas
![Page 5: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/5.jpg)
Diagramas de presentación II
Maqueta o MockUp (Prototipo de Alta Fidelidad)Representan aspectos más precisos de forma
interactiva
![Page 6: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/6.jpg)
Objetivos
Mostrar el contenido de las páginasEn ningún caso significan un compromiso de
diseño gráficoSirven como herramienta de comunicación y
discusión entre arquitectos de información, programadores, diseñadores y clientes
![Page 7: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/7.jpg)
Ventajas
El equipo y el cliente se centran en el diseño de contenidos y no en el diseño visual
Se evitan cambios posteriores más costosos
![Page 8: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/8.jpg)
Atención!
Es muy importante aclararle siempre al cliente qué es un Wireframe, estar seguros de que entiende que ese no es el aspecto final del sitio, sino una mera representación gráfica de su contenido.
![Page 9: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/9.jpg)
Información que contiene
Inventario de contenido Contenidos de cada página
Elementos de la página Cabeceras, enlaces, botones, imágenes, formularios, etc
Etiquetado De vínculos, títulos, etc.
Layout Ubicación, colocación y agrupación de los elementos de la página
Comportamiento Mediante notas asociadas a los elementos para indicar cómo se deben mostrar
![Page 10: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/10.jpg)
Nivel de detalleContent-only
Nombre de la página y un listado de contenidos
![Page 11: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/11.jpg)
Nivel de detalleDiagrama de bloques
Información básica a través de bloques de funcionalidad y agrupamiento de contenidos
![Page 12: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/12.jpg)
Nivel de detalleDiagrama de bloques: Más ejemplos
![Page 13: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/13.jpg)
Nivel de detalleDiagrama de bloques: Más ejemplos
![Page 14: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/14.jpg)
Nivel de detalleDiagrama de bloques: Más ejemplos
![Page 15: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/15.jpg)
Nivel de detalleWireframe detallado
Todo lo anterior más notas de comportamiento
![Page 16: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/16.jpg)
Cantidad de páginas
PrincipalPrincipales tipos de subpáginas o plantillas
(incluidos formularios, resultados de búsqueda, página de error, etc.)
![Page 17: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/17.jpg)
Metodología
Hacer una lista numeradaInformación y funciones ("bit")
![Page 18: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/18.jpg)
Metodología
Priorizar gruposLo más importanteLo necesarioLo que es bueno tener
![Page 19: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/19.jpg)
Metodología
Agrupar los "bits" que se relacionan entre síGrupos con letra (ej. A:1,3,5)
![Page 20: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/20.jpg)
Metodología
Diseñar fragmentosDar forma a cada agrupación de "bits"
![Page 21: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/21.jpg)
Metodología
Componer los fragmentosPrioridadEquilibrio
![Page 22: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/22.jpg)
Metodología
AcabadoEn pantalla
![Page 23: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/23.jpg)
Recomendaciones
SimplificarMenor cantidad posible de colores y tipos de letra
Quitar detalles innecesariosElementos que distraigan la atención
Anotar sólo lo relevanteAutoexplicativoPresentación
![Page 24: Jair Camargo Ahumada Esp. En Informática. Storyboard Serie de diagramas que resumen la secuencia y la disposición del contenido (información y funcionalidad)](https://reader036.vdocuments.co/reader036/viewer/2022081515/5665b4aa1a28abb57c9309e4/html5/thumbnails/24.jpg)
Códigos visuales
Jesse James Garret
Rodrigo Ronda León
URL
URL