Arquitectura De Información

1,399 views
1,237 views

Published on

Una introducción a nivel bien básico de la Arquitectura de Información y su rol en el diseño web.

Esta presentación va de la mano de actividades prácticas.

Published in: Education
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,399
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
102
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Arquitectura De Información

  1. 1. Arquitectura de Información Harold Maduro http://www.flickr.com/photos/wscullin/3770015203/
  2. 2. todos los días somos bombardeados con información. http://www.flickr.com/photos/mynameispaul/384235177/
  3. 3. incluso, en los espacios digitales
  4. 4. ¿Cómo vamos a organizarla?
  5. 5. Arquitectura de Información La Arquitectura de la Información (AI) es la disciplina y arte encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas de información interactivos y no interactivos. wikipedia.org
  6. 6. Arquitectura de Información La Arquitectura de la Información (AI) es el arte y la ciencia de organizar y rotular sitios web, intranets, comunidades en línea y software para promover la usabilidad y encontrabilidad. wikipedia.org
  7. 7. Arquitectura de Información en español La Arquitectura de la Información (AI) busca organizar los sitios web para que sean más fáciles de usar y la información más fácil de encontrar. yo
  8. 8. Debemos estructurar los sitios de tal forma que sean intuitivos de usar. Que la gente encuentre lo que busca. http://jjg.net
  9. 9. Organicemos la estructura del contenido a nivel del sitio entero
  10. 10. Sitemap
  11. 11. Sitemap
  12. 12. Te toca: card sorting.
  13. 13. Ahora, estructuremos la información que va a ir en la página
  14. 14. Wireframes
  15. 15. El wireframe es un prototipo, de cómo se va a ver el sitio una vez diseñado y armado
  16. 16. Hay muchas formas de hacer prototipos
  17. 17. Prototipos Alta fidelidad: diseño visual
  18. 18. Prototipos Baja fidelidad: wireframe
  19. 19. Prototipos Muy baja fidelidad: bosquejo a mano
  20. 20. Lo bueno de los Wireframes es que te permite esforzarte en el detalle de una sóla solución. http://www.flickr.com/photos/24801682@N08/4120093158/
  21. 21. ¿Pero si quieres proponer o explorar varias soluciones? ¿Y si quieres trabajar esto entre varias personas? ¡Probemos otra técnica!
  22. 22. Inspirada en las críticas de diseño http://www.flickr.com/photos/mystandardbreakfromlife/3952642980/
  23. 23. Dibuja tus ideas. http://www.flickr.com/photos/rohdesign/3307873748/
  24. 24. Mezcla muchas ideas.
  25. 25. Comparte con el equipo. http://www.flickr.com/photos/worldeconomicforum/2894023545/
  26. 26. Te toca: ¡a dibujar se ha dicho!
  27. 27. Pre-Kinder de dibujo Re aprendamos a dibujar un rectángulo
  28. 28. El reto no es cómo dibujar; sino, qué dibujar
  29. 29. No es la Monalisa
  30. 30. Evolución de las ideas Dibuja bocetos detallados, en menos cantidades Dibuja bocetos chicos, muchos de ellos http://ugleah.tumblr.com/
  31. 31. Dibuja bocetos chicos, muchos de ellos http://ugleah.tumblr.com/
  32. 32. Muchas ideas, crudas pero variadas http://ugleah.tumblr.com/
  33. 33. dibuja.
  34. 34. Dibuja bocetos detallados, en menos cantidades http://ugleah.tumblr.com/
  35. 35. Mayor detalle de pantallas Énfasis: grosor de línea, sombreado, notas http://ugleah.tumblr.com/
  36. 36. dibuja.
  37. 37. Sketchboard Colaboración: sustenta tu diseño y recibe feedback http://ugleah.tumblr.com/
  38. 38. comparte.
  39. 39. El proceso de creación web es evolutivo.
  40. 40. La evolución empieza desde la fase de planeación. http://www.flickr.com/photos/wscullin/3770015203/
  41. 41. gracias. harold maduro harold@epiphycorp.com tel. (507) 6674.1605

×