Modelos de representación para web

1,275 views

Published on

Un proyecto digital requiere de un método y proceso de desarrollo en cuanto a su estructura visual. Las partituras visuales como los bocetos son herramientas relevantes al momento de crear un guión gráfico para el diseño visual y presentación de contenidos.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,275
On SlideShare
0
From Embeds
0
Number of Embeds
772
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Modelos de representación para web

  1. 1. presentación y diagramación de contenidos para la pantalla wireframes taller_media martes 3 de septiembre de 2013
  2. 2. diseño de la información card sorting - blueprints - wireframes martes 3 de septiembre de 2013
  3. 3. taller 6 - información y medios digitales martes 3 de septiembre de 2013
  4. 4. El Wireframe es una jerarquización de contenidos distribuida visualmente y una esquematización de la interfaz. Gráficamente, son estructuras muy simples y están enfocados a visualizar la distribución de los contenidos dentro de una pantalla. }wireframes martes 3 de septiembre de 2013
  5. 5. }wireframes El Wireframe es el puente que une la Arquitectura de Información y Diseño. Pasa de la “mentalidad estructural” de un mapa de contenidos, dónde decidimos y ordenamos los contenidos de nuestro sitio web, a la emocionalidad del Diseño de Arquitectura de información Interfaz. martes 3 de septiembre de 2013
  6. 6. ¿para qué nos sirve? martes 3 de septiembre de 2013
  7. 7. taller 6 - información y medios digitales Elementos de navegación: menús, accesos directos e hipervínculos. }grafican martes 3 de septiembre de 2013
  8. 8. taller 6 - información y medios digitales Elementos de información: contenidos de texto e imágenes. }grafican martes 3 de septiembre de 2013
  9. 9. taller 6 - información y medios digitales Elementos de interacción: herramientas o funcionalidades que el usuario puede realizar. }grafican martes 3 de septiembre de 2013
  10. 10. taller 6 - información y medios digitales Elementos promocionales: espacio dedicado a banners publicitarios o a destacados internos del propio producto. }grafican martes 3 de septiembre de 2013
  11. 11. características martes 3 de septiembre de 2013
  12. 12. taller 6 - información y medios digitales Son simples y no tienen distracciones visuales martes 3 de septiembre de 2013
  13. 13. taller 6 - información y medios digitales Pueden ser dibujados a mano o creados con alguna aplicación computacional martes 3 de septiembre de 2013
  14. 14. Cada página o pantalla de una interfaz está representada en 1 wireframe martes 3 de septiembre de 2013
  15. 15. El sistema presenta al usuario caminos. }aplicarla martes 3 de septiembre de 2013
  16. 16. El usuario se mueve a través de estos caminos mediante acciones}aplicarla martes 3 de septiembre de 2013
  17. 17. taller 6 - información y medios digitales martes 3 de septiembre de 2013
  18. 18. taller 6 - información y medios digitales El objetivo del trabajo. Un objetivo bien definido guiará la estructuración de la web y el resultado será un diseño ordenado.} martes 3 de septiembre de 2013
  19. 19. taller 6 - información y medios digitales Elementos simples: páginas, documentos y pilas de éstos martes 3 de septiembre de 2013
  20. 20. taller 6 - información y medios digitales Creando relaciones: conectores y flechas martes 3 de septiembre de 2013
  21. 21. taller 6 - información y medios digitales 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. martes 3 de septiembre de 2013
  22. 22. taller 6 - información y medios digitales 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). martes 3 de septiembre de 2013
  23. 23. taller 6 - información y medios digitales 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. martes 3 de septiembre de 2013
  24. 24. 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). martes 3 de septiembre de 2013
  25. 25. 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. martes 3 de septiembre de 2013
  26. 26. 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. martes 3 de septiembre de 2013
  27. 27. 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. martes 3 de septiembre de 2013
  28. 28. http://www.jjg.net/ia/visvocab/spanish.html mapa de garrett }martes 3 de septiembre de 2013

×