• Save
Master class: Mobile UI/UX. Como diseñar una App exitosa.
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Master class: Mobile UI/UX. Como diseñar una App exitosa.

on

  • 606 views

Introducción en el desarrollo de interfaces (UI) y experiencia (UX) en aplicaciones (móviles). 13 puntos claves para que tanto el desarrollo como la app tenga éxito. Impartido por Martin Redigolo, ...

Introducción en el desarrollo de interfaces (UI) y experiencia (UX) en aplicaciones (móviles). 13 puntos claves para que tanto el desarrollo como la app tenga éxito. Impartido por Martin Redigolo, diseñador y co-fundador de Startup Astronauts* y del boletín semanal de innovación en negocios, diseño y tecnología ▅▅ stuff (youstuff.me)

Statistics

Views

Total Views
606
Views on SlideShare
571
Embed Views
35

Actions

Likes
6
Downloads
0
Comments
0

5 Embeds 35

http://www.slideee.com 27
https://twitter.com 5
http://www.pinterest.com 1
http://es.pinterest.com 1
http://www.google.es 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Master class: Mobile UI/UX. Como diseñar una App exitosa. Presentation Transcript

  • 1. Masterclass ! Speaker @MartinRedigolo ! Tiempo +/- 3600 segundos MOBILE UI.UX. Slide to unlock
  • 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
  • 8. @martinredigolo http://humanfaceofbigdata.com
  • 9. @martinredigolo
  • 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?
  • 15. @martinredigolo 2/¿PARA QUÉ ORIENTACIÓN?
  • 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
  • 31. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR?
  • 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 /
  • 58. @martinredigolo ¿UI O UX?
  • 59. @martinredigolo ¿UI O UX? DISEÑANDO EL PRODUCTO DISEÑANDO LA EXPERIENCIA
  • 60. @martinredigolo ¿UI O UX?
  • 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 :)