Your SlideShare is downloading. ×
0
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Wireframes

1,154

Published on

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,154
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. wireframes presentación y diagramación de contenidos para la pantalla taller_medialunes 3 de septiembre de 2012
  2. diseño de la información card sorting - blueprints - wireframeslunes 3 de septiembre de 2012
  3. taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  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. } wireframe taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  5. 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. } wireframe taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  6. para qué nos sirve?lunes 3 de septiembre de 2012
  7. Elementos de navegación: menús, accesos directos e hipervínculos. } grafican taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  8. Elementos de información: contenidos de texto e imágenes. } grafican taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  9. Elementos de interacción: herramientas o funcionalidades que el usuario puede realizar. } grafican taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  10. Elementos promocionales: espacio dedicado a banners publicitarios o a destacados internos del propio producto. } grafican taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  11. característicaslunes 3 de septiembre de 2012
  12. Son simples y no tienen distracciones visuales taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  13. Pueden ser dibujados a mano o creados con alguna aplicación computacional taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  14. Cada página o pantalla de una interfaz está representada en 1 wireframe taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  15. El sistema presenta al usuario caminos. } aplicarla taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  16. El usuario se mueve a través de estos caminos mediante acciones } aplicarla taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  17. taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  18. 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 digitaleslunes 3 de septiembre de 2012
  19. Elementos simples: páginas, documentos y pilas de éstos taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  20. Creando relaciones: conectores y flechas taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  21. 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 digitaleslunes 3 de septiembre de 2012
  22. 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 digitaleslunes 3 de septiembre de 2012
  23. 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 digitaleslunes 3 de septiembre de 2012
  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).lunes 3 de septiembre de 2012
  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. taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  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. taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  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. taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  28. http://www.jjg.net/ia/visvocab/spanish.html } mapa de garrett taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  29. encargo 2 visualización técnica taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  30. considerar Habiendo desarrollado las duplas la definición del sitio web a analizar y determinando el objetivo trazado, se debe estructurar de manera formal la presentación del contenido del sitio. Proyectar el contenido del sitio a un blueprint de modo de reconocer la estructura de contenidos, rótulos y jerarquías de navegación. taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  31. etapas 1. Construir basados en el mapa de garrett la estructura de contenidos y rótulos del sitio 2. Destacar cual es el “camino” que el usuario debe reconocer como el mas relevante para lograr el objetivo del sitio 3. Revisar si existe mas de un modo de realizar el objetivo y si existe información complementaria en el sitio para cumplir dicho objetivo taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  32. diseño de documento Reconociendo la(s) ruta(s) del usuario para lograr el objetivo, realizar tarjetas para estructurar un rediseño de la información por medio de un card sorting Dejar registro de cada una de las alternativas Realizar la metodología del cardsorting con personas que se encuentren dentro de las características de su público objetivo. Registrar la mayor cantidad de datos de las personas participantes para un posterior análisis de usuario taller 6 - información y medios digitaleslunes 3 de septiembre de 2012
  33. graficar la estructura 1. Crear modelos de wireframe de cada una de las páginas que actualmente permiten lograr el objetivo del sitio por medio de la ruta estipulada IMPORTANTE: se debe de utilizar la métrica real de la composición actual de los documentos taller 6 - información y medios digitaleslunes 3 de septiembre de 2012

×