• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Prototipos y wireframes en el diseño de interacción
 

Prototipos y wireframes en el diseño de interacción

on

  • 13,678 views

Procesos de prototipado para explorar soluciones de diseño y cómo comunicarlas efectivamente. ...

Procesos de prototipado para explorar soluciones de diseño y cómo comunicarlas efectivamente.

http://www.ixda.com.ar/eventos/prototipos-wireframes-diseno-de-interaccion/

* ¿Qué es un prototipo?
* ¿Por qué prototipar?
* Ideación vs. evaluación. Iteración. Pensar en papel.
* Insumos y competencias. ¿Qué necesito?
* Tipos de prototipo, aplicaciones y ejemplos.
* Bocetos, wireframes, pruebas de concepto, pilotos, simulaciones.
* ¿Qué muestro, y cómo? Elección del tipo de prototipo adecuado.
* Cómo encarar la hoja en blanco
* Consejos. Errores comunes.

Statistics

Views

Total Views
13,678
Views on SlideShare
13,184
Embed Views
494

Actions

Likes
26
Downloads
300
Comments
5

16 Embeds 494

http://www.ixda.com.ar 156
http://76440proyecto.webnode.es 134
http://batanfyi.wpengine.com 63
http://www.3wstudio.com.ar 44
https://twitter.com 32
http://www.slideshare.net 14
http://www.linkedin.com 10
http://unblogdediseno.blogspot.com 10
http://gila-design.blogspot.com 10
http://unblogdediseno.blogspot.com.ar 9
http://cms.76440proyecto.webnode.es 4
http://preview.76440proyecto.webnode.es 3
http://www.thehouseofblogs.com 2
http://unblogdediseno.blogspot.com.es 1
http://www.lmodules.com 1
https://www.linkedin.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • QUE BONITO :)
    Are you sure you want to
    Your message goes here
    Processing…
  • me pareció muy acertada ...felicidades!
    Are you sure you want to
    Your message goes here
    Processing…
  • Gracias por tomarte el tiempo de responder mi pregunta, realmente me aclaró la duda :-)
    Are you sure you want to
    Your message goes here
    Processing…
  • Dan, la diapo 50 se refiere a un caso en que el wireframe (izquierda) se hizo en Photoshop, quedando bastante refinado a nivel gráfico en relación a lo habitual de un wireframe (ej un hecho en Visio). A la vez, el diseño visual final (derecha) resultó bastante minimalista.

    Entonces lo que sucedió fue que el cliente pensó que se le estaba 'robando' con el diseño visual, ya que lo percibía como demasiado similar al wireframe.

    'Que no se te vaya la mano', entonces, se refiere a que la fidelidad visual (apariencia) del wireframe no sea demasiado alta, ya que en la percepción del cliente puede confundirse con el diseño visual final.
    Are you sure you want to
    Your message goes here
    Processing…
  • Me encantó. Muy clara y acertada. No entendí la diapo 50. 'Que no se te vaya la mano', en pocos detalles de un wireframe o muchos detalles?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • .

