Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Diseño ui/ux en iOS

4,210 views

Published on

Diseño y usabilidad en IOS. Documento qeu apoyó la clase sobre esta temática en escuela.it

Published in: Design

Diseño ui/ux en iOS

  1. 1. diseño ui/ux más que estética @isaezdesign izaskunsaez.es Diseño Gráfico
  2. 2. izaskun sáez velasco diseñadora ui/ux. diseño on line-off line desde 2006 diseñadora gráfica autónoma (o freelance, que suena mejor) izaskun sáez @isaezdesign
  3. 3. ¿por qué es tan importante el diseño en una app? www.izaskunsaez.es @isaezdesign
  4. 4. apps disponibles en el apple store
  5. 5. 1.252.777 apps en el apple store www.izaskunsaez.es @isaezdesign
  6. 6. 79,6% apps zombies www.izaskunsaez.es @isaezdesign
  7. 7. No hay una segunda oportunidad para causar una buena primera impresión{ { www.izaskunsaez.es @isaezdesign
  8. 8. enorme competencia HAY QUE DESTACAR
  9. 9. www.izaskunsaez.es @isaezdesign ¿cual es el papel del diseñador?
  10. 10. diseño de apps UX Experiencia de usuario UI Diseño de interfaces www.izaskunsaez.es @isaezdesign
  11. 11. www.izaskunsaez.es @isaezdesign Es el que se encarga de decidir/investigar QUÉ debe mostrar un interface al usuario. UX diseñador Es el que se encarga de decidir CÓMO se debe mostrar un interface al usuario. UI diseñador
  12. 12. Qué aspecto tiene, qué transmite, a quien va dirigida, identidad de marca… Cómo es la interacción..., la fluidez y facilidad de uso, si cumple con lo que promete… Look & Feel UI ¿Qué esel diseño?
  13. 13. Usabilidad “Un atributo de calidad que mide lo fáciles de usar que son las interfaces web” Jakob Nielsen 2013 “Encontrar lo que necesitan, entender lo que encuentran y actuar apropiadamente… dentro del tiempo y esfuerzo que ellos consideran adecuado para esa tarea” Janice C. Redish.
  14. 14. facilidad de uso www.izaskunsaez.es @isaezdesign
  15. 15. Beneficios de la usabilidad Una mayor probabilidad de... Ventas o visitas o comentarios Posicionamiento Conversión/monetización ÉXITO www.izaskunsaez.es @isaezdesign
  16. 16. UX
  17. 17. UX
  18. 18. UX UI
  19. 19. preguntas básicas que deberías hacerte antes de diseñar una app www.izaskunsaez.es @isaezdesign
  20. 20. www.izaskunsaez.es @isaezdesign QUÉhace mi app ¿entrenimiento? ¿utilidad?
  21. 21. A QUIÉN se dirige la app niños adultos www.izaskunsaez.es @isaezdesign
  22. 22. www.izaskunsaez.es @isaezdesign CÓMOse usará mi app ¿en movimiento? ¿de forma más estática o relajada? ¿para un uso muy ocasional o más intenso? ¿en compañía? ¿es para disfrutar individualmente?
  23. 23. www.izaskunsaez.es @isaezdesign DÓNDEse usaría principalmente la app ¿de noche? ¿de día? ¿en lugares con mucha gente? ¿en privado? ¿en ambientes relajados? ¿al aire libre? ¿en una discoteca? ¿en público? ¿en sitios con conexión wifi o 3g?
  24. 24. empecemos por el principio www.izaskunsaez.es @isaezdesign
  25. 25. los mockups
  26. 26. Plasmar las interacciones y funcionalidades de la app. los mockups
  27. 27. PANTALLA INICIAL: nombre + profesión conocimientos destacados breve presentación escrita botón de contacto destacado MENÚ LATERAL: acceso al menú lateral donde encontraremos las secciones. botín de contacto destacado PANTALLA EXPERIENCIA LABORAL: imagen + texto, son secciones desplegables botín de contacto destacado PANTALLA EXPERIENCIA LABORAL: visión desplegada
  28. 28. www.izaskunsaez.es @isaezdesign el diseño visual
  29. 29. FLAT DESIGN un diseño básico enfocado a las animaciones y funciones www.izaskunsaez.es @isaezdesign FLAT DESIGN
  30. 30. el contenido la claridad centrar la atención www.izaskunsaez.es @isaezdesign 3 PILARES
  31. 31. www.izaskunsaez.es @isaezdesign EL CONTENIDO es el rey
  32. 32. el contenido es el protagonista enfoque en la tipografía e imágenes colores básicos
  33. 33. EL COLOR
  34. 34. Paleta de colores reducida
  35. 35. usa el color para destacar elementos el color no debe distraer del contenido
  36. 36. COLORES NEUTROS COLORES DESTACADOS
  37. 37. www.izaskunsaez.es @isaezdesign TIPOGRAFÍA
  38. 38. el texto puede llegar a ocupar del 50% al 90% de la pantalla
  39. 39. elegir una fuente legible con buen contraste fondo-texto dejar que todo respire
  40. 40. el tamaño del texto titulares 50-100 px subtítulo 30-50 px cpárrafo 26-40 px
  41. 41. www.izaskunsaez.es @isaezdesign LA CLARIDAD sé obvio
  42. 42. haz las cosas obvias dónde pulsar el contenido las posibilidades de interacción
  43. 43. los estados de los iconos ayudan a saber qué está activado y qué no
  44. 44. usa iconos obvios
  45. 45. utiliza el color, el tamaño del texto y la disposición de los elementos para destacar las diferentes acciones o secciones
  46. 46. www.izaskunsaez.es @isaezdesign SIMPLIFICA ¿es necesario? esa pantalla, ese botón...etc
  47. 47. www.izaskunsaez.es @isaezdesign centra la atención en el contexto
  48. 48. captando la atención la profundidad las transiciones y animaciones
  49. 49. www.izaskunsaez.es @isaezdesign la profundidad
  50. 50. los diferentes planos de interacción
  51. 51. ENFOCAR LA ATENCIÓN
  52. 52. www.izaskunsaez.es @isaezdesign las animaciones deben proporcionar una experiencia inmersiva
  53. 53. las buenas animaciones mejoran la experiencia, las malas distraen.
  54. 54. https://designcode.io/iosdesign-animations
  55. 55. no solamente el paso de una pantalla a otra
  56. 56. https://designcode.io/iosdesign-animations
  57. 57. duración óptima entre 0.3 y 0.5 segundos
  58. 58. www.izaskunsaez.es @isaezdesign lOs gestos sencillos no abusar
  59. 59. www.izaskunsaez.es @isaezdesign el tamaño sí importa
  60. 60. iOS Human Interface Guidelines
  61. 61. www.izaskunsaez.es @isaezdesign EN RESUMEN
  62. 62. www.izaskunsaez.es @isaezdesign ¿Qué quiere un usuario? Menos pasos para realizar una acción Mayor y mejor visibilidad de los elementos Elementos táctiles fácilmente seleccionables Que me muestren la información necesaria únicamente
  63. 63. www.izaskunsaez.es @isaezdesign hazte estas preguntas: 1. ¿Se reconocen las principales acciones de la app? 2. ¿Hay algo que pueda distraer de ese contenido importante y que no sea relevante? 3. ¿Está el contenido (imágenes/iconos - textos) bien relacionados? 4. ¿hay que dar muchos pasos para realizar una acción? 5. ¿Ves claramente donde están los elementos de navegación e info.? 6. ¿Sigue una lógica con lo que se espera de la app?
  64. 64. www.izaskunsaez.es @isaezdesign las resoluciones preparar el diseño para varias pantallas
  65. 65. 640 x 960 640 x 1136 750 x 1334 1242 x 2208 iPhone 4 iPhone 5 iPhone 6 iPhone 6 plus
  66. 66. www.izaskunsaez.es @isaezdesign el icono
  67. 67. PORQUE ES NUESTRA TARJETA DE PRESENTACIÓN PORQUE ACTÚA COMO PEQUEÑO RECORDATORIO PARA QUE UTILICE LA APP ¡Soy una App que molo mucho! ¡eh! ¡estoy aquí!
  68. 68. POCOS ELEMENTOS
  69. 69. ROTUNDO
  70. 70. El icono de una app aporta una información inicial al usuario un diseño correcto visualmente y atractivo un mejor funcionamiento de la app y más fiabilidad se percibe como
  71. 71. www.izaskunsaez.es @isaezdesign el trabajo del diseñador no acaba aquí
  72. 72. testeo y ajustes actualizaciones de la app diseño landing o web de la app diseño comunicación + marketing propio de la app
  73. 73. todo para conseguir... una experiencia inolvidable www.izaskunsaez.es @isaezdesign
  74. 74. evitar esto www.izaskunsaez.es @isaezdesign
  75. 75. Ilustración: Igor fernández
  76. 76. Ilustración: Igor fernández
  77. 77. Ilustración: Igor fernández
  78. 78. conseguir esto www.izaskunsaez.es @isaezdesign
  79. 79. Ilustración: Igor fernández
  80. 80. Ilustración: Igor fernández
  81. 81. www.izaskunsaez.es @isaezdesign FIN
  82. 82. izaskunsaez.es Diseño Gráfico hola@izaskunsaez.es @isaezdesign Agradecimiento especial a Igor Fernández por las ilustraciones. @igor_f_f

×