Cómo coordinar diseño con desarrollo
Clase 12 de 34 • Curso de Diseño de Interfaces Móviles
Contenido del curso
Introducción al Diseño Mobile
Lineamientos
- 4

Wireframes de anatomía móvil en iOS y Android
06:16 min - 5

Gestos en aplicaciones móviles iOS y Android
05:52 min - 6

Cómo priorizar columnas de desktop a móvil
04:46 min - 7

Cómo diseñar navegación móvil efectiva
07:47 min - 8

Cómo diseñar cards escalables para apps de restaurantes
09:14 min - 9

Cards dinámicas: cuándo variar el formato
10:11 min - 10

Cómo funciona el flujo de búsqueda en Twitter
06:11 min - 11

Onboarding que no molesta: slides y tours
03:02 min - 12

Cómo coordinar diseño con desarrollo
Viendo ahora
Introducción al Proyecto
Web
Metodología
iOS
Android
Notificaciones
Prototipos
Handoff
Conclusiones
La mejor forma de acelerar el UI/UX sin sacrificar calidad es coordinar desde el inicio con el equipo de desarrollo. Aquí se explica cómo decidir a tiempo qué es viable, cuándo usar componentes nativos como los alerts de iOS, y cómo diseñar empty states y estados de carga que orienten al usuario y ahorren esfuerzo de desarrollo.
¿Por qué hablar con desarrolladores desde el inicio?
Mantener contacto constante con los devs al principio, durante y al final evita retrabajo. Ellos indican qué se puede hacer en el tiempo disponible y qué conviene simplificar sin perder valor.
- Priorizar por tiempo de desarrollo, no solo por posibilidad técnica.
- Detectar temprano dependencias y demoras en integraciones.
- Evitar avanzar en diseños costosos que no agregan valor real.
- Beneficio clave: decisiones a tiempo para no perder horas de diseño.
Habilidades destacadas: comunicación continua, priorización por tiempo, flexibilidad para iterar con feedback técnico.
¿Cómo usar alerts nativos en iOS sin reinventar?
Aprovechar componentes del sistema puede ahorrar semanas. El alert nativo de iOS incluye título, descripción y una o dos acciones. El usuario ya lo conoce y confía en él, lo que reduce fricción.
- Usar el alert cuando el patrón nativo cumple el objetivo.
- Evitar variantes “súper custom” si solo agregan tiempo.
- Recordar que un alert también puede requerir texto (por ejemplo, nombrar un álbum nuevo).
- Mantener interacciones limitadas, rápidas y claras.
Conceptos clave: componente nativo, consistencia del sistema, costo de implementación, expectativas del usuario.
¿Qué hacer con empty state y estados de carga?
Pensar en los estados no “felices” mejora la experiencia y guía al usuario. Dos escenarios requieren atención: cuando no hay datos y cuando la app está cargando o consultando servicios.
¿Cómo guiar al usuario sin resultados?
Un empty state (o blank state) evita el “callejón sin salida”. No basta con “No hay resultados”. Hay que ofrecer salida y aprendizaje.
- Incluir un call to action para intentar otra búsqueda.
- Sugerir búsquedas relacionadas o las más comunes.
- Redactar mensajes que expliquen qué pasó y qué hacer después.
- Preguntarse: ¿qué objetivo tenía el usuario y cómo lo reencamino?
Habilidades: anticipación de casos límite, microcopys claros, orientación a objetivos del usuario.
¿Cómo anticipar estados intermedios de carga?
Entre un estado A y B suele haber consultas a servidores. Si puede demorar, hay que diseñar qué ve el usuario mientras espera.
- Pedir a los devs tiempos estimados de respuesta.
- Mostrar feedback visual que indique “estoy cargando”.
- Simular la estructura del contenido para reducir la ansiedad de espera.
- Hacer la transición breve y comprensible.
Datos clave: las demoras (por ejemplo, cinco segundos) deben disparar decisiones de UI para mantener la percepción de velocidad.
¿Qué recursos leer para mejores decisiones?
Conocer las guías de cada plataforma evita errores y sugiere patrones listos para usar.
- Android: material design guidelines.
- iOS: human interface guidelines.
- Beneficio: catálogo de componentes, estados y prácticas que ahorran tiempo y elevan consistencia.
Keywords útiles: desarrolladores, tiempo de desarrollo, alert iOS, acciones rápidas, empty state, blank state, sin resultados, call to action, consulta al servidor, estado intermedio, feedback de carga, wireframe, material design guidelines, human interface guidelines.
¿Tienes un caso de empty state o de carga que te haya costado resolver? Comparte tu experiencia y qué decisión tomaste con tu equipo de devs.