6 presentación taller ux - patrones y prototipado 2017
TRANSCRIPT
![Page 1: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/1.jpg)
![Page 2: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/2.jpg)
APRENDIENDO A DISEÑAR PARA MEDIOS INTERACTIVOS
![Page 4: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/4.jpg)
Con el apoyo de
Este obra está bajo una licencia deCreative Commons Reconocimiento 4.0 Internacional
DISEÑO DE INTERACCIÓN
![Page 5: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/5.jpg)
Con el apoyo de
Este obra está bajo una licencia deCreative Commons Reconocimiento 4.0 Internacional
El diseño de interacción es el arte de facilitar las interacciones entre las personas mediante productos y servicios.
Dan Saffer - Designing for Interaction
![Page 6: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/6.jpg)
Con el apoyo de
Este obra está bajo una licencia deCreative Commons Reconocimiento 4.0 Internacional
PATRONES DE DISEÑO
![Page 7: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/7.jpg)
DEFINICIÓN
Son la base para la búsqueda de soluciones a problemas
comunes en el desarrollo de software y otros ámbitos referentes
al diseño de interacción o interfaces.
Fuente: https://es.wikipedia.org/wiki/Patr%C3%B3n_de_dise%C3%B1o
![Page 8: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/8.jpg)
CÓMO IDENTIFICAMOS UN PATRÓN
![Page 9: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/9.jpg)
PATRONES
Para que una solución sea considerada un patrón debe poseer
ciertas características. Una de ellas es que debe haber
comprobado su efectividad resolviendo problemas similares en
ocasiones anteriores. Otra es que debe ser reutilizable, lo que
significa que es aplicable a diferentes problemas de diseño en
distintas circunstancias.
![Page 10: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/10.jpg)
EN SÍNTESIS….
![Page 11: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/11.jpg)
Se trata de NO
reinventar la rueda
![Page 12: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/12.jpg)
Los usuarios pasan la mayor parte de su tiempo en otros sitios. Esto significa que ellos prefieren que tu sitio funcione igual que los sitios que ya conocen.
Jacob Nielsen - NNgroup
![Page 13: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/13.jpg)
ALGUNOS EJEMPLOS
![Page 14: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/14.jpg)
TABS
![Page 15: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/15.jpg)
AUTOCOMPLETE
![Page 16: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/16.jpg)
MODAL
![Page 17: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/17.jpg)
PESTAÑAS
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone
![Page 18: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/18.jpg)
LISTAS
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone
![Page 19: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/19.jpg)
LISTAS DE EDICION
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone
![Page 20: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/20.jpg)
MENÚ DE CAJÓN
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone
![Page 21: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/21.jpg)
ACCIONES
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone
![Page 22: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/22.jpg)
MATERIAL DESIGN
![Page 23: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/23.jpg)
IOS
![Page 24: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/24.jpg)
RECURSOShttp://ui-patterns.com/patterns
http://patternry.com/patterns/
http://zurb.com/patterntap
http://www.welie.com/patterns/index.php
https://developer.yahoo.com/ypatterns/
http://www.web-patterns.net/
http://www.smileycat.com/category/elements-of-design/
https://www.flickr.com/photos/factoryjoe/collections/72157600001823120/
http://unitid.nl/androidpatterns/
https://developer.android.com/design/patterns/new.html
![Page 25: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/25.jpg)
CÓMO DISEÑAMOS INTERACCIONES
![Page 26: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/26.jpg)
CREANDO PROTOTIPOS
![Page 27: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/27.jpg)
Es una versión
preliminar de un diseño.
PROTOTIPO
![Page 28: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/28.jpg)
Permiten explorar
nuestras ideas antes de
invertir tiempo y dinero
en el desarrollo.
![Page 29: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/29.jpg)
PARA PODER FALLAR BARATO
![Page 30: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/30.jpg)
Ya que no hay nada más barato que fallar rápido y aprender del proceso
![Page 31: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/31.jpg)
SKETCH
Estadíos / Evolución de un prototipo
WIREFRAME MOCK-UP DEVELOP
![Page 32: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/32.jpg)
SKETCH - Es la primer bajada visual de la idea.
![Page 33: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/33.jpg)
WIREFRAME - Muestra la AI y el IXD.
![Page 34: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/34.jpg)
MOCK UP - Es el diseño final
![Page 35: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/35.jpg)
PROTOTIPAMOS PARA
- Mostrar una idea al equipo- Definir la arquitectura de la
información- Definir niveles de jerarquía- Crear el diseño de interacción- Hacer pruebas con usuarios- Crear el diseño visual
![Page 36: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/36.jpg)
FIDELIDAD DE UN PROTOTIPO
¿ALTA O BAJA?
![Page 37: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/37.jpg)
![Page 38: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/38.jpg)
TÉCNICAS Y HERRAMIENTAS
![Page 39: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/39.jpg)
LÁPIZ Y PAPEL
![Page 40: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/40.jpg)
![Page 41: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/41.jpg)
BALSAMIQ
![Page 42: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/42.jpg)
AXURE
![Page 43: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/43.jpg)
INVISIONMARVEL
![Page 44: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/44.jpg)
HERRAMIENTAS
http://www.cooper.com/prototyping-tools
http://www.campusmvp.es/recursos/post/Herramientas-de-prototipado-de-aplicaciones-Web.aspx
![Page 45: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/45.jpg)
RECURSOS PARA STORYBOARD
![Page 46: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/46.jpg)
![Page 47: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/47.jpg)
![Page 48: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/48.jpg)
![Page 49: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/49.jpg)
![Page 50: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/50.jpg)
![Page 51: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/51.jpg)
¿PREGUNTAS?
![Page 52: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/52.jpg)
Seguinos en nuestra comunidad local :)
Se entregarán certificados de asistencia a aquellos que realicen todos los talleres
GRACIAS!
facebook.com/ixdalaplata
@ixdalaplata
ixdalaplata
![Page 53: 6 Presentación Taller UX - Patrones y Prototipado 2017](https://reader038.vdocuments.pub/reader038/viewer/2022103010/5a6647157f8b9ac10a8b483f/html5/thumbnails/53.jpg)
9ª edição
09, 10 e 11DE NOVEMBRO DE 2017
Centro de Eventos GovernadorLuiz Henrique da Silveira
O maior e mais importante evento de design de interação e experiência do usuário da América Latina.
isa.ixda.org