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

1. Hablemos un poco de
Arquitectura de Información y Wireframes

2. Hablemos un poco de
¿Qué es Arquitectura de Información? Arquitectura de Información y Wireframes

3. Hablemos un poco de
¿Qué es Arquitectura de Información? Arquitectura de Información y Wireframes

4. Hablemos un poco de
¿Qué es Arquitectura de Información? Arquitectura de Información y Wireframes

5. Hablemos un poco de
¿Dónde se Ubica? Arquitectura de Información y Wireframes

6. Hablemos un poco de
¿Dónde se Ubica? Arquitectura de Información y Wireframes

7. Hablemos un poco de
¿Qué hace un Arquitecto de Información? Arquitectura de Información y Wireframes

8. Hablemos un poco de
¿Qué hace un Arquitecto de Información? Arquitectura de Información y Wireframes

9. Hablemos un poco de
¿Qué hace un Arquitecto de Información? Arquitectura de Información y Wireframes

10. Hablemos un poco de
¿Qué hace un Arquitecto de Información? Arquitectura de Información y Wireframes

11. Hablemos un poco de
¿Qué hace un Arquitecto de Información? Arquitectura de Información y Wireframes

12. Hablemos un poco de
¿Cómo llegamos a ella? Arquitectura de Información y Wireframes

13. Hablemos un poco de
Ejemplo Arquitectura de Información y Wireframes

14. Hablemos un poco de
Ejemplo Arquitectura de Información y Wireframes

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. 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. Hablemos un poco de
Es 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. Hablemos un poco de
Es 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. 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. 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. 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. 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. Hablemos un poco de
¿Guías Visuales? Arquitectura de Información y Wireframes
Son estructuras simples conformados principalmente de líneas y cajas

24. Hablemos un poco de
¿Guías Visuales? Arquitectura de Información y Wireframes
Están diseñados en escala de grises

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. 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. Hablemos un poco de
Guías Visuales Arquitectura de Información y Wireframes
Trata de usar Contenido Real, de lo contrario nuestro buen amigo Lorem Ipsum
¿Lorem ipsum?

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. 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. 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. 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. Gracias :)
Rodrigo Vera @rots
Diseño de Experiencia de Usuario