Niveles de                prototipado para web                estandarización de diagramas de información por             ...
representación de la AI     taller 6 - información y medios digitalesmartes 30 de agosto de 2011
diseño de la  información                 {   blueprints                                  mock ups                        ...
Los diagramas son una herramienta esencial para                comunicar arquitectura de información y diseño             ...
para que nos sirvemartes 30 de agosto de 2011
Definimos criterios de      organización y clasificación de                      la información                             ...
}                     Definimos el alcance de                           nuestro proyecto                                   ...
}           Pensamos en el destinatario           de nuestro proyecto y en su                        experiencia de       ...
taller 6 - información y medios digitalesmartes 30 de agosto de 2011
}                    El sistema presenta al                          usuario caminos.                                     ...
}                El usuario se mueve a             través de estos caminos                   mediante acciones            ...
taller 6 - información y medios digitalesmartes 30 de agosto de 2011
guiará la estructuración de la web y el resultado                                 será un diseño ordenado.   }            ...
Elementos simples: páginas, documentos y       pilas de éstos     taller 6 - información y medios digitalesmartes 30 de ag...
Creando relaciones: conectores y flechas     taller 6 - información y medios digitalesmartes 30 de agosto de 2011
Creando relaciones: conectores y flechas     Nótese que estas flechas no son como las flechas que indican una calle de un    ...
Todo de una vez: conjuntos concurrentes                                                 es usado en casos cuando una acció...
Separándolo: puntos de continuación       Para permitirnos separar nuestros diagramas en secciones fáciles de digerir,    ...
Elementos comunes: áreas y áreas iterativas       El elemento área (un rectángulo de esquinas redondeadas) es usado para  ...
Elementos comunes: áreas y áreas iterativas       Muchas arquitecturas incluyen repetir la misma estructura básica tal com...
Haciendo elecciones: puntos de decisión       Cuando una acción de un usuario puede generar uno de un numero de       resu...
Elección múltiple: ramas condicionales       Cuando un sistema debe seleccionar un camino entre un numero de opciones     ...
Upcoming SlideShare
Loading in …5
×

Vocabulario visual JJ Garrett

2,133 views

Published on

Diccionario visual de J

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,133
On SlideShare
0
From Embeds
0
Number of Embeds
869
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
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

×