Storyboard
Serie de diagramas que resumen la secuencia y la
disposición del contenido (información y
funcionalidad) a lo ...
Diagramas de organización y
funcionamiento
BluePrint
Mostrar la estructura del sitio y su flujo de navegación
Diagramas de presentación I
Wireframe o StoryBoard (Prototipos de Baja fidelidad)
Dibujos que representan cómo estarán o...
Diagramas de presentación II
Maqueta o MockUp (Prototipo de Alta Fidelidad)
Representan aspectos más precisos de forma
i...
Objetivos
Mostrar el contenido de las páginas
En ningún caso significan un compromiso de
diseño gráfico
Sirven como her...
Ventajas
El equipo y el cliente se centran en el diseño de
contenidos y no en el diseño visual
Se evitan cambios posteri...
Atención!
Es muy importante aclararle siempre al cliente qué
es un Wireframe, estar seguros de que entiende que
ese no es...
Información que contiene
 Inventario de contenido
 Contenidos de cada página
 Elementos de la página
 Cabeceras, enlac...
Nivel de detalle
Content-only
Nombre de la página y un listado de contenidos
Nivel de detalle
Diagrama de bloques
Información básica a través de bloques de
funcionalidad y agrupamiento de contenidos
Nivel de detalle
Diagrama de bloques: Más ejemplos
Nivel de detalle
Diagrama de bloques: Más ejemplos
Nivel de detalle
Diagrama de bloques: Más ejemplos
Nivel de detalle
Wireframe detallado
Todo lo anterior más notas de comportamiento
Cantidad de páginas
Principal
Principales tipos de subpáginas o plantillas
(incluidos formularios, resultados de búsqued...
Metodología
Hacer una lista numerada
Información y funciones ("bit")
Metodología
Priorizar grupos
Lo más importante
Lo necesario
Lo que es bueno tener
Metodología
Agrupar los "bits" que se relacionan entre sí
Grupos con letra (ej. A:1,3,5)
Metodología
Diseñar fragmentos
Dar forma a cada agrupación de "bits"
Metodología
Componer los fragmentos
Prioridad
Equilibrio
Metodología
Acabado
En pantalla
Recomendaciones
Simplificar
Menor cantidad posible de colores y tipos de letra
Quitar detalles innecesarios
Elementos ...
Códigos visuales
Jesse James Garret
Rodrigo Ronda León
URL
URL
Storyboard web
Upcoming SlideShare
Loading in...5
×

Storyboard web

9,889

Published on

Técnicas para hacer storyboard de páginas web

Published in: Technology, Design
1 Comment
8 Likes
Statistics
Notes
  • Una gran herramienta para hacer prototipos en alta definición (=gran exactitud) y con alta interactividad es Justinmind Prototyper: http://www.justinmind.com/downloads/wireframe_tool
    Ahora ha salido la nueva versión, la 3.0. Podeis probarla, es una herramienta de escritorio para la creación del prototipo y una vez el prototipo ha sido creado se puede compartir en la web con Justinmind Server.
    Justinmind está ofreciendo una licencia gratuita a cambio de una review de Justinmind Prototyper 3.0: http://www.justinmind.com/blog/we%C2%B4re-offering-a-free-license-for-a-review-of-new-justinmind-prototyper-3-0/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
9,889
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
248
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Storyboard web"

  1. 1. 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
  2. 2. Diagramas de organización y funcionamiento BluePrint Mostrar la estructura del sitio y su flujo de navegación
  3. 3. 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
  4. 4. Diagramas de presentación II Maqueta o MockUp (Prototipo de Alta Fidelidad) Representan aspectos más precisos de forma interactiva
  5. 5. Objetivos Mostrar el contenido de las páginas En ningún caso significan un compromiso de diseño gráfico Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes
  6. 6. 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
  7. 7. 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.
  8. 8. 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
  9. 9. Nivel de detalle Content-only Nombre de la página y un listado de contenidos
  10. 10. Nivel de detalle Diagrama de bloques Información básica a través de bloques de funcionalidad y agrupamiento de contenidos
  11. 11. Nivel de detalle Diagrama de bloques: Más ejemplos
  12. 12. Nivel de detalle Diagrama de bloques: Más ejemplos
  13. 13. Nivel de detalle Diagrama de bloques: Más ejemplos
  14. 14. Nivel de detalle Wireframe detallado Todo lo anterior más notas de comportamiento
  15. 15. Cantidad de páginas Principal Principales tipos de subpáginas o plantillas (incluidos formularios, resultados de búsqueda, página de error, etc.)
  16. 16. Metodología Hacer una lista numerada Información y funciones ("bit")
  17. 17. Metodología Priorizar grupos Lo más importante Lo necesario Lo que es bueno tener
  18. 18. Metodología Agrupar los "bits" que se relacionan entre sí Grupos con letra (ej. A:1,3,5)
  19. 19. Metodología Diseñar fragmentos Dar forma a cada agrupación de "bits"
  20. 20. Metodología Componer los fragmentos Prioridad Equilibrio
  21. 21. Metodología Acabado En pantalla
  22. 22. Recomendaciones Simplificar Menor cantidad posible de colores y tipos de letra Quitar detalles innecesarios Elementos que distraigan la atención Anotar sólo lo relevante Autoexplicativo Presentación
  23. 23. Códigos visuales Jesse James Garret Rodrigo Ronda León URL URL
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×