Storyboard web
-
Upload
antonio-albanes -
Category
Technology
-
view
9.636 -
download
0
description
Transcript of Storyboard web
![Page 1: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/1.jpg)
![Page 2: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/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: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/3.jpg)
Diagramas de organización y funcionamiento
BluePrintMostrar la estructura del sitio y su flujo de navegación
![Page 4: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/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: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/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: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/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: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/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: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/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: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/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: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/10.jpg)
Nivel de detalleContent-only
Nombre de la página y un listado de contenidos
![Page 11: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/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: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/12.jpg)
Nivel de detalleDiagrama de bloques: Más ejemplos
![Page 13: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/13.jpg)
Nivel de detalleDiagrama de bloques: Más ejemplos
![Page 14: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/14.jpg)
Nivel de detalleDiagrama de bloques: Más ejemplos
![Page 15: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/15.jpg)
Nivel de detalleWireframe detallado
Todo lo anterior más notas de comportamiento
![Page 16: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/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: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/17.jpg)
Metodología
Hacer una lista numeradaInformación y funciones ("bit")
![Page 18: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/18.jpg)
Metodología
Priorizar gruposLo más importanteLo necesarioLo que es bueno tener
![Page 19: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/19.jpg)
Metodología
Agrupar los "bits" que se relacionan entre síGrupos con letra (ej. A:1,3,5)
![Page 20: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/20.jpg)
Metodología
Diseñar fragmentosDar forma a cada agrupación de "bits"
![Page 21: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/21.jpg)
Metodología
Componer los fragmentosPrioridadEquilibrio
![Page 22: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/22.jpg)
Metodología
AcabadoEn pantalla
![Page 23: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/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: Storyboard web](https://reader033.fdocument.pub/reader033/viewer/2022061605/55617736d8b42a171a8b4cf8/html5/thumbnails/24.jpg)
Códigos visuales
Jesse James Garret
Rodrigo Ronda León
URL
URL