Ruta UX/UI Jr: aprende gratis desde cero en 6 semanas
Diseña apps que la gente entiende y disfruta: investigación de usuarios, flujos, UI, Figma, accesibilidad y sistemas de diseño, hasta un rediseño con prototipo navegable. Con videos gratis en español, explicaciones en palabras simples, retos prácticos, cuestionarios y revisión de un docente.
- Nivel: Principiante
- 6 semanas
- 47 retos
- 34 videos gratis
- 48 preguntas
- Certificado al terminar
El contenido de las rutas está en español.
Temario semana a semana
Semana 1 · UX desde cero: investigar antes de diseñar
UX es la experiencia completa de una persona con un producto; UI es la parte que se ve. Antes de dibujar una sola pantalla, una persona de UX investiga: conversa con usuarios reales, observa cómo hacen hoy la tarea y busca qué les molesta. Con eso arma personas (perfiles que resumen a los usuarios) y define el problema a resolver. Diseñar sin investigar es adivinar.
Mini ejemplo: crees que la gente abandona el registro por "el diseño feo", pero en 3 entrevistas descubres que es porque piden el número de documento y nadie lo tiene a mano.
Error típico de principiante: preguntar "¿te gustaría que la app tenga X?". Casi todos dicen que sí. Pregunta por lo que hicieron de verdad: "Cuéntame la última vez que…".
Temas de la semana 1
- Qué es UX, qué es UI y qué hace un diseñador UX/UI Jr
- Design Thinking: empatizar, definir, idear, prototipar y probar
- Métodos de investigación: entrevistas, encuestas, observación y análisis de la competencia
- Cómo preparar una guía de entrevista con preguntas abiertas
- Sesgos al investigar: preguntas que inducen la respuesta
- Síntesis: mapa de afinidad (agrupar notas por temas)
- Personas basadas en datos (no inventadas)
- Definir el problema: "¿Cómo podríamos…?"
Cursos: videos gratis del plan + artículos de Nielsen Norman Group.
8 retos · cuestionario de 8 preguntas
Semana 2 · Flujos, arquitectura de información y wireframes
Con el problema claro, toca decidir por dónde camina la persona. Un user flow dibuja los pasos y decisiones para completar una tarea. La arquitectura de información ordena y nombra el contenido para que se encuentre fácil (el card sorting te ayuda a ver cómo lo agruparía la gente). Después haces wireframes: bocetos en gris, sin colores, para decidir qué va en cada pantalla. Y para revisar lo que diseñas, usas las 10 heurísticas de Nielsen.
Mini ejemplo: en el flujo "repetir un pedido" descubres que hoy son 7 pasos; tu propuesta lo deja en 3, con un botón "Repetir" en el historial.
Error típico de principiante: empezar con colores y tipografías. Si el flujo está mal, la pantalla más bonita no lo salva.
Temas de la semana 2
- User flows: inicio, pasos, decisiones y final; flujo feliz y caminos de error
- Arquitectura de información: agrupar, ordenar y nombrar
- Card sorting abierto y cerrado
- Mapa del sitio o de la app
- Wireframes de baja fidelidad (papel) y de media fidelidad (Figma en gris)
- Patrones comunes: navegación inferior, listas, formularios
- Las 10 heurísticas de usabilidad de Nielsen
- Leyes de UX: Hick, Fitts y Jakob
Cursos: videos gratis del plan + las 10 heurísticas de Nielsen Norman Group.
Videos gratis recomendados
8 retos · cuestionario de 8 preguntas
Semana 3 · UI: tipografía, color, espaciado y grillas
Ahora sí, lo visual. La UI se apoya en cuatro bases: tipografía (qué letras, de qué tamaño y peso), color (una paleta con significado: primario, éxito, error), espaciado (aire entre elementos, siempre con la misma escala) y grillas (columnas que alinean todo). Con ellas creas jerarquía visual: que lo importante se vea primero sin que nadie lo explique.
Mini ejemplo: una escala de espaciado de 8 en 8 (8, 16, 24, 32, 48) hace que todas las pantallas se vean ordenadas, aunque las diseñen personas distintas.
Error típico de principiante: usar 5 tipografías y 12 colores. Con 1 o 2 tipografías y una paleta corta se ve más profesional.
Temas de la semana 3
- Tipografía: familias, pesos, tamaños, interlineado y largo de línea
- Escala tipográfica (por ejemplo, 16 / 20 / 25 / 31)
- Color: paleta primaria y neutra, colores de estado, significado y cultura
- La regla 60-30-10
- Espaciado con una escala de 4 u 8 puntos
- Grillas: columnas, márgenes y medianiles (gutters); 4 columnas en celular y 12 en escritorio
- Jerarquía visual: tamaño, peso, color, posición y espacio
- Principios de Gestalt: proximidad, similitud y alineación
Cursos: videos gratis del plan + Material Design 3 (tipografía, color y espaciado).
Videos gratis recomendados
8 retos · cuestionario de 8 preguntas
Semana 4 · Figma a fondo: componentes, auto layout y prototipos
Diseñar 20 pantallas a mano y cambiar el botón en todas es un castigo. Figma te ayuda con tres superpoderes: los componentes (diseñas el botón una vez y lo reutilizas; si cambias el original, cambian todos), las variantes (el mismo botón en versión primaria, secundaria o deshabilitada) y el auto layout (los elementos se acomodan solos cuando cambia el texto, como en el código). Al final conectas las pantallas en un prototipo que se navega con clics.
Mini ejemplo: un botón con auto layout crece solo si cambias "Pagar" por "Pagar ahora con tarjeta", sin que muevas nada.
Error típico de principiante: "despegar" (detach) los componentes para cambiar un detalle. Pierdes la conexión con el original; mejor crea una variante.
Temas de la semana 4
- Interfaz de Figma: frames, capas, páginas y atajos básicos
- Auto layout: dirección, espacio entre elementos, relleno (padding) y comportamiento (hug, fill, fixed)
- Componentes e instancias; propiedades de componentes (texto, booleano, instancia)
- Variantes: tamaño, tipo y estado
- Restricciones y diseño adaptable (responsive)
- Prototipos: conexiones, interacciones, transiciones y overlays
- Compartir el prototipo y verlo en el celular
- Orden del archivo: páginas, nombres de capas y portadas
Cursos: videos gratis del plan + Figma Learn (guías oficiales).
Videos gratis recomendados
8 retos · cuestionario de 8 preguntas
Semana 5 · Accesibilidad y pruebas de usabilidad
Un diseño accesible lo puede usar todo el mundo: personas con baja visión, daltonismo, que usan lector de pantalla, que tienen temblor en las manos o que están bajo el sol. Las pautas WCAG dicen cómo lograrlo: contraste suficiente entre texto y fondo, áreas táctiles grandes, textos alternativos en las imágenes y no depender solo del color. Y para saber si tu diseño funciona de verdad, haces una prueba de usabilidad: le das una tarea a una persona, la observas sin ayudar y anotas dónde se traba.
Mini ejemplo: un texto gris #999999 sobre blanco tiene un contraste de 2.85:1 y no pasa WCAG; #767676 sobre blanco tiene 4.54:1 y sí pasa para texto normal.
Error típico de principiante: pensar que la accesibilidad es para "unos pocos". Todos la necesitamos en algún momento: con el celular al sol, con una mano ocupada o con la vista cansada.
Temas de la semana 5
- Qué es la accesibilidad y tipos de discapacidad (visual, auditiva, motriz, cognitiva)
- WCAG 2.2: principios perceptible, operable, comprensible y robusto; niveles A, AA y AAA
- Contraste: 4.5:1 para texto normal y 3:1 para texto grande (nivel AA)
- Tamaño de las áreas táctiles (mínimo 24 × 24 px en WCAG 2.2; 44 a 48 px recomendado)
- No depender solo del color; textos alternativos y etiquetas en los formularios
- Orden de lectura y foco visible
- Pruebas de usabilidad: tareas, guion, pensar en voz alta y métricas (éxito, tiempo, errores)
- Pruebas remotas con Maze o Useberry y cómo priorizar los hallazgos
Cursos: videos gratis del plan + pautas WCAG del W3C.
8 retos · cuestionario de 8 preguntas
Semana 6 · Sistema de diseño, handoff y proyecto final
Un sistema de diseño es el "manual de la casa" de un producto: los tokens (colores, tipografías y espacios con nombre), los componentes con sus reglas de uso y la documentación que dice cuándo usar cada cosa. Así, 10 diseñadores y 30 programadores construyen pantallas que parecen hechas por la misma persona. El handoff es entregar el diseño a desarrollo con todo claro: medidas, estados, comportamientos y casos raros. Y al final presentas tu caso de estudio: el rediseño completo con su proceso.
Mini ejemplo: en vez de decirle al equipo "usa este azul", el token color-primario vale #2563EB en Figma y en el código; si mañana cambia, cambia en los dos lados.
Error típico de principiante: entregar solo las pantallas "bonitas". Desarrollo también necesita los estados vacíos, de carga y de error, y qué pasa con textos largos.
Temas de la semana 6
- Qué es un sistema de diseño: principios, tokens, componentes, patrones y documentación
- Tokens con variables de Figma; modos claro y oscuro
- Documentar un componente: anatomía, variantes, cuándo usarlo y cuándo no
- Librerías compartidas en Figma
- Handoff: Dev Mode, especificaciones, estados, casos límite y anotaciones
- Trabajar con desarrollo: revisar la implementación (design QA)
- Caso de estudio: problema, proceso, decisiones, resultados y aprendizajes
- Portafolio de UX/UI sin experiencia laboral
Cursos: videos gratis del plan + Design Systems 101 (Nielsen Norman Group).
Videos gratis recomendados
7 retos · cuestionario de 8 preguntas
Proyectos para tu portafolio
En UX/UI no se muestra solo la pantalla bonita: se muestra el proceso. Un buen caso de estudio cuenta el problema, la investigación, las decisiones y el resultado.
1. Rediseño de una app real (proyecto final)
- Qué construyes: el rediseño de una tarea clave de una app que usas (pagar, reservar, registrarse), con prototipo navegable y caso de estudio.
- Qué practicas: todo el proceso de las semanas 1 a 6.
- Súbele el nivel: prueba la versión original y la tuya con las mismas tareas y compara cuánto tardan las personas.
2. Auditoría heurística y de accesibilidad
- Qué construyes: un informe de una web o app pública con los problemas encontrados según las 10 heurísticas y WCAG, con capturas y propuestas.
- Qué practicas: heurísticas, contraste y pautas de accesibilidad (semanas 2 y 5).
- Súbele el nivel: ordena los problemas por gravedad y propone una versión corregida de las 3 pantallas peores.
3. Mini sistema de diseño
- Qué construyes: una librería en Figma con tokens de color, tipografía y espaciado, y 6 componentes con variantes y documentación.
- Qué practicas: UI, componentes, variantes, variables y handoff (semanas 3, 4 y 6).
- Súbele el nivel: modo claro y oscuro con variables, y una página de documentación por componente.
Glosario de UX/UI Jr en palabras simples
| Palabra | Qué significa |
|---|---|
| UX (experiencia de usuario) | Cómo se siente una persona al usar un producto: si logra lo que quiere, si se pierde, si se frustra. |
| UI (interfaz de usuario) | Lo que se ve y se toca: botones, textos, colores, pantallas. |
| Investigación de usuarios | Aprender de las personas reales (entrevistas, observación, pruebas) antes de diseñar. |
| Persona | Un perfil ficticio, basado en la investigación, que resume a un tipo de usuario y lo que necesita. |
| Journey map | El recorrido de una persona con tu producto, con lo que hace, piensa y siente en cada paso. |
| User flow | El camino de pantallas y decisiones para completar una tarea (por ejemplo, "pagar"). |
| Arquitectura de información | Cómo se ordena y se nombra el contenido para que se encuentre fácil. |
| Wireframe | Un boceto de la pantalla en blanco y negro, sin colores, para decidir qué va y dónde. |
| Heurísticas | Reglas generales de usabilidad para revisar una interfaz (las 10 de Nielsen). |
| Jerarquía visual | Ordenar tamaños, pesos y colores para que lo más importante se vea primero. |
| Grilla (grid) | Columnas invisibles que alinean los elementos de la pantalla. |
| Componente | Una pieza reutilizable (botón, tarjeta) que, si la cambias una vez, cambia en todos lados. |
| Auto layout | La función de Figma que acomoda los elementos solos, como lo haría el código. |
| Prototipo | Una versión navegable del diseño, con clics que llevan de una pantalla a otra. |
| Accesibilidad | Que el producto lo pueda usar todo el mundo, incluidas personas con discapacidad. |
| WCAG | Las pautas internacionales de accesibilidad para la web. |
| Contraste | La diferencia de luminosidad entre el texto y su fondo; si es baja, cuesta leer. |
| Prueba de usabilidad | Observar a una persona usando tu diseño para descubrir dónde se traba. |
| Sistema de diseño | El conjunto de reglas, tokens y componentes que mantienen un producto consistente. |
| Token | Un valor con nombre (color-primario, espacio-16) que diseño y código comparten. |
| Handoff | Entregar el diseño a desarrollo con todo lo que necesita para construirlo bien. |
¿Listo para empezar?
Gratis, sin tarjeta y sin experiencia previa. Entra con Google o sin cuenta.
Empezar UX/UI Jr gratis