MOOC UxIxD

Semana 3: IxD

(c) V.M.G.B. 2015 - Galileo University

InteraXion Design (IxD)
Ando diseando
 Future Interaction Design

La tecnologa de Realidad
Aumentada (Augmented
Reality, AR) no es un mito, es
una realidad!

http://www.allround-pc.com/wp-content/uploads/2015/01/Microsoft-HoloLens.jpg
Future Interaction Design

Augmented Reality by v.m.garcia-barrios - proyecto cuas.ar (2011-2013)

 Diseo de interaccin

Ejemplo:
good old telephone

http://ep.yimg.com/ca/I/yhst-24936182256914_2272_18681435
y
http://www.beatriceco.com/bti/porticus/bell/images/dreyfuss_handset_prototypes.jpg
 Diseo

La teora del color http://paper-leaf.com/blog/2010/01/color-theory-quick-reference-poster/

(y significados)
 Diseo

La psicologa del color

(y efectos)

http://positivemed.com/wp-content/uploads/2013/06/The-psychology-
of-Color.png

Ver tambin: http://visual.ly/the-psychology-of-color

 Diseo

La rueda de color accesible!

Accessible Color Wheel:

http://gmazzocato.altervista.org/colorwheel/wheel.php
 Diseo

Combinan bien estos dos colores?

La respuesta (para casos sencillos o abstractos), con esta

herramienta online:
http://www.materialpalette.com
 Diseo

Los principios del Diseo:

elementos bsicos y layout.
 Diseo

Recordatorio:
Los elementos del diseo http://paper-leaf.com/blog/2011/02/elements-of-design-quick-reference-sheet/

(los elementos bsicos)

 Diseo

Recordatorio:
Los principios del diseo
(layout)
http://paper-leaf.com/blog/2012/10/principles-of-design-quick-reference-poster/
 Diseo

Uso de colores en el
diseo visual

Sombra y luz: para crear

profundidad

Colores clidos (p.ej. rojo,

amarillo): para manejar http://usabilitypost.com/2008/08/14/using-light-
color-and-contrast-effectively-in-ui-design/
enfoques

Adems, los colores clidos

parecen ser ms brillantes, y
estar ms cercanos!

Contraste: para atraer la

atencin
 Diseo de Interfaces de Usuario
Algunos elementos

Input controls: p.ej. checkbox, radio button, dropdown list, list box, button, toggle, text
field, date field,..

Navigational components: breadcrumb, slider, search field, pagination, slider, tags, icons

Informational components: tooltip, progress bar, notifications, message box,..

Containers: accordion,..

Diseo de los elementos del interfaz es una cosa y el diseo visual es otra!

Web UI Kits: diseo visual

Web UI Libraries: implementacin

Ver p.ej.:

http://jqueryui.com/demos/

http://getbootstrap.com/components/
 Diseo mvil

Diseando para
touch (toque): interfaces
para interaccin tactil!

ojo con el back button!

Windows y Android phones

tienen un back button en
el hardware. iPhone no.

Atencin: los nuevos

Androids ya no tienen el
butn de men en el
hardware.
 Diseo mvil

Diseando para
touch (toque): interfaces
para interaccin tactil!

teasing: p.ej. carrusel

http://blog.theshoppad.com/2013/03/the-visual-language-of-designing-for-touch/
 Diseo mvil

Diseando para
touch (toque): interfaces
para interaccin tactil!
animation: pistas de uso
demo: http://www.lovethispic.com/
uploaded_images/11750-Slide-To-
Unlock.gif?1

con animacin p.ej. slide to

unlock