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

Transcript

1. Lo que debes saber de UI para mobile & desktop Gabriela Muñoz @supeergabs
2. UI/UX Designer - Mariachi IO UI Designer - Terapify Mentora -Technovation Embajadora - Temachtiani Geek & Friendly
4. Diseño Web
5. Secciones Básicas 1. Home 2. Nosotros 3. Productos / Servicios 4. Galería 5. Contacto
6. Móvil
7. ¿Diseñar para dispositivos móviles es realmente diferente a diseñar para desktop?
8. Sí!
9. 1. Páginas web 2. Aplicaciones web 3. Aplicaciones móvil
10. Página web Muestra información
11. Aplicaciones Web y Apps
12. “Las aplicaciones móviles nos permiten completar una tarea. Los sitios web nos dan acceso a la información ".
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.
14. Aplicaciones web
15. Aplicaciones Móviles
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.).
17. Móvil vs Desktop
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.
19. Tamaño de pantalla
20. Tabs Vs Interacciones
21. Navegación Horizontal
22. Navegación Vertical
23. Organización de Contenido
24. Desplazamiento
25. Menús desplegables poner n
26. Diseño UI
27. Coherencia Las aplicaciones móviles utilizan guías de estilo.
28. Material Design
29. Human Interface Guidelines
30. Integración con funciones del teléfono • Llamadas • Mensajes directos • Controles de voz • Cámara • Servicios de ubicación
31. Funcionalidad: Desktop / Móvil Tareas largas Tareas cortas
32. Diseño basado en el contexto Factores: • Ubicación del usuario • Su atención • Conectividad a Internet • Tamaño de la pantalla
33. Diferencias
34. Pero, ¿lo que yo hago son páginas web & aplicaciones web?
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.
37. Prioriza los elementos • Reducir el número de palabras • Eliminar algunos gráficos • Transferir información secundaria a otras páginas.
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.
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.
40. Caso de Estudio •
41. Inicio • Landing page • Calendario para reservar con psicólogos. • Validar la idea
42. Videollamadas • Conexión a internet • Cámara • Micrófono • Dispositivo
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.
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
47. Aplicación Móvil • Agendar cita • Proceso de pago • Tomar sesión
48. Aplicación Móvil
49. Aplicación Móvil
50. Actualmente +1000 terapias
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
52. Recomendaciones • Hazte amigo de los developers! • Muestra tus diseños a otros, su feedback es valioso! • Práctica, práctica. • Asiste a comunidades
53. GRACIAS
54. Más de mí @supeergabs mariachi.io / terapify.com temachtiani.com.mx / technovationchallenge.org