El documento presenta una serie de consejos y conceptos clave sobre diseño visual para mejorar la experiencia de usuario (UX). Explica que el diseño visual facilita una buena experiencia al resolver necesidades del usuario de manera estética y comunicativa. También destaca la importancia de enfocarse en el usuario, realizar búsqueda de antecedentes, aplicar principios de composición, tipografía e iconografía de manera coherente.

1. SALVEMOS AL USUARIO
User Experience para diseñadores y desarrolladores

2. Anix
adventures
En esta edición:
¡Me compré un
Tutúuuuuu!!
cualquier semejanza con la realidad es pura
coincidencia

3. © Adogslifephoto | Dreamstime.com - Yorkshire Terrier Dog Wearing Pink Tutu Photo

7. FIRST

9. 1 HORA después...
(de veras de veritas)

10. RIIIING!

11. Domingo, 20hs...
... El horario de
atención es
Lunes a Viernes
de 9 a 18hs ...

12. *&%#
%$#!!*&%#
%$#!!
¡Calma Anix!
*&%#
%$#!!

13. De cómo
EL MINISTERIO DE
SEGURIDAD
consumió
UNA HORA
de vida de Anix

15. ?
Anix

17. Anix
08/09/2014
CUPO COMPLETO

19. Anix
09/09/2014
CUPO COMPLETO

21. Anix
10/09/2014
CUPO COMPLETO

23. Anix
Turno disponible:
MALARGU¨E
#%*&*
Vivo en capital!

24. Anix
:: Refrescó el navegador
:: ReInició la búsqueda
:: Probó todos los botones
y encontró turno en
ALVEAR?

25. ?
Basu
Anix
2811110
1
01 01 123
4
Alvear Alvear
¿Puedo cambiar mi nombre?

26. ?
Alvear Alvear
¿Y el tercer paso?
¿No saben todo esto ya?

27. ?
Alvear Alvear
¿Donar?

28. RIIIING!

29. Domingo, 20hs...
... El horario de
atención es
Lunes a Viernes
de 9 a 18hs ...

30. *&%#
%$#!!*&%#
%$#!!
¡Calma Anix!
*&%#
%$#!!

31. OH!
¿Y ahora
QUIEN podrá
ayudarme?
Y ahora ?!

32. UX

33. uxmeme.tumblr.com/
¿¿UX que??
CALMA, CALMA,
QUE NO PANDA EL CUNICO

34. Diseño de experiencia de usuarios
Es el proceso de aumentar la satisfacción y lealtad del
cliente mediante la mejora de la usabilidad, facilidad de
uso y el placer proporcionado en la interacción entre el
cliente y el producto.

35. Modelo Causa Efecto
de la Experiencia del Usuario
USUARIO
Condiciones físicas,
psicológicas, aprendizaje
y experiencias, etc
MICRO ENTORNO
Condiciones del
entorno inmediato a
la situación de uso
MACRO ENTORNO
Cultura- tecnología disponible
demografía - política - economía
PRODUCTO
Marca
PROPUESTA DE VALOR
DEL NEGOCIO
Objetivos del negocio
EJECUCIÓN DEL PRODUCTO
Equipo, Procesos
UX
percepción positiva o
negativa

36. Facetas de UX
ux honeycomb de Peter Morville

37. UX es un proceso que previene,
detecta y resuelve problemas

38. Claves
1. Foco temprano y continuo en
el usuario y sus tareas
Fuente: La Fábula del Diseñador Centrado en el Usuario

39. Claves
2. Medición empírica del
comportamiento del usuario
Fuente: La Fábula del Diseñador Centrado en el Usuario

40. Claves
3. Diseño Iterativo
Fuente: La Fábula del Diseñador Centrado en el Usuario

41. The UX Umbrella by Dan Willis

42. Fuente: What's the difference between a UX Designer and a UI Developer by Ben Melbourne

43. No se vayan
Este bloque fue presentado por
Flavia Ibañez
flavia@noviggo.com | @flaviaza

44. No se pierdan el próximo bloque
en 15’
Taller UX: Diseño Visual
a cargo de
Analía Basualdo
Marité Impellizzeri
y la colaboración de
Sebastián Veggiani

45. IxDA es una asociación creada para difundir la disciplina del
Diseño de Interacción, que conforma (junto a usabilidad,
arquitectura de la información y accesibilidad, entre otras) el
ecosistema del Diseño de Experiencias del Usuario.

46. Queremos mejorar la educación y divulgación de UX en español.
Queremos llegar a un nuevo estándar profesional.
Y queremos construirlo colaborativamente.

47. 0. Introducción
1. Prototipado rápido
2. Heurísticas
3. Evaluaciones de
Usabilidad
4. Diseño Visual
5. Accesibilidad
6. Diseño de Interacción
7. Arquitectura de la
Información

48. 10 Superpoderes
para un
diseño visual eficaz

49. 1
No pensar en la solución sino en el
USUARIO
Problema - Mensaje

51. ¡Mis antenitas de vinil, están
detectando la presencia del enemigo!

