Vocabulario visual JJ Garrett

2,396 views
2,172 views

Published on

Diccionario visual de JJ Garrett para la construcción de diagramas de información asociados a la construcción de sitios web.

Published in: Technology, Business
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
2,396
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Vocabulario visual JJ Garrett

  1. 1. Niveles de prototipado para web estandarización de diagramas de información por medio de vocabulario visual taller_mediamartes 30 de agosto de 2011
  2. 2. representación de la AI taller 6 - información y medios digitalesmartes 30 de agosto de 2011
  3. 3. diseño de la información { blueprints mock ups wireframes vocabulario visual de J.J Garrettmartes 30 de agosto de 2011
  4. 4. Los diagramas son una herramienta esencial para comunicar arquitectura de información y diseño de interacción en equipos de desarrollo Web.martes 30 de agosto de 2011
  5. 5. para que nos sirvemartes 30 de agosto de 2011
  6. 6. Definimos criterios de organización y clasificación de la información } publicada. organizar la informaciónmartes 30 de agosto de 2011
  7. 7. } Definimos el alcance de nuestro proyecto organizar la informaciónmartes 30 de agosto de 2011
  8. 8. } Pensamos en el destinatario de nuestro proyecto y en su experiencia de navegación organizar la informaciónmartes 30 de agosto de 2011
  9. 9. taller 6 - información y medios digitalesmartes 30 de agosto de 2011
  10. 10. } El sistema presenta al usuario caminos. aplicarlamartes 30 de agosto de 2011
  11. 11. } El usuario se mueve a través de estos caminos mediante acciones aplicarlamartes 30 de agosto de 2011
  12. 12. taller 6 - información y medios digitalesmartes 30 de agosto de 2011
  13. 13. guiará la estructuración de la web y el resultado será un diseño ordenado. } El objetivo del trabajo. Un objetivo bien definido taller 6 - información y medios digitalesmartes 30 de agosto de 2011
  14. 14. Elementos simples: páginas, documentos y pilas de éstos taller 6 - información y medios digitalesmartes 30 de agosto de 2011
  15. 15. Creando relaciones: conectores y flechas taller 6 - información y medios digitalesmartes 30 de agosto de 2011
  16. 16. Creando relaciones: conectores y flechas Nótese que estas flechas no son como las flechas que indican una calle de un solo sentido, más bien son como las flechas de una señalética. El usuario no está impedido de moverse en dirección opuesta; la flecha indica solamente la dirección en la cual el usuario probablemente querrá ir. taller 6 - información y medios digitalesmartes 30 de agosto de 2011
  17. 17. Todo de una vez: conjuntos concurrentes es usado en casos cuando una acción del usuario genera resultados múltiples simultáneos (tal como abrir una ventana pop-up mientras una página se carga en la ventana principal, o mostrar una pagina mientras un documento es descargado). taller 6 - información y medios digitalesmartes 30 de agosto de 2011
  18. 18. Separándolo: puntos de continuación Para permitirnos separar nuestros diagramas en secciones fáciles de digerir, usamos puntos de continuación (paréntesis cuadrado) para unir los vacíos entre las páginas. taller 6 - información y medios digitalesmartes 30 de agosto de 2011
  19. 19. Elementos comunes: áreas y áreas iterativas El elemento área (un rectángulo de esquinas redondeadas) es usado para identificar un grupo de paginas que comparten uno o más atributos comunes (tales como aparecer en una ventana pop-up, o tener un tratamiento único de diseńo). taller 6 - información y medios digitalesmartes 30 de agosto de 2011
  20. 20. Elementos comunes: áreas y áreas iterativas Muchas arquitecturas incluyen repetir la misma estructura básica tal como es aplicada a un número de elementos de información funcionalmente idénticos. taller 6 - información y medios digitalesmartes 30 de agosto de 2011
  21. 21. Haciendo elecciones: puntos de decisión Cuando una acción de un usuario puede generar uno de un numero de resultados, el sistema debe tomar una decisión acerca de cuál resultado debe presentar. (Probablemente el ejemplo más común de esto es manejo de errores en el envió de formularios.) como en diagramas de flujo tradicionales, es representado por un diamante. taller 6 - información y medios digitalesmartes 30 de agosto de 2011
  22. 22. Elección múltiple: ramas condicionales Cuando un sistema debe seleccionar un camino entre un numero de opciones mutuamente exclusivas a ser presentadas al usuario, usamos una rama condicional (triángulo). El sistema está tomando una decisión similar, pero sucede antes que la acción del usuario. taller 6 - información y medios digitalesmartes 30 de agosto de 2011

×