https://www.shiftr.pro/

Aprende a diseñar apps nativas para iOS y Android, creando experiencias consistentes sin importar la plataforma o el dispositivo.

<aside>

Estado: 🟢 En preparación (Lanzamiento enero 2026) 🐥  Actualizado 12 de septiembre de 2025

</aside>

<aside>

Descripción

Un curso completo para aprender a diseñar aplicaciones móviles desde la base hasta la creación de un sistema de diseño sólido para iOS y Android.

Verás las diferencias clave con el diseño web, los principios de cada plataforma, las limitaciones técnicas y de dispositivos, y las mejores prácticas en color, tipografía, iconografía, navegación y componentes.

El curso también incluye diseño para dispositivos plegables, testing y accesibilidad, además de una introducción a frameworks nativos, híbridos y no-code.

</aside>

<aside>

Perfil recomendado

• Diseñadores que quieran pasar de web a móvil.
• Perfiles de producto o UI interesados en crear experiencias nativas.
• Profesionales que trabajan con equipos de desarrollo móvil.
• Diseñadores que buscan dominar guidelines y patrones de iOS y Android. </aside>

<aside>

Características del curso

• Duración total: 40 horas de formación.
• Formato:
  • Sesiones en directo con espacio para preguntas y discusión.
  • Grabaciones disponibles para repaso en cualquier momento.
  • Material complementario en formato asíncrono (videos y recursos).
  • Notebook LLM: acceso a un cuaderno interactivo con IA para explorar ejemplos, prompts y casos prácticos de forma guiada.
• Metodología: aprendizaje práctico en Figma con UI kits, guidelines, variables y prototipado.
• Notebook LLM: acceso a un cuaderno interactivo para consultar ejemplos y explorar prompts de diseño móvil.
• Colaboradores invitados: especialistas en diseño y desarrollo de apps nativas e híbridas.
• Proyecto aplicado: diseño de una app multi-plataforma con sistema de diseño documentado. </aside>

<aside>

Módulos del curso

Módulo 1: Fundamentos del diseño de apps

Introducción al diseño de apps

• Diferencias entre diseño web y diseño de apps
• Limitaciones del diseño para móvil
• Contexto de uso móvil y consideraciones de diseño
• Tipos de apps: nativas, web apps e híbridas

Principios de diseño

• Human Interface Guidelines (iOS) vs Material Design (Android)
• Principios fundamentales de cada plataforma
• Diferencias conceptuales y filosóficas
• Figma y otras herramentas del ecosistema (mirror, ui kits, etc.)

Módulo 2: Aspectos técnicos esenciales

Especificaciones técnicas

• Unidades de medida: pt (iOS) vs dp (Android)
• Tamaños de pantalla y resoluciones
• Densidad de píxeles y escalado
• Safe areas y consideraciones de dispositivos específicos

Layout y grids

• Sistemas de grid para móvil
• Márgenes y padding
• Anatomía de una pantalla móvil

Formatos de archivo y assets

• Formatos de imagen (PNG, SVG, PDF vectorial)
• Optimización de assets para cada plataforma
• Gestión de assets en Xcode y Android Studio
• Nombrado y organización de recursos
• Formatos de fuentes (OTF, TTF, WOFF)
• Assets adaptativos
• Gestión de recursos para diferentes idiomas

Dispositivos plegables y nuevos formatos

• Diseño para “foldables” (Samsung Fold, Surface Duo)
• Breakpoints y estados de plegado
• Continuidad de experiencia entre estados
• Manejo de ratios de aspecto dinámicos
• Patrones de diseño para modo Flex (forma de L) y modo Tent (forma de A)
• Optimización de contenido
• Consejos básicos de testing en dispositivos plegables

Módulo 3: Sistema de diseño

Color

• Sistemas de color en iOS y Android
• Perfiles de coolor
• Espacios de color en dispositivos móviles
  • sRGB vs Display P3
  • Wide color en iOS
  • Color management en Android
  • Conversión entre espacios de color
  • “Graceful degradation” para displays limitados
  • Optimización de rendimiento
• Colores primarios y secundarios
• Semantic colors
• Dark mode y adaptabilidad
• Accesibilidad en el uso del color

Tipografía

• San Francisco (iOS) vs Roboto (Android)
• Jerarquía tipográfica
• Tamaños y pesos de fuente
• Legibilidad y lecturabilidad
• Dynamic Type (ajuste de legibilidad)

Iconografía

• SF Symbols vs Material Icons
• Diseño de iconos personalizados
• Tamaños y área de touch
• Consistencia visual en iconos

Módulo 4: Componentes de UI

Componentes básicos

• Botones y controles
• Campos de texto y formularios
• Listas y tablas
• Cards y contenedores

Componentes de navegación

• Tab bars y bottom navigation
• Navigation bars y top app bars
• Drawers y menús
• Modales y sheets

Componentes específicos por plataforma

• Componentes únicos de iOS (Action Sheet, Page control, Activity ring, Context menus, Stepper….)
• Componentes únicos de Android (Bottom sheet, Floating action button (FAB), Navigation drawer, Snackbar, Chips…)
• Adaptación de componentes entre plataformas

Módulo 5: Patrones de navegación

Estructuras de navegación

</aside>

<aside>

</aside>

| --- | --- | --- |

<aside>

</aside>

🌐 Comunidad y extras

Acceso directo a la comunidad de Shift+R, donde podrás:

• UI kits de referencia para iOS y Android.
• Guías rápidas de HIG y Material Design.
• Plantillas de testing para accesibilidad y rendimiento.
• Acceso prioritario a nuevos módulos sobre wearables y AR/VR.
• Compartir avances y proyectos.
• Resolver dudas con profesores y compañeros.