Primero conocerás que debe saber un UI Designer no solo es quién hace interfaces “bonitas” sino que debe saber cómo funciona y qué dificultades enfrenta el usuario. En segundo conocerás qué acciones y/o tareas realiza un UI designer como lo son: Diseño de interfaz, interacciones, pautas visuales y cuáles son las diferencias entre mobile y web.

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