Master class: Mobile UI/UX. Como diseñar una App exitosa.
48 recomendaciones5,105 vistas
La masterclass de Martin Redigolo aborda el diseño y desarrollo de aplicaciones móviles, destacando la creciente importancia de estos dispositivos en el acceso a Internet. Se discuten temas como la elección de la plataforma, el diseño de la experiencia del usuario (UX), y la optimización de la interfaz de usuario (UI). Además, se presentan herramientas y recomendaciones para el prototipado y desarrollo, así como tendencias en diseño.
Master class: Mobile UI/UX. Como diseñar una App exitosa.
- 2. HOLA Martin Redigolo .de/.it/.es Diseño gráfico y medios interactivos Senior Innovation & Strategy Planner
- 3. @martinredigolo http://startupastronauts.com Experience Workshop Lanza tu Startup en 24h y emprende tu misión
- 4. @martinredigolo ¿Qué está pasando? / ¿Qué tengo que tener en cuenta para una App supermegachachi? / Últimas reflexiones /
- 5. @martinredigolo En el 2013, el móvil superará al PC como el dispositivo más común para acceder a internet a nivel mundial. / GARTNER
- 6. @martinredigolo Hay más móviles en el mundo que cepillos de dientes. / EL ECONOMISTA
- 7. @martinredigolo La economía global de APPs $53.000.000.000 /2012 ! $143.000.000.000 /2016 Fuente: Vision Mobile, App Economy Forecast 2013-2016
- 10. @martinredigolo 150xMiramos al día a nuestros móviles… 200x...si tienes un smartphone
- 11. @martinredigolo ¿QUÉ ES UN DISPOSITIVO MÓVIL? IPHONE? BLACKBERRY? TABLET? IPAD MINI? PORTÁTIL? PINCHO USB? …
- 12. @martinredigolo ¿Qué está pasando? ¿Qué tengo que tener en cuenta para una App supermegachachi? / Últimas reflexiones /
- 13. @martinredigolo 1/¿PARA QUÉ DISPOSITIVO DISEÑAMOS Y DESARROLLAMOS?
- 14. @martinredigolo 1/¿PARA QUÉ DISPOSITIVO DISEÑAMOS Y DESARROLLAMOS?
- 16. @martinredigolo 2/¿PARA QUÉ DISPOSITIVO DISEÑAMOS Y DESARROLLAMOS?
- 17. @martinredigolo 2/¿PARA QUÉ DISPOSITIVO DISEÑAMOS Y DESARROLLAMOS? Facebook Paper http://scotthurff.com/posts/facebook-paper-gestures
- 18. @martinredigolo 3/¿PARA IPHONE & IPAD LA MISMA APP?
- 19. @martinredigolo 3/¿PARA IPHONE & IPAD LA MISMA APP? iPad, iPhone 4/S 640x960px iPhone 3, 3G/S 320x480px
- 20. @martinredigolo 4/¿PARA QUÉ ESTADO DEL USUARIO DESARROLLAMOS?
- 21. @martinredigolo 4/¿PARA QUÉ ESTADO DEL USUARIO DESARROLLAMOS?
- 22. @martinredigolo 4/¿PARA QUÉ ESTADO DEL USUARIO DESARROLLAMOS? Smartphone Tablet Portátil PC SmartTV App Seamless APP Experience
- 23. @martinredigolo 5/¿CUÁL DEBERÍA SER MI EQUIPO DE TRABAJO?
- 24. @martinredigolo 5/¿CUÁL DEBERÍA SER MI EQUIPO DE TRABAJO? Project Manager Diseñador UX Diseñador UI Maquetador Programador
- 25. @martinredigolo 6/¿CUÁL ES EL PROCESO DEL PROTOTIPADO Y DESARROLLO?
- 26. @martinredigolo 6/¿CUÁL ES EL PROCESO DEL PROTOTIPADO Y DESARROLLO? Project Manager Coordinación Cliente Organización Materiales Diseñador UX Arquitectura contenidos Árbol de contenidos Wireframe Diseñador UI Desarrollo elementos visuales Programador Programa la APP en base a pantallas del Maquetador/ UI y con flujos según UX Maquetador Programa pantallas estáticas en base a UI
- 27. @martinredigolo 7/WEBAPP VS NATIVE VS HIBRIDA VS RESPONSIVE
- 28. @martinredigolo 7/WEBAPP VS NATIVE VS HIBRIDA VS RESPONSIVE Navegar OfflineNO SI Navegación rápidaNO SI Tiempo ImplementaciónRÁPIDO LENTO AprobaciónNO SI UX GamingBAJA ALTA Funciones dispositivo Camera, Sensores, … NO SI Costes DesarrolloBAJOS ALTOS Aprobación VersionesNO SI WEBAPP NATIVE
- 29. @martinredigolo 7/WEBAPP VS NATIVE VS HIBRIDA VS RESPONSIVE VENTAJA Comparten contenido HTML La APP nativa carga contenidos HTML “UIWebView”
- 30. @martinredigolo 7/WEBAPP VS NATIVE VS HIBRIDA VS RESPONSIVE El contenido se adapta a las pantallas utilizando CSS, JS,… ! Ventajas • El mismo contenido • La misma programación • UI/UX optimizado ! Inconvenientes • Conexión • Hardware sin aprovechar ! • Página Web
- 32. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? Cuanto más puedas STAY ANALOG! ! Simplemente porque es más rápido.
- 33. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://www.uistencils.com Browser Whiteboard Stencil
- 34. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://www.uistencils.com iPhone Stencil Kit
- 35. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://www.omnigroup.com/omnigraffle/ Omnigraffle (Pro) Diagramas de flujo, Wireframes, árboles de contenido, interacción básica,…
- 36. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? https://www.graffletopia.com Graffletopia Plantillas para Omnigraffle
- 37. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://www.mockflow.com Mockflow Wireframes
- 38. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://www.mockflow.com Mockflow Pantallas enlazadas
- 39. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://www.axure.com Axure Protitipar y ver en el dispositivo. Wireframe en Word.
- 40. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://uxpin.com UXPin Wireframe. Prototipo. Responsive.
- 41. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? WIREFRAME
- 42. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? WIREFRAME
- 43. @martinredigolo 9/¿QUÉ QUIERO QUE SE VEA ANTES?
- 44. @martinredigolo 9/¿QUÉ QUIERO QUE SE VEA ANTES? Recomendaciones para el Diseño • No intentes apiñar todo en la parte superior. Parte tus contenidos en trozos digeribles. • Incluye una descripción clara sobre lo que vas ofrecer en tu App/site. • Mantén una navegación lógica y clara. • Desarrolla un copy/texto interesante. • No olvides de incluir más contenido “útil” e interesante por debajo del “Fold” • Testea tu App/site en diferentes dispositivos para comprobar el diseño y la experiencia
- 45. @martinredigolo 10/¿QUÉ TENDENCIA SIGO EN MI DISEÑO?
- 46. @martinredigolo 10/¿QUÉ TENDENCIA SIGO EN MI DISEÑO? Skeumorfismo Flat Design VENTAJAS Eficiente Moderno Rápido + honesto Comfortable INCONVENIENTES Diferente No muy claro - Personalidad Aburrido? Ejecución difícil VENTAJAS + Entendible “Barniz” Familiar + Seguro Atractivo INCONVENIENTES + Desarrollo + Lento + PNG & - CSS Antiguado?
- 47. @martinredigolo 11/EL UI EMPIEZA CON UNA
- 48. @martinredigolo 11/EL UI EMPIEZA CON UNA HAMBURGUESA… MENU http://exisweb.net/mobile-menu-abtest MENU
- 49. @martinredigolo 11/EL UI EMPIEZA CON UNA HAMBURGUESA… http://exisweb.net/mobile-menu-abtest
- 50. @martinredigolo 11/EL UI EMPIEZA CON UNA HAMBURGUESA… http://exisweb.net/mobile-menu-abtest
- 51. @martinredigolo 12/¿CUÁLES SON MIS REFERENCIAS EN EL MERCADO? (AL FINAL ESTO ES UNA COMPETICIÓN. FAIR PLAY, PERO QUEREMOS GANAR.)
- 52. @martinredigolo 12/¿CUÁLES SON MIS REFERENCIAS EN EL MERCADO? PATH
- 53. @martinredigolo 12/¿CUÁLES SON MIS REFERENCIAS EN EL MERCADO? OVER
- 54. @martinredigolo 12/¿CUÁLES SON MIS REFERENCIAS EN EL MERCADO?
- 55. @martinredigolo 13/NO OLVIDES EL TIEMPO DE APROBACIÓN
- 56. @martinredigolo 13/NO OLVIDES EL TIEMPO DE APROBACIÓN 21 DÍAS 60 MINUTOS
- 57. @martinredigolo ¿Qué está pasando? ¿Qué tengo que tener en cuenta para una App Últimas reflexiones /
- 59. @martinredigolo ¿UI O UX? DISEÑANDO EL PRODUCTO DISEÑANDO LA EXPERIENCIA
- 61. @martinredigolo No tienes que ser un genio para crear una brillante user experience, tienes que ser un buen observador. / STEVE HICKEY
- 62. @martinredigolo EVALUA > DECIDE >> IMPLEMENTA Es importante que evalúes las necesidades de tu negocio para tomar las decisiones correctas y generar un efecto WOW!
- 63. @martinredigolo http://youstuff.me Newsletter de innovación en negocios, diseño y tecnología Muchas Gracias :)