52. Planteo del Problema
El sitio de turnos del Ministerio de Seguridad fue
creado para facilitar el trámite a la comunidad.
El servicio no está resolviendo esa necesidad,
lo que causa frustración y una opinión negativa
sobre el Ministerio.
Cómo podemos mejorar el servicio para que las
personas puedan reservar su turno con éxito?

53. 2
No sos vos ¡Soy yo!
Comunicar Visualmente

54. Mensaje visual
1. Usuario (novia)
2. Mensaje - premisas (él quiere dejarla)
3. Estrategia (cómo decirlo)

55. Premisas
● Que el usuario comprenda el objetivo principal del sitio.
● Orden y jerarquía en la información.
● Legibilidad.
● Dar importancia al Ministerio de Seguridad para reforzar
identidad y pertinencia.
● Que connote: seriedad, formalidad, simpleza, seguridad.

56. 3
Ojos que no ven… que cien volando
Búsqueda de Antecedentes

60. 4
La arquitectura invisible
Grilla y Composición

61. Grilla constructiva
1. Retícula, modulación invisible
2. Disposición natural y segura
3. Jerarquía visual
4. Consistencia visual

62. BGarlialnlacse

63. 5
¡Que empiece la fiesta!
llegaron los...
Elementos compositivos

64. Composición
1. Balance
2. Jerarquía
3. Patrón
4. Ritmo
5. Espacio
6. Proporción
7. Énfasis
8. Movimiento
9. Contraste
10. Unidad

65. Balance

67. Herencia

68. Patrón

69. Patrón

70. Ritmo

71. PRaittmróon

72. Espacio

73. ERsiptamcoio

74. Proporción

75. PrRopitomrcoión

76. Enfasis

77. Movimiento

78. Movimiento

79. Contraste

80. Contraste

81. Unidad

82. Unidad

83. 6
Cosa ‘e mandinga
Psicología y Color

84. La importancia del Color
1. Es una de las razones principales por la que se adquiere
un producto.
2. Crean estados de ánimo.
3. Determinan las primeras impresiones de un usuario.
4. Tienen significado.

86. Agua
Paz
masculinidad
serenidad
calma
frío
seriedad
refrescante
amigable
seguridad
confianza
empresa productiva
Azul
estabilidad

87. 7
No es solo lo que dice
sino cómo lo dice
Tipografía

88. La palabra escrita
1. Medio para transmitir un mensaje
2. Configuración visual
3. Ojo! todo comunica

89. Display
Serif
Sans Serif Comic
RETRO
Handwriting
Script
Fantasy
Egipcia
Stencil

91. Light
Normal
Bold
Itálica
Condensada

93. 8
Cuando dicen que vale más
que mil palabras...
Imágenes e Iconos

94. Imagen icónica
”Es representación de la apariencia
visual de un objeto real”
1. Representativo
2. Simbólico
3. Abstracto

97. 9
Coherencia y Consistencia
Patrones y guías de estilos

98. Guías de estilo

99. Guías de estilo
1. Diseño colaborativo.
2. Colección viviente de los productos que enfrenta
el usuario.
3. Crean eficiencia.
4. Desarrollo más ágil.

102. 10
No se trata sólo de una cara bonita
Usabilidad y Diseño Visual

103. Usabilidad y diseño visual
1. Los proyectos con buen diseño tienen clientes más
satisfechos e incrementan la lealtad.
2. La estética comunica credibilidad. Tiene tres
componentes: integridad, armonía y resplandor.
3. El buen diseño crea grandes experiencias.
4. Recordamos las malas y buenas experiencias, no las
comunes. Los detalles importan.

104. ¡Así es como quedó
cuando aplicamos
los superpoderes!

105. Seguir aprendiendo
links y libros de interés
1. http://hellohappy.org/beautiful-web-type/
2. http://www.lukew.com/ff/entry.asp?1915
3. https://hackdesign.org/lessons
4. http://tympanus.net/codrops/category/articles/
5. Participar de Ixda Mendoza!

106. Y aún hay más!
Este bloque fue presentado por
ANALIA BASUALDO - MARITE IMPELLIZZERI
@anagraphics - analiabasualdo@gmail.com / mariteimpellizzeri83@gmail.com
SEBASTIAN VEGGIANI
@efedoce - sveggiani@gmail.com

107. Moraleja

108. UX también es branding
Sin un diseño visual bien APLICADO la
marca no será elegida, recordada o
reconocida

109. El diseño visual facilita
una buena experiencia
Sin un diseño visual bien planteado el
producto no resolverá una necesidad

110. Una buena experiencia
depende de TODOS los
que intervienen

111. + Márketing
+ Gerencia
+ Dueños
+ etc
Fuente: What's the difference between a UX Designer and a UI Developer by Ben Melbourne

112. Y de que TODOS
conozcan un poco del
mundo del otro

113. GRACIAS!
IxDA Mendoza: Diego, Matías, Analía, Franco, Marité,
Flavia, Eugenio, Silvana, Sebastián
www.ixdamza.com.ar - www.facebook.com/ixdamza