$30 off During Our Annual Pro Sale. View Details »

Lo que debes saber de UI para mobile & desktop

Lo que debes saber de UI para mobile & desktop

En esta presentación quiero contar mi experiencia en el diseño web y móvil, y las diferencias que existen al momento de diseñar para una aplicación web y aplicación móvil.
Como por ejemplo organización de contenido, interacciones, botones, guías de estilo

Gabriela Muñoz

April 22, 2019
Tweet

More Decks by Gabriela Muñoz

Other Decks in Design

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