6 presentación taller ux - patrones y prototipado 2017
TRANSCRIPT
APRENDIENDO A DISEÑAR PARA MEDIOS INTERACTIVOS
Con el apoyo de
Este obra está bajo una licencia deCreative Commons Reconocimiento 4.0 Internacional
DISEÑO DE INTERACCIÓN
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
Con el apoyo de
Este obra está bajo una licencia deCreative Commons Reconocimiento 4.0 Internacional
PATRONES DE DISEÑO
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
CÓMO IDENTIFICAMOS UN PATRÓN
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.
EN SÍNTESIS….
Se trata de NO
reinventar la rueda
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
ALGUNOS EJEMPLOS
TABS
AUTOCOMPLETE
MODAL
PESTAÑAS
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone
LISTAS
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone
LISTAS DE EDICION
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone
MENÚ DE CAJÓN
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone
ACCIONES
Fuente: Diseñando Apps para Móviles - Javier Cuello y José Vittone
MATERIAL DESIGN
IOS
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
CÓMO DISEÑAMOS INTERACCIONES
CREANDO PROTOTIPOS
Es una versión
preliminar de un diseño.
PROTOTIPO
Permiten explorar
nuestras ideas antes de
invertir tiempo y dinero
en el desarrollo.
PARA PODER FALLAR BARATO
Ya que no hay nada más barato que fallar rápido y aprender del proceso
SKETCH
Estadíos / Evolución de un prototipo
WIREFRAME MOCK-UP DEVELOP
SKETCH - Es la primer bajada visual de la idea.
WIREFRAME - Muestra la AI y el IXD.
MOCK UP - Es el diseño final
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
FIDELIDAD DE UN PROTOTIPO
¿ALTA O BAJA?
TÉCNICAS Y HERRAMIENTAS
LÁPIZ Y PAPEL
BALSAMIQ
AXURE
INVISIONMARVEL
HERRAMIENTAS
http://www.cooper.com/prototyping-tools
http://www.campusmvp.es/recursos/post/Herramientas-de-prototipado-de-aplicaciones-Web.aspx
RECURSOS PARA STORYBOARD
¿PREGUNTAS?
Seguinos en nuestra comunidad local :)
Se entregarán certificados de asistencia a aquellos que realicen todos los talleres
GRACIAS!
facebook.com/ixdalaplata
@ixdalaplata
ixdalaplata
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