EN LA CLASE PASADA...
  Usabilidad y Experiencia de usuario.
1.- MENOS ES MÁS
2.- EL SECRETO ESTA EN OBSERVAR
      A NUESTROS USUARIOS
3.- LAS EXPERIENCIAS ESTÁN
        CAMBIANDO
GOOGLE GLASS
CLASE3: WIREFRAMES
  Como diseñamos la información.
¿QUÉ ES DISEÑO DE INFORMACIÓN?
DISEÑO DE INFORMACIÓN

Priorización y presentación de los contenidos que
poseerá un sitio web.

Esta orientada a cumplir los objetivos y tareas que
podrá realizar un usuario. 

El centro esta en LOS CONTENIDOS.
¿CÓMO SE PRESENTA EL DISEÑO DE
        INFORMACIÓN?
WIREFRAMES
¿QUÉ SON LOS WIREFRAMES?
WIKIPEDIA NOS DICE:

"Esquema del diseño de
página u ordenamiento del
contenido del sitio web,
incluyendo elementos de
la interfaz y sistemas de
navegación, y cómo
funcionan en conjunto."
• Plasmarlos resultados de nuestra investigación
 posterior en donde identificamos
 usuarios, definimos un árbol de
 contenidos y buscamos buenas
 prácticas.

• Ordenamiento  y jerarquización de los
 contenidos según la importancia de nuestros
 arquetipos.

• Planteamiento visual y funcional de como se
 vera nuestro sitio en pantalla
Diseño de Interfaz

• Son el paso intermedio entre la
 arquitectura de información y el
 diseño de interfaz.
                                          Wireframes
• Esun diseño más racional, a
 diferencia del de interfaces que es
 más emocional.
                                       Arquitectura de la
                                         información
¿PARA QUÉ SON LOS WIREFRAMES?
¿PARA QUÉ SON LOS WIREFRAMES?


• Visualizar
          una conceptualización de la disposición de los
 contenidos.

• Visualizar   como serian los flujos de interacción de un sitio
 web.

• Para
     comenzar a definir las primeras interacción que
 poseerá la plataforma. .
¿PARA QUÉ SON LOS WIREFRAMES?



• Son el punto para discutir entre los distintos actores que
 están en el proyecto. Estos pueden ser arquitectos de
 información, diseñadores, desarrolladores y clientes
 cuando sea el caso.
¿CÓMO PUEDEN SER LOS
    WIREFRAMES?
• Sencillos  de entender y evitamos distracciones en temas que en esta
    etapa no son de importancia como colores o uso de fotografías.

Clase3: Wireframes

  • 1.
    EN LA CLASEPASADA... Usabilidad y Experiencia de usuario.
  • 2.
  • 3.
    2.- EL SECRETOESTA EN OBSERVAR A NUESTROS USUARIOS
  • 4.
    3.- LAS EXPERIENCIASESTÁN CAMBIANDO
  • 5.
  • 6.
    CLASE3: WIREFRAMES Como diseñamos la información.
  • 7.
    ¿QUÉ ES DISEÑODE INFORMACIÓN?
  • 8.
    DISEÑO DE INFORMACIÓN Priorizacióny presentación de los contenidos que poseerá un sitio web. Esta orientada a cumplir los objetivos y tareas que podrá realizar un usuario. El centro esta en LOS CONTENIDOS.
  • 9.
    ¿CÓMO SE PRESENTAEL DISEÑO DE INFORMACIÓN?
  • 10.
  • 11.
    ¿QUÉ SON LOSWIREFRAMES?
  • 12.
    WIKIPEDIA NOS DICE: "Esquemadel diseño de página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto."
  • 13.
    • Plasmarlos resultadosde nuestra investigación posterior en donde identificamos usuarios, definimos un árbol de contenidos y buscamos buenas prácticas. • Ordenamiento y jerarquización de los contenidos según la importancia de nuestros arquetipos. • Planteamiento visual y funcional de como se vera nuestro sitio en pantalla
  • 14.
    Diseño de Interfaz •Son el paso intermedio entre la arquitectura de información y el diseño de interfaz. Wireframes • Esun diseño más racional, a diferencia del de interfaces que es más emocional. Arquitectura de la información
  • 15.
    ¿PARA QUÉ SONLOS WIREFRAMES?
  • 16.
    ¿PARA QUÉ SONLOS WIREFRAMES? • Visualizar una conceptualización de la disposición de los contenidos. • Visualizar como serian los flujos de interacción de un sitio web. • Para comenzar a definir las primeras interacción que poseerá la plataforma. .
  • 17.
    ¿PARA QUÉ SONLOS WIREFRAMES? • Son el punto para discutir entre los distintos actores que están en el proyecto. Estos pueden ser arquitectos de información, diseñadores, desarrolladores y clientes cuando sea el caso.
  • 18.
    ¿CÓMO PUEDEN SERLOS WIREFRAMES?
  • 24.
    • Sencillos de entender y evitamos distracciones en temas que en esta etapa no son de importancia como colores o uso de fotografías.