![Page 1: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/1.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes
![Page 2: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/2.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes¿Qué es Arquitectura de Información?
![Page 3: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/3.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes¿Qué es Arquitectura de Información?
![Page 4: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/4.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes¿Qué es Arquitectura de Información?
![Page 5: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/5.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes¿Dónde se Ubica?
![Page 6: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/6.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes¿Dónde se Ubica?
![Page 7: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/7.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes¿Qué hace un Arquitecto de Información?
![Page 8: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/8.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes¿Qué hace un Arquitecto de Información?
![Page 9: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/9.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes¿Qué hace un Arquitecto de Información?
![Page 10: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/10.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes¿Qué hace un Arquitecto de Información?
![Page 11: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/11.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes¿Qué hace un Arquitecto de Información?
![Page 12: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/12.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes¿Cómo llegamos a ella?
![Page 13: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/13.jpg)
Hablemos un poco de Arquitectura de Información y WireframesEjemplo
![Page 14: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/14.jpg)
Hablemos un poco de Arquitectura de Información y WireframesEjemplo
![Page 15: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/15.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes
Conceptualización AI Benchmark
Entender y comprender al cliente y su negocio
Jerarquía y ordenamiento general de los Contenidos del proyecto
Buenas Prácticas, análisis de Competencia,
ProductosServicios La empresa
LimpioAtractivoFuncional
Resaltamos
Wireframe
Nos encontramos acá
¿Qué es un Wireframe?
![Page 16: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/16.jpg)
Hablemos un poco de 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.
¿Qué es un Wireframe?
![Page 17: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/17.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes
El Wireframe es el puente que une la Arquitectura de Información y el Diseño.Pasa de la “mentalidad estructural” de 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
Diseño de interfaz
Desarrollo
Es un Puente
![Page 18: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/18.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes
El Wireframe es el puente que une la Arquitectura de Información y el Diseño.Pasa de la “mentalidad estructural” de 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
Diseño de interfaz
Desarrollo
Wireframes
Es un Puente
![Page 19: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/19.jpg)
Hablemos un poco de 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.
¿Relación con Diseño?
![Page 20: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/20.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes
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
_<
Productividad_ <
Costos
¿Porqué hacerlos?
![Page 21: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/21.jpg)
Hablemos un poco de 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.
¿Y además?
![Page 22: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/22.jpg)
Hablemos un poco de 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
¿Porqué hacerlos?
![Page 23: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/23.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes
Son estructuras simples conformados principalmente de líneas y cajas
¿Guías Visuales?
![Page 24: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/24.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes
Están diseñados en escala de grises
¿Guías Visuales?
![Page 25: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/25.jpg)
Hablemos un poco de 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
¿Guías Visuales?
![Page 26: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/26.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes
Usar solamente una familia tipográfica, de preferencia de sistema
1234567890¿?abcdefghijklmnñopqrstuvwxyz
¿Guías Visuales?
![Page 27: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/27.jpg)
Hablemos un poco de Arquitectura de Información y WireframesGuías Visuales
Trata de usar Contenido Real, de lo contrario nuestro buen amigo Lorem Ipsum
¿Lorem ipsum?
![Page 28: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/28.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes
Trata de usar guías o notas visuales para explicar una interacción (sobre todo Wireframes Funcionales)
¿Guías Visuales?
![Page 29: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/29.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes
Trata de usar guías o notas visuales para explicar una interacción (móvil)
¿Guías Visuales?
![Page 30: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/30.jpg)
Hablemos un poco de 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
¿Guías Visuales?
![Page 31: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/31.jpg)
Hablemos un poco de Arquitectura de Información y Wireframes
FireworksOmnigraffleMicrosoftAxureBalsamiqKeynote
Apliacionesescritorio
Apliacionesweb
HotglooiplotzBalsamiqCacoo
Algunos ejemplos de Aplicaciones para realizar Wireframes
¿Aplicaciones?
![Page 32: Hablemos un poco de Arquitectura de Información y Wireframes](https://reader033.vdocuments.co/reader033/viewer/2022050613/5593861a1a28ab8a058b46f1/html5/thumbnails/32.jpg)
Gracias :) Rodrigo Vera @rotsDiseño de Experiencia de Usuario