Hablemos un poco de Arquitectura de Información y Wireframes

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

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

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

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

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

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

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

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

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

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

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

Hablemos un poco de Arquitectura de Información y WireframesEjemplo

Hablemos un poco de Arquitectura de Información y WireframesEjemplo

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?

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?

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

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

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?

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?

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?

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?

Hablemos un poco de Arquitectura de Información y Wireframes

Son estructuras simples conformados principalmente de líneas y cajas

¿Guías Visuales?

Hablemos un poco de Arquitectura de Información y Wireframes

Están diseñados en escala de grises

¿Guías Visuales?

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?

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?

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?

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?

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?

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?

Hablemos un poco de Arquitectura de Información y Wireframes

FireworksOmnigraffleMicrosoftAxureBalsamiqKeynote

Apliacionesescritorio

Apliacionesweb

HotglooiplotzBalsamiqCacoo

Algunos ejemplos de Aplicaciones para realizar Wireframes

¿Aplicaciones?

Gracias :) Rodrigo Vera @rotsDiseño de Experiencia de Usuario