Storyboard web

24

description

Técnicas para hacer storyboard de páginas web

Transcript of Storyboard web

Page 1: Storyboard web
Page 2: Storyboard web

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

Diagramas de organización y funcionamiento

BluePrintMostrar la estructura del sitio y su flujo de navegación

Page 4: Storyboard web

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

Diagramas de presentación II

Maqueta o MockUp (Prototipo de Alta Fidelidad)Representan aspectos más precisos de forma

interactiva

Page 6: Storyboard web

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

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

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

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

Nivel de detalleContent-only

Nombre de la página y un listado de contenidos

Page 11: Storyboard web

Nivel de detalleDiagrama de bloques

Información básica a través de bloques de funcionalidad y agrupamiento de contenidos

Page 12: Storyboard web

Nivel de detalleDiagrama de bloques: Más ejemplos

Page 13: Storyboard web

Nivel de detalleDiagrama de bloques: Más ejemplos

Page 14: Storyboard web

Nivel de detalleDiagrama de bloques: Más ejemplos

Page 15: Storyboard web

Nivel de detalleWireframe detallado

Todo lo anterior más notas de comportamiento

Page 16: Storyboard web

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

Metodología

Hacer una lista numeradaInformación y funciones ("bit")

Page 18: Storyboard web

Metodología

Priorizar gruposLo más importanteLo necesarioLo que es bueno tener

Page 19: Storyboard web

Metodología

Agrupar los "bits" que se relacionan entre síGrupos con letra (ej. A:1,3,5)

Page 20: Storyboard web

Metodología

Diseñar fragmentosDar forma a cada agrupación de "bits"

Page 21: Storyboard web

Metodología

Componer los fragmentosPrioridadEquilibrio

Page 22: Storyboard web

Metodología

AcabadoEn pantalla

Page 23: Storyboard web

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

Códigos visuales

Jesse James Garret

Rodrigo Ronda León

URL

URL