APRENDIENDO A DISEÑAR PARA MEDIOS INTERACTIVOS

Eugenia Casabona@eugecas

Líder de UX en almundo.com

---

ecasabona@gmail.com

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