Lo que debes saber de UI para mobile & desktop

Transcript

1. Lo que debes saber de UI
   para mobile & desktop
   Gabriela Muñoz
   @supeergabs
   

   View Slide

2. UI/UX Designer - Mariachi IO
   UI Designer - Terapify
   Mentora -Technovation
   Embajadora - Temachtiani
   Geek & Friendly
   

   View Slide

3. View Slide

4. Diseño Web
   

   View Slide

5. Secciones Básicas
   1. Home
   2. Nosotros
   3. Productos / Servicios
   4. Galería
   5. Contacto
   

   View Slide

6. Móvil
   

   View Slide

7. ¿Diseñar para dispositivos móviles es realmente diferente a diseñar
   para desktop?
   

   View Slide

8. Sí!
   

   View Slide

9. 1. Páginas web
   2. Aplicaciones web
   3. Aplicaciones móvil
   

   View Slide

10. Página web
    Muestra información
    

    View Slide

11. Aplicaciones Web y Apps
    

    View Slide

12. “Las aplicaciones móviles nos permiten completar una
    tarea. Los sitios web nos dan acceso a la información ".
    

    View Slide

13. Aplicaciones web
    Se ejecutan desde el
    navegador, es decir que los
    datos o los archivos en los que
    trabajas son procesados y
    almacenados dentro de la
    web.
    

    View Slide

14. Aplicaciones web
    

    View Slide

15. Aplicaciones Móviles
    

    View Slide

16. Aplicaciones Móviles
    ● Es una aplicación diseñada para ser ejecutada en dispositivos
    móviles.
    ● Funcionalidades específicas.
    ● Mejorar la capacidad de conectividad y disponibilidad de servicios y
    productos (usuario-usuario, usuario-proveedor de servicios, etc.).
    

    View Slide

17. Móvil vs Desktop
    

    View Slide

18. Tamaño de pantalla
    Es una de las cosas más
    importantes en las que pensar
    cuando se trata de diseñar
    para dispositivos móviles.
    

    View Slide

19. Tamaño de pantalla
    

    View Slide

20. Tabs Vs Interacciones
    

    View Slide

21. Navegación
    Horizontal
    

    View Slide

22. Navegación
    Vertical
    

    View Slide

23. Organización de Contenido
    

    View Slide

24. Desplazamiento
    

    View Slide

25. Menús desplegables
    poner n
    

    View Slide

26. Diseño UI
    

    View Slide

27. Coherencia
    Las aplicaciones móviles
    utilizan guías de estilo.
    

    View Slide

28. Material Design
    

    View Slide

29. Human Interface Guidelines
    

    View Slide

30. Integración con funciones del teléfono
    ● Llamadas
    ● Mensajes directos
    ● Controles de voz
    ● Cámara
    ● Servicios de ubicación
    

    View Slide

31. Funcionalidad: Desktop / Móvil
    Tareas largas Tareas cortas
    

    View Slide

32. Diseño basado en el contexto
    Factores:
    ● Ubicación del usuario
    ● Su atención
    ● Conectividad a Internet
    ● Tamaño de la pantalla
    

    View Slide

33. Diferencias
    

    View Slide

34. Pero, ¿lo que yo hago son páginas web
    & aplicaciones web?
    

    View Slide

35. View Slide

36. ¿Qué es?
    Es una filosofía de diseño que, tal y como indica su propio nombre, pone
    en primer lugar a los dispositivos móviles. Al momento de crear una
    página web o aplicación web.
    

    View Slide

37. Prioriza los elementos
    ● Reducir el número de palabras
    ● Eliminar algunos gráficos
    ● Transferir información secundaria a
    otras páginas.
    

    View Slide

38. ¿Por qué mobile first?
    ● Evitarás hacer adecuaciones de elementos.
    ● Eliminar componentes para la versión móvil.
    ● Llenar de información la versión móvil.
    ● Es más fácil agregar elementos a medida que aumenta el tamaño de
    la pantalla que eliminar elementos al reducir el tamaño.
    

    View Slide

39. ¿Por qué mobile first?
    ● Un sitio web hecho o aplicación web para dispositivos móviles se
    ajusta con más facilidad en la computadora.
    ● Ir al escritorio primero implica más retroceso.
    

    View Slide

40. Caso de Estudio
    ●
    

    View Slide

41. Inicio
    ● Landing page
    ● Calendario para reservar
    con psicólogos.
    ● Validar la idea
    

    View Slide

42. Videollamadas
    ● Conexión a internet
    ● Cámara
    ● Micrófono
    ● Dispositivo
    

    View Slide

43. Ahora!
    Todo el proceso vía web, de
    modo que cualquiera
    pueda hacer uso del
    servicio sin tener que
    descargar algo extra a su
    teléfono.
    

    View Slide

44. View Slide

45. View Slide

46. De Aplicación web a Móvil...
    ● Replicará lo que existe en la web
    ● Agregando notificaciones push
    ● Integrar chat
    ● Recordatorios para su sesión
    ● Videollamada integrada en la aplicación
    

    View Slide

47. Aplicación Móvil
    ● Agendar cita
    ● Proceso de pago
    ● Tomar sesión
    

    View Slide

48. Aplicación Móvil
    

    View Slide

49. Aplicación Móvil
    

    View Slide

50. Actualmente
    +1000 terapias
    

    View Slide

51. Conclusiones
    ● Las tareas en aplicaciones móviles deben ser rápidas y comprensibles al
    instante.
    ● Las tareas en aplicaciones web son más largas y requieren mayor esfuerzo.
    ● Prioriza el contenido que mostrarás.
    ● Piensa Mobile First
    ● Diseña lo que tus usuarios van a consumir
    

    View Slide

52. Recomendaciones
    ● Hazte amigo de los developers!
    ● Muestra tus diseños a otros, su feedback es valioso!
    ● Práctica, práctica.
    ● Asiste a comunidades
    

    View Slide

53. GRACIAS
    

    View Slide

54. Más de mí
    @supeergabs
    mariachi.io / terapify.com
    temachtiani.com.mx / technovationchallenge.org
    

    View Slide