Hablemos un poco de Arquitectura de Información y Wireframes

2,515 views

Published on

Introducción a la Arquitectura de Información y consideraciones para hacer Wireframes posteriormente.

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

No Downloads
Views
Total views
2,515
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
102
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Hablemos un poco de Arquitectura de Información y Wireframes

    1. 1. Hablemos un poco deArquitectura de Información y Wireframes
    2. 2. Hablemos un poco de¿Qué es Arquitectura de Información? Arquitectura de Información y Wireframes
    3. 3. Hablemos un poco de¿Qué es Arquitectura de Información? Arquitectura de Información y Wireframes
    4. 4. Hablemos un poco de¿Qué es Arquitectura de Información? Arquitectura de Información y Wireframes
    5. 5. Hablemos un poco de¿Dónde se Ubica? Arquitectura de Información y Wireframes
    6. 6. Hablemos un poco de¿Dónde se Ubica? Arquitectura de Información y Wireframes
    7. 7. Hablemos un poco de¿Qué hace un Arquitecto de Información? Arquitectura de Información y Wireframes
    8. 8. Hablemos un poco de¿Qué hace un Arquitecto de Información? Arquitectura de Información y Wireframes
    9. 9. Hablemos un poco de¿Qué hace un Arquitecto de Información? Arquitectura de Información y Wireframes
    10. 10. Hablemos un poco de¿Qué hace un Arquitecto de Información? Arquitectura de Información y Wireframes
    11. 11. Hablemos un poco de¿Qué hace un Arquitecto de Información? Arquitectura de Información y Wireframes
    12. 12. Hablemos un poco de¿Cómo llegamos a ella? Arquitectura de Información y Wireframes
    13. 13. Hablemos un poco deEjemplo Arquitectura de Información y Wireframes
    14. 14. Hablemos un poco deEjemplo Arquitectura de Información y Wireframes
    15. 15. Hablemos un poco de¿Qué es un Wireframe? Arquitectura de Información y Wireframes Nos encontramos acá Conceptualización AI Benchmark Wireframe Entender y comprender Jerarquía y ordenamiento Buenas Prácticas, al cliente y su negocio general de los Contenidos análisis de del proyecto Competencia, Resaltamos Productos Limpio Servicios Atractivo La empresa Funcional
    16. 16. Hablemos un poco de¿Qué es un Wireframe? Arquitectura de Información y Wireframes 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.
    17. 17. Hablemos un poco deEs un Puente Arquitectura de Información y Wireframes Desarrollo El Wireframe es el puente que une la Arquitectura de Información y el Diseño. Pasa de la “mentalidad estructural” de Diseño de interfaz un árbol de contenidos, dónde decidimos y ordenamos los contenidos de nuestro sitio web, a la emocionalidad del Diseño de Interfaz.  Arquitectura de información Estrategia
    18. 18. Hablemos un poco deEs un Puente Arquitectura de Información y Wireframes Desarrollo El Wireframe es el puente que une la Arquitectura de Información y el Diseño. Pasa de la “mentalidad estructural” de Diseño de interfaz un árbol de contenidos, dónde decidimos y ordenamos los contenidos de nuestro sitio web, a la emocionalidad del Diseño de Wireframes Interfaz.  Arquitectura de información Estrategia
    19. 19. Hablemos un poco de¿Relación con Diseño? Arquitectura de Información y Wireframes Pasar de la AI al Wireframe, compete varios procesos de un desarrollo de interfaz digital. Será importante en esta traducción aspectos estratégicos, definiciones de buenas prácticas del benchmark y la definición de los contenidos. Luego, valiéndonos del árbol de contenidos, podremos plasmar una correcta jerarquía de contenidos en nuestro esquema. 
    20. 20. Hablemos un poco de¿Porqué hacerlos? Arquitectura de Información y Wireframes < _ Productividad La principal ventaja de los Wireframes, es que ofrecen una perspectiva basada solamente en la arquitectura del contenido, obviando el diseño y evitando elementos accidentales que puedan distraer (colores, tipografías, imágenes, textos, etc.). Esto último, ayuda a que el proyecto en desarrollo no se _ _ retrase por falta de definición o que el resultado se aleje < < mucho de lo que se esperaba. Tiempos Costos
    21. 21. Hablemos un poco de¿Y además? Arquitectura de Información y Wireframes Además, son una excelente herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.
    22. 22. Hablemos un poco de¿Porqué hacerlos? Arquitectura de Información y Wireframes Definen qué quiere tu cliente y cuáles son sus objetivos • Permite la comunicación fluida entre el equipo de trabajo y el cliente • Las correcciones son objetivas, basadas en contenidos y funcionalidad Se evitan las discusiones gráficas • Se reducen los tiempos de trabajo y costos • Permiten visualizar interacciones y flujos. • Se pueden identificar tempranamente problemas de Interacción, Usabilidad, Accesibilidad • Como es una estructura simple y enfocada en los contenidos, permite al diseñador tener plena libertad al momento de diseñar la interfaz
    23. 23. Hablemos un poco de¿Guías Visuales? Arquitectura de Información y Wireframes Son estructuras simples conformados principalmente de líneas y cajas
    24. 24. Hablemos un poco de¿Guías Visuales? Arquitectura de Información y Wireframes Están diseñados en escala de grises
    25. 25. Hablemos un poco de¿Guías Visuales? Arquitectura de Información y Wireframes Todos los elementos gráficos (imágenes, marcas, iconos) y de sistema (radio button, dropdown, checkbox) están representados esquemáticamente
    26. 26. Hablemos un poco de¿Guías Visuales? Arquitectura de Información y Wireframes Usar solamente una familia tipográfica, de preferencia de sistema 1234567890¿? abcdefghijklmn ñopqrstuvwxyz
    27. 27. Hablemos un poco deGuías Visuales Arquitectura de Información y Wireframes Trata de usar Contenido Real, de lo contrario nuestro buen amigo Lorem Ipsum ¿Lorem ipsum?
    28. 28. Hablemos un poco de¿Guías Visuales? Arquitectura de Información y Wireframes Trata de usar guías o notas visuales para explicar una interacción (sobre todo Wireframes Funcionales)
    29. 29. Hablemos un poco de¿Guías Visuales? Arquitectura de Información y Wireframes Trata de usar guías o notas visuales para explicar una interacción (móvil)
    30. 30. Hablemos un poco de¿Guías Visuales? Arquitectura de Información y Wireframes Simple sobre todas las cosas • Usa la mayor cantidad de contenido real posible • Siempre trabaja en escala de grises • Evita usar imágenes, logos e iconografía • No te limites a usar una aplicación digital, ¡dibuja! • Define muy bien la estrategia y los contenidos antes de empezar • Siempre haz wireframes antes de diseñar Explica las zonas e interacciones • Discute los wireframes con tu equipo de trabajo • Corrige problemas detectados en wireframes, no en diseño
    31. 31. Hablemos un poco de¿Aplicaciones? Arquitectura de Información y Wireframes Algunos ejemplos de Aplicaciones para realizar Wireframes Apliaciones Apliaciones escritorio web Fireworks Hotgloo Omnigraffle iplotz Microsoft Balsamiq Axure Cacoo Balsamiq Keynote
    32. 32. Gracias :)Rodrigo Vera @rotsDiseño de Experiencia de Usuario

    ×