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¿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¿Cómo llegamos a ella?

Hablemos un poco de Arquitectura de Información y WireframesEjemplo


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?


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?


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


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


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?


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?


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?


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?


Son estructuras simples conformados principalmente de líneas y cajas

¿Guías Visuales?


Están diseñados en escala de grises

¿Guías Visuales?


Todos los elementos gráficos (imágenes, marcas, iconos) y de sistema (radio button, dropdown, checkbox) están representados esquemáticamente

¿Guías Visuales?


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?


Trata de usar guías o notas visuales para explicar una interacción (sobre todo Wireframes Funcionales)

¿Guías Visuales?


Trata de usar guías o notas visuales para explicar una interacción (móvil)

¿Guías Visuales?


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?


FireworksOmnigraffleMicrosoftAxureBalsamiqKeynote

Apliacionesescritorio

Apliacionesweb

HotglooiplotzBalsamiqCacoo

Algunos ejemplos de Aplicaciones para realizar Wireframes

¿Aplicaciones?

http://www.hotgloo.com/

http://www.hotgloo.com/

http://iplotz.com/

http://iplotz.com/

http://balsamiq.com/

http://balsamiq.com/

http://www.adobe.com/products/fireworks/

http://www.adobe.com/products/fireworks/

http://www.omnigroup.com/products/omnigraffle/




http://office.microsoft.com/en-us/visio/






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

Hablemos un poco de Arquitectura de Información y Wireframes

Design

Transcript of Hablemos un poco de Arquitectura de Información y Wireframes