Successfully reported this slideshow.
Intro sobre Arquitecturade Información y uso de        wireframe
Arquitectura deInformación (AI)La Arquitectura de Información considera laorganización y estructura, jerarquía y etiquetac...
Componentes de la AIUn enfoque tradicional de la AI está dado por el librodel oso («Information Architecture for the World...
Componentes de la AI(cont.)En este libro se menciona que una arquitectura deinformación se puede caracterizar por sus:Sist...
Componentes de la AI (cont.)Como sus nombres lo dicen, de lo quedebemos estar conscientes cuando estemosinmersos en un pro...
PersonasPara focalizar las decisiones de diseño en elusuario y evitar caprichos o criterios propiosmuy arraigados, podemos...
Taxonomía del contenidoCuando intentamos organizar el contenido,categorizarlo, caracterizarlo o como gustemosllamarlo, ten...
EscenariosLos escenarios por su naturaleza narrativa nospueden ayudar a conformar en la cabeza cómo seda el flujo de trabaj...
Análisis de tareasPara concretar y dejar por sentado cómo seestán dando los flujos de trabajo esnecesario entender y determ...
Generar la arquitecturaCuando ya se conoce a las Personas ysus escenarios y cómo se dan los flujosde trabajo en el sistema ...
Elaboración del mapa del aplicativoEl concepto de mapa deaplicativo se asocia realmente,a aplicativos web, aunquepuede gen...
Elaboración de WireFrameEl wireframe o marco alambrado es una representaciónvisual de cómo queda distribuida la informació...
INFORMATION ARCHITECTURE FOR THE WORLD WIDE                   WEB.    PETER MORVILLE AND LOUIS ROSENFELD.
INFORMATION ARCHITECTURE FOR THE WORLD WIDE                   WEB.    PETER MORVILLE AND LOUIS ROSENFELD.
INFORMATION ARCHITECTURE FOR THE WORLD WIDE                   WEB.    PETER MORVILLE AND LOUIS ROSENFELD.
Recursos para la elaboración de          wireframes http://webdesignledger.com/freebies/10-free-printable-web-design- wire...
Upcoming SlideShare
Loading in …5
×

Wireframe 01

634 views

Published on

  • Be the first to comment

Wireframe 01

  1. 1. Intro sobre Arquitecturade Información y uso de wireframe
  2. 2. Arquitectura deInformación (AI)La Arquitectura de Información considera laorganización y estructura, jerarquía y etiquetación enun producto de información, ya sea un sitio web, unaaplicación para móviles, un periódico, un diccionarioo incluso un punto de venta.
  3. 3. Componentes de la AIUn enfoque tradicional de la AI está dado por el librodel oso («Information Architecture for the World WideWeb») de Peter Morville y Louis Rosenfeld (O’Reilly).
  4. 4. Componentes de la AI(cont.)En este libro se menciona que una arquitectura deinformación se puede caracterizar por sus:Sistemas de organización.Sistemas de navegación.Sistemas de búsqueda.Sistemas de etiquetado.
  5. 5. Componentes de la AI (cont.)Como sus nombres lo dicen, de lo quedebemos estar conscientes cuando estemosinmersos en un proceso de arquitectura deinformación es de: ORGANIZARCómo organizar la información. Todo elcontenido que va en el sitio web, la aplicación, DETERMINAR LArevista, etc. ESTRUCTURAR LA RECUPERACIÓN DE NAVEGACIÓN INFORMACIÓNCómo definir cuáles serán los medios o formasque empleará el usuario para moverse dentro ETIQUETARdel contenido, un «espacio» a la vez.Cómo definir la forma en la que el usuario podrárecuperar información.Determinar cuáles son los términos ovocabulario adecuado para etiquetar o nombrarel contenido.
  6. 6. PersonasPara focalizar las decisiones de diseño en elusuario y evitar caprichos o criterios propiosmuy arraigados, podemos escoger elmétodo de Personas (de Alan Cooper).En sí se trata de elaborar perfiles querepresentan al arquetipo de los usuarios deun producto de diseño.Además de ser básico el darle vida alpersonaje siempre debemos tomar encuenta la meta de uso: ¿qué meta quierecumplir la Persona?En adición, las Personas al querer cumplircon algo, tienen a su vez escenarios quedescriben tareas o metas por cumplir.
  7. 7. Taxonomía del contenidoCuando intentamos organizar el contenido,categorizarlo, caracterizarlo o como gustemosllamarlo, tendemos a crear una estructura rígidapara dividir semánticamente la información.Podemos decir que hacemos una taxonomíacon el contenido.En un principio, con la ayuda de la o lasPersonas creadas, necesitamos explayarnos yespecificar el contenido potencial del producto.Aquí podemos aplicar un ejercicio de freelisting.Luego, podemos relacionar el contenidomediante mapas de afinidad o con un ejerciciode card sorting. La estructura resultante nos dauna idea de cómo está organizada lainformación, aunque no necesariamentepodríamos definir nuestra estructura denavegación de la misma manera.
  8. 8. EscenariosLos escenarios por su naturaleza narrativa nospueden ayudar a conformar en la cabeza cómo seda el flujo de trabajo o las interacciones básicas conel producto que vamos a diseñar. En este sentido,funcionan como una herramienta de diseño.Los escenarios pueden servir como herramienta deevaluación. Cuando realizamos una prueba deusabilidad sobre nuestro producto diseñado, elescenario será el camino que el participante seguirá.
  9. 9. Análisis de tareasPara concretar y dejar por sentado cómo seestán dando los flujos de trabajo esnecesario entender y determinar cuáles sonlas acciones que la o las Personas puedenllevar a cabo dentro de éstos. Esto es,analizar las tareas asociadas a eseescenario.Conforme vamos narrando el escenariopodemos ir detectando cuáles son los pasosque debe seguir el usuario, así hastaterminar la narración. Luego, para cada pasose desglosa en sus sub-pasos o sub-tareas.Con este desglose se pueden explicar lasacciones del usuario y la respuesta del INFORMATION ARCHITECTURE. BLUEPRINTS FOR THEsistema. Lo anterior es útil de colocar en una WEB. CHRISTINA WODTKE AND AUSTIN GOVELLA.tabla o bien, armar un diagrama. NEW RIDERS, 2009.
  10. 10. Generar la arquitecturaCuando ya se conoce a las Personas ysus escenarios y cómo se dan los flujosde trabajo en el sistema o producto através de un análisis de tareas tomando ORGANIZARen cuenta que entendemos cómo seestructura semánticamente elcontenido, se tiene una gran idea de lo DETERMINAR LA ESTRUCTURAR LA RECUPERACIÓNque se necesita. El cómo ensamblar NAVEGACIÓN DE INFORMACIÓNestas ideas es la generación de laarquitectura de información. ETIQUETAREn este punto se tiene que tenerconsciencia de qué implica constituirpara el contenido un sistema deorganización, navegación, etiquetado yquizá de búsqueda, que resultenadecuados para el contexto delproyecto.
  11. 11. Elaboración del mapa del aplicativoEl concepto de mapa deaplicativo se asocia realmente,a aplicativos web, aunquepuede generalizarse la ideapara mostrar cómo estáestructurado el contenido delsistema o producto deinformación a partir degrandes bloques, cómo éstos INFORMATION ARCHITECTURE. BLUEPRINTS FOR THEse interrelacionan (i.e. cómo WEB.navegarlos) y cuáles fueron CHRISTINA WODTKE AND AUSTIN GOVELLA. NEW RIDERS, 2009.los términos seleccionadospara etiquetarlos.
  12. 12. Elaboración de WireFrameEl wireframe o marco alambrado es una representaciónvisual de cómo queda distribuida la información delcontenido en adición con los componentes (i.e. loswidgets) que permiten la interacción con el sistema oproducto de información que diseñamos.A un bajo nivel de fidelidad, la forma de la presentacióninvolucra sólo el manejo de blanco y negro o grises a lomás. Debe notarse la jerarquía visual asociada tanto ala información textual como a lo que podría serinformación gráfica; sin embargo la parte gráficabásica se omite en algunos casos.Como apoyo a su entendimiento, los marcos debencontemplar el manejo de call-outs o notas al margen.
  13. 13. INFORMATION ARCHITECTURE FOR THE WORLD WIDE WEB. PETER MORVILLE AND LOUIS ROSENFELD.
  14. 14. INFORMATION ARCHITECTURE FOR THE WORLD WIDE WEB. PETER MORVILLE AND LOUIS ROSENFELD.
  15. 15. INFORMATION ARCHITECTURE FOR THE WORLD WIDE WEB. PETER MORVILLE AND LOUIS ROSENFELD.
  16. 16. Recursos para la elaboración de wireframes http://webdesignledger.com/freebies/10-free-printable-web-design- wireframing-templates http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing- resources/ http://wwwhatsnew.com/2010/03/04/herramientas-para-creacion-de- prototipos-y-wireframes/ http://www.masternewmedia.org/es/2010/06/12/ wireframing_y_prototipos_para_websites_mejores_herramientas.htm http://wireframes.linowski.ca/OMNIGRAF FLE HOTGLOOMICROSOFT VISIO IPLOTZAXURE BALSAMICBALSAMIQ CACOOKEYNOTE

×