Designing for mobile devices

2,364 views

Published on

Design for mobile devices today is not an option but a necessity for all businesses. Being on the Internet is not enough, now we must also provide users with an optimal experience on their devices. High mobility, a small screen, short-term use, little attention... are some of the assumptions surrounding the use of these devices. But is this always true? Is there any more information that we should take into account? And besides... Application, mobile web or responsive design? This workshop will discuss the reasons why this is important and discover through practice which the most important aspects to be considered are when designing an application or website.

Published in: Design

Designing for mobile devices

  1. 1. Diseño para dispositivos móvilesWednesday, December 19, 12
  2. 2. Ester Serrano ¿Quién soy? @esterserranoWednesday, December 19, 12
  3. 3. Planning Ejemplos ¿Cuál es la situación actual? Proceso de diseño para dispositivos móviles (con un caso práctico) ConclusionesWednesday, December 19, 12
  4. 4. ¿Algún diseñador web en la sala?Wednesday, December 19, 12
  5. 5. Yeah! Jugáis con ventajaWednesday, December 19, 12
  6. 6. ¿Por qué?Wednesday, December 19, 12
  7. 7. Sabéis moveros en entornos cambiantesWednesday, December 19, 12
  8. 8. Usáis herramientas y procesos similaresWednesday, December 19, 12
  9. 9. Los que no sois diseñadores web...Wednesday, December 19, 12
  10. 10. También moláis! De verdad...Wednesday, December 19, 12
  11. 11. ¿Por qué?Wednesday, December 19, 12
  12. 12. “El efecto espejo retrovisor”Wednesday, December 19, 12
  13. 13. “ el mundo a través de un Vemos espejo retrovisor. Nos movemos hacia delante mirando hacia atrás Marshal McLuhanWednesday, December 19, 12
  14. 14. EjemplosWednesday, December 19, 12
  15. 15. Paper http://tobiasahlin.com/blog/skeumorphism-and-storytelling/Wednesday, December 19, 12
  16. 16. PaperWednesday, December 19, 12
  17. 17. MicrosoftWednesday, December 19, 12
  18. 18. ClearWednesday, December 19, 12
  19. 19. FlipboardWednesday, December 19, 12
  20. 20. ReadabilityWednesday, December 19, 12
  21. 21. ReadabilityWednesday, December 19, 12
  22. 22. SvpplyWednesday, December 19, 12
  23. 23. ¿Por qué queremos aprender esto?Wednesday, December 19, 12
  24. 24. Recordad esto No hace tantos añosWednesday, December 19, 12
  25. 25. Las cosas han cambiado bastanteWednesday, December 19, 12
  26. 26. Hablamos de menos de 10 añosWednesday, December 19, 12
  27. 27. Los móviles tienen la misma tecnología que un cohete de la NASA de los 60Wednesday, December 19, 12
  28. 28. Crecimiento de dispositivos móvilesWednesday, December 19, 12
  29. 29. Todo el mundo usa este gráficoWednesday, December 19, 12
  30. 30. Diversidad de dispositivosWednesday, December 19, 12
  31. 31. “ más presencia en dispositivos Quiero móviles Tu clienteWednesday, December 19, 12
  32. 32. Pues habrá que hacer esto...¿no?Wednesday, December 19, 12
  33. 33. +100 millones de iPhones vendidosWednesday, December 19, 12
  34. 34. pero...Wednesday, December 19, 12
  35. 35. 6800 millones de personas en el mundoWednesday, December 19, 12
  36. 36. 77% de gente con móvilWednesday, December 19, 12
  37. 37. 77% de gente con móvil 2% tiene iPhoneWednesday, December 19, 12
  38. 38. migajas...Wednesday, December 19, 12
  39. 39. 77% de gente con móvil 2% tiene iPhone 23% tiene smartphoneWednesday, December 19, 12
  40. 40. aunque apetitosa...es una pequeña parteWednesday, December 19, 12
  41. 41. Y entonces...¿para qué dispositivo diseñamos?Wednesday, December 19, 12
  42. 42. Wednesday, December 19, 12
  43. 43. Ejercicio Vamos a pensar en un proyecto concretoWednesday, December 19, 12
  44. 44. Una tienda Diseñar una tienda de productos localesWednesday, December 19, 12
  45. 45. Objetivo principal Aumentar el nivel de ventas y dar visibilidad a los artesanos.Wednesday, December 19, 12
  46. 46. Necesidades Debe poder usarse desde cualquier dispositivoWednesday, December 19, 12
  47. 47. Este es nuestro targetWednesday, December 19, 12
  48. 48. Contexto Va a ser un tema recurrente hoyWednesday, December 19, 12
  49. 49. Solemos imaginar este contexto...y es ciertoWednesday, December 19, 12
  50. 50. ¿Y qué pasa en este caso?Wednesday, December 19, 12
  51. 51. ¿Y en éste?Wednesday, December 19, 12
  52. 52. ¿Sabíais que...Wednesday, December 19, 12
  53. 53. el 62% de la gente usa el móvil mientras ve la tele?Wednesday, December 19, 12
  54. 54. el 69% lo usa mientras compra?Wednesday, December 19, 12
  55. 55. el 34% empiezan una operación en el pc y la acaban en el móvilWednesday, December 19, 12
  56. 56. <<<<<<<<<<<< Alguien gastó 5000€ en muebles a través del app de M&SWednesday, December 19, 12
  57. 57. La gente usa las cosas como quiereWednesday, December 19, 12
  58. 58. Empezando un diseñoWednesday, December 19, 12
  59. 59. El StoryboardWednesday, December 19, 12
  60. 60. #4 StoryboardWednesday, December 19, 12
  61. 61. #4 StoryboardWednesday, December 19, 12
  62. 62. #4 StoryboardWednesday, December 19, 12
  63. 63. #4 Storyboard Identifica las tareas principales que quieres comunicar Crea un personaje y decide sus acciones principales Crea una historia básica Rellena los huecosWednesday, December 19, 12
  64. 64. Pantallas clave Home / Catálogo Página de producto Proceso de compraWednesday, December 19, 12
  65. 65. Pantallas clave Home / Catálogo Página de producto Proceso de compraWednesday, December 19, 12
  66. 66. Cosas que tenéis que tener en cuenta antes de empezarWednesday, December 19, 12
  67. 67. 1 ¿Para qué dispositivo va a diseñarse? 68Wednesday, December 19, 12
  68. 68. Qué dice Google Analytics? 69Wednesday, December 19, 12
  69. 69. No sólo se trata de la pantallaWednesday, December 19, 12
  70. 70. Diferentes elementos de interacciónWednesday, December 19, 12
  71. 71. 2 ¿Cuál va a ser la resolución de la pantalla? 72Wednesday, December 19, 12
  72. 72. Wednesday, December 19, 12
  73. 73. * De nuevo, esto es obra de Stephanie Rieger 74Wednesday, December 19, 12
  74. 74. “ vuestros diseños cuanto antes Ved en el dispositivo, no en el emulador! Lo dice todo el mundoWednesday, December 19, 12
  75. 75. 3 ¿Hago una App o una web? bradfrostweb.com/blog/notes/native-vs-web-is-total-bullshit/ 76Wednesday, December 19, 12
  76. 76. Puedo contar la versión largaWednesday, December 19, 12
  77. 77. Pero esta vez no lo haréWednesday, December 19, 12
  78. 78. Versión App Web móvil nativa ResponsiveWednesday, December 19, 12
  79. 79. Versión App Web móvil nativa Responsive desde 2006 desde 2010 Ahora Optimizado para Hay que soportar Una sola web, un pantallas pequeñas. varias plataformas. solo diseño. Necesitas dar todo Contenido no Indexable en Google. el contenido. indexados en Google. Requiere nuevas El contenido tiene habilidades y que gestionarse 2 Sólo recomendables conocimiento. veces. si usan elementos concretos de Más tiempo al Bastante caro hardware. principio.Wednesday, December 19, 12
  80. 80. ¿Cuándo app nativa? La función principal está basada en un elemento de hardware Las restricciones de tiempo o dinero sólo permiten diseño para un dispositivo específicoWednesday, December 19, 12
  81. 81. “Why do people pay $8 for a dessert with no second thought but won’t buy a 79-cent iPhone/Android app without thinking hard if it’s worth it. Preguntas de quoraWednesday, December 19, 12
  82. 82. Wednesday, December 19, 12
  83. 83. Wednesday, December 19, 12
  84. 84. ¿Cuándo web? Si no es absolutamente necesario que hagas una aplicación. ¡Disclaimer! Esto no quiere decir que sea más fácilWednesday, December 19, 12
  85. 85. ¿Os suena el Responsive web design? #1 Crash courseWednesday, December 19, 12
  86. 86. Aquí está el secreto del diseño móvilWednesday, December 19, 12
  87. 87. ¿Os suena este tío? @EthanMarcotteWednesday, December 19, 12
  88. 88. Wednesday, December 19, 12
  89. 89. La web comenzó como imitación de la imprentaWednesday, December 19, 12
  90. 90. Y dio lugar a retículas fijas como estaWednesday, December 19, 12
  91. 91. Pero ya sabéis lo que ha pasado...Wednesday, December 19, 12
  92. 92. Una web para gobernarlos a todosWednesday, December 19, 12
  93. 93. Wednesday, December 19, 12
  94. 94. Wednesday, December 19, 12
  95. 95. Wednesday, December 19, 12
  96. 96. “ retícula fluida con imágenes Una flexibles que incorpora media queries para crear un layout adaptable Ethan MarcotteWednesday, December 19, 12
  97. 97. “ manera de presentar nuestro Una contenido sin saber en qué dispositivo va a verse Ethan MarcotteWednesday, December 19, 12
  98. 98. Retícula fluida Contenido =% ContenedorWednesday, December 19, 12
  99. 99. 120px 24px 24px 24px 24px 24pxWednesday, December 19, 12
  100. 100. 100% 20% 20% 20% 20% 20%Wednesday, December 19, 12
  101. 101. Imágenes flexibles Reescalar altura y anchura max-width = 100%Wednesday, December 19, 12
  102. 102. Wednesday, December 19, 12
  103. 103. El problema con las imágenesWednesday, December 19, 12
  104. 104. Demasiado peso para un entorno móvil.Wednesday, December 19, 12
  105. 105. http://adaptive-images.com/ https://github.com/joshje/Responsive-Enhance https://github.com/scottjehl/picturefill Soluciones que ya hay por ahíWednesday, December 19, 12
  106. 106. Algunos usan el ingenio http://adactio.com/journal/5439/Wednesday, December 19, 12
  107. 107. Media queries Diferentes necesidades, diferente CSS @media screen and (max-width:320px) {...} Es necesario conocer los principales breakpoints (Stephanie Rieger)Wednesday, December 19, 12
  108. 108. Media queries max-width 479px (smartphone portrait) max-width 767px (smartphone landscape) max-width 1023px (tablets portrait) max-width 1024px (tablets landscape & others) El resto queda a vuestro criterioWednesday, December 19, 12
  109. 109. ¿Eres desarrollador web? 110Wednesday, December 19, 12
  110. 110. Hazte amigo de uno cuanto antesWednesday, December 19, 12
  111. 111. Planear Diseñar Desarrollar ImplementarWednesday, December 19, 12
  112. 112. Planear Implementar DiseñarWednesday, December 19, 12
  113. 113. ConversaciónWednesday, December 19, 12
  114. 114. Comienza el diseñoWednesday, December 19, 12
  115. 115. Nombre del producto Descripción del producto Información de envíoWednesday, December 19, 12
  116. 116. Nombre del producto Descripción del producto No intentes meter todo el contenido de un vistazo Información de envíoWednesday, December 19, 12
  117. 117. Nombre del producto Descripción del producto Info útil pero no Información de envío imprescindibleWednesday, December 19, 12
  118. 118. Nombre del producto Descripción del producto Información de envío El botón de comprar no se ve...Wednesday, December 19, 12
  119. 119. Contenido primeroWednesday, December 19, 12
  120. 120. Nombre del producto BOTÓN COMPRAR Descripción del productoWednesday, December 19, 12
  121. 121. Nombre del producto Ten en cuenta lo que cabe en la BOTÓN COMPRAR pantalla Descripción del productoWednesday, December 19, 12
  122. 122. Nombre del producto Nombre del producto BOTÓN BOTÓN COMPRAR COMPRARWednesday, December 19, 12
  123. 123. Nombre del producto BOTÓN COMPRARWednesday, December 19, 12
  124. 124. Nombre del producto Información del envío Información de contacto BOTÓN COMPRAR Descripción del producto Información del envíoWednesday, December 19, 12
  125. 125. Nombre del producto Información del envío Información de contacto BOTÓN COMPRAR Descripción del producto Información del envío No tengas miedo al scroll en móvilWednesday, December 19, 12
  126. 126. Contenido primero, navegación despuésWednesday, December 19, 12
  127. 127. MENU Nombre del producto BOTÓN COMPRARWednesday, December 19, 12
  128. 128. Ropa Hogar Arte Ropa Joyería Accesorios Hogar Nombre del producto Arte Nombre del producto Joyería Accesorios BOTÓN COMPRAR BOTÓN COMPRAR “Do nothing” Select elementWednesday, December 19, 12
  129. 129. MENU MENU Ropa y accesorios Ropa Nombre del producto Nombre del producto Hogar Hogar Papelería Decoración Joyería Iluminación Accesorios Libros y Música Muebles Cocina Papelería BOTÓN Joyería BOTÓN COMPRAR COMPRAR Accesorios Toggle navigationWednesday, December 19, 12
  130. 130. MENU MENU MENU Nombre del producto Ropa Hogar Decoración Iluminación Libros y Música Muebles Cocina Papelería BOTÓN Joyería COMPRAR Accesorios Left Nav FlyoutWednesday, December 19, 12
  131. 131. MENU Ropa Hogar Papelería Joyería Accesorios Usa el espacio que no ves Off- canvasWednesday, December 19, 12
  132. 132. ¿Os suena el proceso Mobile First? #2 Crash courseWednesday, December 19, 12
  133. 133. ¿Quién es éste tío? Luke Wrobleski @LukeWWednesday, December 19, 12
  134. 134. Wednesday, December 19, 12
  135. 135. “ webs y las aplicaciones deberían Las ser diseñadas y desarrolladas primero para el móvil LukeWWednesday, December 19, 12
  136. 136. Mobile last (degradación progresiva)Wednesday, December 19, 12
  137. 137. Mobile last (degradación progresiva) Mobile first (mejora progresiva)Wednesday, December 19, 12
  138. 138. Y por qué es mejor “Mobile First”?Wednesday, December 19, 12
  139. 139. Una pantalla pequeña te obliga a centrarte en los importanteWednesday, December 19, 12
  140. 140. Una conexión lenta te obliga a optimizar.Wednesday, December 19, 12
  141. 141. Sabe donde estás en todo momento. GeolocalizaciónWednesday, December 19, 12
  142. 142. “La mejor cámara es la que llevas siempre encima”Wednesday, December 19, 12
  143. 143. La pantalla táctil ofrece nuevas posibilidades de interacciónWednesday, December 19, 12
  144. 144. Móvil Tableta Desktop Nombre del producto ? COMPRAR Descripción del producto Información del envío Productos similares Información de contacto Pie de páginaWednesday, December 19, 12
  145. 145. MENU Ropa Hogar Papelería Joyería AccesoriosWednesday, December 19, 12
  146. 146. MENU Ropa Hogar Papelería Joyería AccesoriosWednesday, December 19, 12
  147. 147. Ropa Hogar Papelería Joyería Accesorios Ropa Hogar Arte Joyería AccesoriosWednesday, December 19, 12
  148. 148. Ropa Hogar Papelería Joyería Accesorios Ropa Hogar Papelería Joyería AccesoriosWednesday, December 19, 12
  149. 149. “Show me the data”Wednesday, December 19, 12
  150. 150. MENU Libreta “Superpoderes” Comprar ¿Miedo a la página en blanco? Seguro que con nuestra libreta con Supepoderes para tener grandes ideas no padecerás nunca más este síntoma. Apunta, dibuja, anota y escribe todo lo que se te pase por la cabeza que seguro será una genial idea. La libreta es de tapa dura, toda forrada en papel kraft muy bonito e impresa en tinta blanca. La encuadernación es tipo en wire-o negro de doble anilla, muy cómoda para abrir, cerrar y doblar la libreta. Descripción Tamaño: 14,8 x 21 cm (DIN-A5) Volumen: 100 hojas de papel blanco liso de 90 gr. ComprarWednesday, December 19, 12
  151. 151. MENU Libreta “Superpoderes” Comprar ¿Miedo a la página en blanco? Seguro que con nuestra libreta con Supepoderes para tener grandes ideas no padecerás nunca más este síntoma. Apunta, dibuja, anota y escribe todo lo que se te pase por la cabeza que seguro será una genial idea. La libreta es de tapa dura, toda forrada en papel kraft muy bonito e impresa en tinta blanca. La encuadernación es tipo en wire-o negro de doble anilla, muy cómoda para abrir, cerrar y doblar la libreta. Descripción Tamaño: 14,8 x 21 cm (DIN-A5) Volumen: 100 hojas de papel blanco liso de 90 gr. Comprar No uses un tamaño de fuente menor a 16pxWednesday, December 19, 12
  152. 152. MENU Libreta “Superpoderes” Comprar ¿Miedo a la página en blanco? Seguro que con nuestra libreta con Supepoderes para tener grandes ideas no padecerás nunca más este síntoma. Apunta, dibuja, anota y escribe todo lo que se te pase por la cabeza que seguro será una Comprar genial idea. La libreta es de tapa dura, toda Content first. LegibilidadWednesday, December 19, 12
  153. 153. 6 Legibilidad Testar siempre en el dispositivo para asegurar la lectura http://informationarchitects.net/blog/responsive- typography-the-basics/ 154Wednesday, December 19, 12
  154. 154. Es necesario un tamaño mayor en pantalla.Wednesday, December 19, 12
  155. 155. El tamaño de fuente depende de cómo se usa un dispositivoWednesday, December 19, 12
  156. 156. Fíjate en los mejores y cópialesWednesday, December 19, 12
  157. 157. Fíjate en los mejores y cópialesWednesday, December 19, 12
  158. 158. Fíjate en los mejores y cópialesWednesday, December 19, 12
  159. 159. Prototipa prototipa prototipaWednesday, December 19, 12
  160. 160. Proceso de diseño Revisión Revisión viabilidad Concepto t Descubre Define Desarrolla ImplementaWednesday, December 19, 12
  161. 161. Proceso de diseño Revisión Revisión viabilidad Concepto Desastre t Descubre Define Desarrolla ImplementaWednesday, December 19, 12
  162. 162. Sin prototipar, la implementación puede ser desastrosaWednesday, December 19, 12
  163. 163. Tenemos menos experiencia y no prevemos todo.Wednesday, December 19, 12
  164. 164. Es fácil tomar malas decisionesWednesday, December 19, 12
  165. 165. Prototipar Mejoramos la toma de decisiones. Comunicamos mejor nuestras ideas. Obtenemos feedback del usuario desde el primer momento. Exploramos lo desconocido sin riesgos.Wednesday, December 19, 12
  166. 166. La vida de la gente es caóticaWednesday, December 19, 12
  167. 167. Y no siempre hacen lo que esperamosWednesday, December 19, 12
  168. 168. Paper prototypeWednesday, December 19, 12
  169. 169. Paper prototypeWednesday, December 19, 12
  170. 170. Paper prototypeWednesday, December 19, 12
  171. 171. Paper prototypeWednesday, December 19, 12
  172. 172. In-screen paper prototypeWednesday, December 19, 12
  173. 173. KeynoteWednesday, December 19, 12
  174. 174. Diseño visualWednesday, December 19, 12
  175. 175. 1 Color El contraste cambia según la pantalla. Reflejo en exteriores. 176Wednesday, December 19, 12
  176. 176. Wednesday, December 19, 12
  177. 177. Wednesday, December 19, 12
  178. 178. Diseñar para retinaWednesday, December 19, 12
  179. 179. Wednesday, December 19, 12
  180. 180. Wednesday, December 19, 12
  181. 181. Un poco de inspiraciónWednesday, December 19, 12
  182. 182. iPadWednesday, December 19, 12
  183. 183. Windows PhoneWednesday, December 19, 12
  184. 184. AndroidWednesday, December 19, 12
  185. 185. AndroidWednesday, December 19, 12
  186. 186. Wednesday, December 19, 12
  187. 187. iPhoneWednesday, December 19, 12
  188. 188. Wednesday, December 19, 12
  189. 189. Esto era todo lo que quería contarosWednesday, December 19, 12
  190. 190. Opinión Muchos de nosotros vamos a poder dar forma a los dispositivos, comportamientos y experiencias. ¿Qué elegirías hacer? Dieter RamsWednesday, December 19, 12
  191. 191. Muchas gracias @EsterSerrano ester.serrano@designit.comWednesday, December 19, 12
  192. 192. Recursos beautifulpixels.com dribbble.com/ (busca mobile) www.alistapart.com/ www.netmagazine.com/ mobilewebbestpractices.com/ www.smashingmagazine.com/ 52weeksofux.com/Wednesday, December 19, 12
  193. 193. Recursos bradfrost.github.com/this-is- responsive/ mediaqueri.es futurefriend.ly/ adactio.com/journal/ css-tricks.comWednesday, December 19, 12
  194. 194. Tuts http://thinkvitamin.com/ http://www.codecademy.com/ http://tutsplus.com/ http://www.lynda.com/Wednesday, December 19, 12
  195. 195. Gente Luke Wrobleski @LukeW http://www.lukew.com/ Ethan Marcotte @EthanMarcotte http://unstoppablerobotninja.com/ Stephanie Rieger@StephanieRieger http://stephanierieger.com/Wednesday, December 19, 12
  196. 196. Gente Josh Brewer @jbrewer http://jbrewer.me/ Tren Walton @trentwalton trentwalton.com/ Brad Frost @brad_frost http://bradfrostweb.com/blogWednesday, December 19, 12
  197. 197. Wednesday, December 19, 12

×