Prototipos y wireframes en el diseño de interacción Prototipos y wireframes en el diseño de interacción Presentation Transcript

  • PROTOTIPOS Y WIREFRAMES EN EL DISEÑO DE INTERACCIÓN Manuel Razzari, José Allona 2014 – Primera Jornada Abierta de UXD, Escuela Superior Técnica 2009 – Seminario de IxDA Buenos Aires, Microsoft Argentina
  • SUMARIO ¿Qué es un prototipo? ¿Por qué prototipar? Competencias. ¿Qué necesito? Tipos de prototipo, aplicaciones, y ejemplos Elección del prototipo adecuado Cómo encarar la hoja en blanco Consejos y errores comunes.
  • ¿QUÉ ES UN PROTOTIPO?
  • El prototipo es una herramienta que le permite a los diseñadores explorar, comunicar y evaluar sus ideas.
  • IDEACIÓN (EXPLORACIÓN) El prototipado es un proceso iterativo que externaliza las ideas del diseñador y le permite explorar y reflexionar sobre ellas.
  • El prototipo es un medio para que el diseñador dialogue sobre sus ideas. COMUNICACIÓN
  • El prototipo es la representación de una idea que puede ser puesta a prueba en un contexto. EVALUACIÓN
  • IDEACIÓN VS EVALUACIÓN El prototipo no para probar una solución sino para descubrir problemas, o para explorar nuevas direcciones.
  • IDEACIÓN “Externalizar las ideas para que el mundo pueda contestarnos” Bill Buxton, Sketching the user experience http://amzn.com/0123740371
  • ITERACIÓN http://www.uie.com/articles/anatomy_iteration/
  • ITERACIÓN Bill Buxton, Sketching the user experience http://amzn.com/0123740371
  • ITERACIÓN Bill Buxton, Sketching the user experience http://amzn.com/0123740371
  • ¿DE QUÉ ESTÁ HECHO UN PROTOTIPO?
  • Youn-Kyung Lim Creative Interaction Design Lab Youn-Kyng Lim, Anatomy of prototypes, ACM TOCHI, http://goo.gl/igcGEj
  • “Prototipar es una actividad para crear una manifestación que, en su forma más simple, filtre los atributos en que los diseñadores están interesados, sin distorsionar el entendimiento del todo.”
  • PROTOTIPO COMO MANIFESTACIÓN Material Alcance Fidelidad
  • MATERIAL
  • ALCANCE
  • FIDELIDAD
  • PROTOTIPO COMO FILTRO Apariencia Información Interacción Estructura espacial Funcionalidad
  • APARIENCIA
  • INFORMACIÓN
  • INTERACCIÓN
  • ESTRUCTURA ESPACIAL
  • FUNCIONALIDAD
  • PRINCIPIO DE ECONOMÍA “El mejor prototipo es el que de forma más sencilla y eficiente hace visibles y medibles las posibilidades de una idea.”
  • TIPOS DE PROTOTIPO En papel Wireframe (baja y alta fidelidad) Diseño visual Prueba de concepto Pilotos Simulaciones
  • PROTOTIPO EN PAPEL Muestro la estructura espacial, la funcionalidad, la interactividad. La fidelidad está muy lejos del producto final, y esto lo hace muy atractivo para opinar, para coolaborar, para probar rápidamente conceptos generales. MATERIAL: PAPEL ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD
  • WIREFRAME DE BAJA FIDELIDAD Qué muestro: estructura espacial, a grandes rasgos cuál es el contenido Cómo lo muestro: en este caso una sola pantalla, con poco detalle, para empezar a ver de qué estamos hablando. MATERIAL: VISIO ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD
  • WIREFRAME DE ALTA FIDELIDAD Muestro información, estructura, funcionalidad, y un poco de interactividad. Todo esto me cambia el cómo lo muestro: es una pantalla con alto nivel de detalle. MATERIAL: VISIO ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD
  • ESCENARIO MATERIAL: PHOTOSHOP ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD
  • REFERENCIA DE ESTILO El lado B del wireframe. Foco total en el diseño visual. El resto puede ser simulado. Mediante colores, tipografías y elementos de interfaz, define la dirección de la identidad visual. MATERIAL: PHOTOSHOP ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD http://styletil.es/
  • DISEÑO VISUAL Ya tenemos altísima fidelidad en la apariencia, se refinan temas que ya se vieron antes en el proceso, de estrucutra espacial, feedback visual de la interacción. Pero el foco es en lo visual. MATERIAL: PHOTOSHOP ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD
  • COMPETENCIAS Conocer las reglas y convenciones del medio para el que trabajo. La capacidad de implementar los atributos que nos interesa explorar.
  • CONSEJOS
  • EMPEZAR EN PAPEL Se puede cambiar rápidamente. Se puede criticar, porque no parece final. Se presta a jugar, a explorar. Sugiere, propone, cuestiona. Menos distancia entre la idea y la representación.
  • EMPEZAR EN PAPELITOS Trabajar en servilletas, en pequeños blocs, nos crea restricciones que nos ayudan a focalizarnos en la idea global y a generar soluciones simples.
  • COLGAR EN LA PARED
  • COLGAR EN LA PARED
  • TEXTO COMO INTERFAZ
  • APARIENCIA Que no se te vaya la mano
  • MANTENIBILIDAD Usar plantillas, header y footer. Mantener un historial de revisiones o “log”.
  • EL PROTOTIPO NO ES FINAL!
  • FOCO No pedirle demasiado al prototipo… · Que levante y valide requerimientos · Que genere ideas · Que comunique al equipo · Que se testee con usuarios Opción: focalizar las reuniones
  • QUÉ GANO? Tiempo Salud Ideas Cohesión $!
  • MUCHAS GRACIAS! @mrazzari @joseallona goo.gl/Q7wchr