Click here to load reader

Storyboard web

  • View
    9.635

  • Download
    0

Embed Size (px)

DESCRIPTION

Técnicas para hacer storyboard de páginas web

Text of Storyboard web

  • 1. Storyboard Serie de diagramas que resumen la secuencia y la disposicin del contenido (informacin y funcionalidad) a lo largo del sitio web y en cada una de las pginas

2. Diagramas de organizacin y funcionamiento BluePrint Mostrar la estructura del sitio y su flujo de navegacin 3. Diagramas de presentacin I Wireframe o StoryBoard (Prototipos de Baja fidelidad) Dibujos que representan cmo estarn organizados los elementos en las pginas 4. Diagramas de presentacin II Maqueta o MockUp (Prototipo de Alta Fidelidad) Representan aspectos ms precisos de forma interactiva 5. Objetivos Mostrar el contenido de las pginas En ningn caso significan un compromiso de diseo grfico Sirven como herramienta de comunicacin y discusin entre arquitectos de informacin, programadores, diseadores y clientes 6. Ventajas El equipo y el cliente se centran en el diseo de contenidos y no en el diseo visual Se evitan cambios posteriores ms costosos 7. Atencin! 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 representacin grfica de su contenido. 8. Informacin que contiene Inventario de contenido Contenidos de cada pgina Elementos de la pgina Cabeceras, enlaces, botones, imgenes, formularios, etc Etiquetado De vnculos, ttulos, etc. Layout Ubicacin, colocacin y agrupacin de los elementos de la pgina Comportamiento Mediante notas asociadas a los elementos para indicar cmo se deben mostrar 9. Nivel de detalle Content-only Nombre de la pgina y un listado de contenidos 10. Nivel de detalle Diagrama de bloques Informacin bsica a travs de bloques de funcionalidad y agrupamiento de contenidos 11. Nivel de detalle Diagrama de bloques: Ms ejemplos 12. Nivel de detalle Diagrama de bloques: Ms ejemplos 13. Nivel de detalle Diagrama de bloques: Ms ejemplos 14. Nivel de detalle Wireframe detallado Todo lo anterior ms notas de comportamiento 15. Cantidad de pginas Principal Principales tipos de subpginas o plantillas (incluidos formularios, resultados de bsqueda, pgina de error, etc.) 16. Metodologa Hacer una lista numerada Informacin y funciones ("bit") 17. Metodologa Priorizar grupos Lo ms importante Lo necesario Lo que es bueno tener 18. Metodologa Agrupar los "bits" que se relacionan entre s Grupos con letra (ej. A:1,3,5) 19. Metodologa Disear fragmentos Dar forma a cada agrupacin de "bits" 20. Metodologa Componer los fragmentos Prioridad Equilibrio 21. Metodologa Acabado En pantalla 22. Recomendaciones Simplificar Menor cantidad posible de colores y tipos de letra Quitar detalles innecesarios Elementos que distraigan la atencin Anotar slo lo relevante Autoexplicativo Presentacin 23. Cdigos visuales Jesse James Garret Rodrigo Ronda Len URL URL