Un curso práctico de ocho módulos donde no solo aprendes UX/UI: diseñas tu propio producto digital de principio a fin. Con aprendizaje basado en proyectos eliges un reto que te apasione y lo conviertes en un producto real, listo para tu portafolio.
Aquí no memorizas teoría suelta: la aplicas. Desde el primer módulo eliges un producto digital que quieras crear —según tus intereses y tu experiencia— y lo vas construyendo paso a paso hasta tenerlo diseñado, prototipado y presentado. Cada módulo avanza tu proyecto y recibes retroalimentación personalizada.
Defines qué producto digital quieres diseñar, alineado a lo que te apasiona y a tu experiencia.
Entiendes a tus usuarios, sintetizas hallazgos y delimitas el problema real que vas a resolver.
Organizas la información y diseñas los recorridos por los que se moverá tu usuario.
Creas el sistema visual (color, tipografía, grilla) y las pantallas de alta fidelidad.
Vuelves tu diseño interactivo en Figma y aceleras con inteligencia artificial.
Pruebas con usuarios reales, revisas accesibilidad e iteras con base en evidencia.
Documentas y presentas tu producto como un caso de estudio listo para tu portafolio.
El proyecto es tuyo: eliges el reto y el producto que quieres construir.
Cada módulo es un paso concreto de tu proyecto, no teoría desconectada.
Arrancamos desde lo que ya sabes y desde tu contexto e intereses reales.
Recibes retroalimentación personalizada en cada entrega del proyecto.
Tu proyecto final: Al terminar tendrás un producto digital real, diseñado por ti de principio a fin.
Qué es una interfaz de usuario y qué la hace clara, usable y estética. Los bloques con los que se construye cualquier producto digital y los principios que hacen que una interfaz se entienda casi sin explicación.
Al terminar, el estudiante distingue UI de UX, reconoce los principios visuales y de interacción de una buena interfaz, y puede auditar críticamente cualquier producto digital identificando aciertos y problemas de diseño.
La UI es el punto de encuentro entre la persona y el producto: todo lo que se ve, se toca y responde. Diseñar UI es decidir cómo se presenta la información y cómo se ejecutan las acciones.
La interfaz de usuario abarca botones, textos, íconos, imágenes, campos, menús, colores y microanimaciones. Pero la UI no es solo estética: es el lenguaje con el que el producto le habla al usuario y le indica qué puede hacer y qué está sucediendo en cada momento.
Una buena UI es en gran medida invisible: cuando está bien resuelta, la persona logra su objetivo sin notar el diseño. Cuando está mal resuelta, la interfaz estorba, confunde y provoca errores. Por eso el primer criterio de una interfaz no es lo bonita que se ve, sino lo fácil que es usarla.
Se confunden a diario, pero son distintas: UX es la experiencia completa (qué tan útil, fácil y agradable es); UI es la capa concreta con la que se interactúa.
Piensa en un restaurante: la UX es toda la experiencia —la reserva, la atención, el sabor, la cuenta—; la UI sería la vajilla, la carta y la presentación del plato. Puedes tener una UI preciosa sobre una UX pésima, y también lo contrario.
En producto digital, la UX define qué problema resolvemos y cómo se estructura la solución; la UI define cómo se ve y se siente esa solución en pantalla. Ambas se necesitan: sin UX, la UI es decoración; sin UI, la UX nunca llega al usuario.
Tres conceptos de Don Norman que explican por qué una interfaz se entiende (o no) sin manual de instrucciones.
Una affordance es la relación entre un objeto y lo que permite hacer: un botón 'invita' a presionarlo. El significante es la pista visible que comunica esa affordance —el relieve, el color, el subrayado— para que el usuario la descubra sin adivinar.
El feedback es la respuesta del sistema a una acción: un botón que cambia al presionarlo, un indicador de carga, un mensaje al guardar. Sin feedback, el usuario no sabe si su acción funcionó, así que repite el clic o abandona la tarea.
Cómo el ojo decide qué mirar primero y cómo agrupa la información de un vistazo.
La jerarquía visual usa tamaño, peso, color, contraste y posición para ordenar la importancia: lo más grande y contrastado se ve primero. Sin jerarquía, todos los elementos compiten y ninguno resalta.
Los principios de Gestalt describen cómo percibimos grupos: proximidad (lo cercano se ve relacionado), similitud (lo parecido se agrupa), cierre, continuidad y figura-fondo. Aplicarlos hace que un layout se lea sin esfuerzo, agrupando con espacio en vez de con líneas y cajas.
Los tres pilares del lenguaje visual de una interfaz — y por qué la legibilidad va primero.
El color transmite jerarquía, estado y marca, pero su primera responsabilidad es la legibilidad: el contraste entre texto y fondo debe cumplir un mínimo (WCAG recomienda 4.5:1 para texto normal). Además, el color nunca debe ser el único medio para comunicar algo —un error solo en rojo excluye a quien no distingue ese color—.
La tipografía carga la mayor parte del mensaje. Una escala tipográfica consistente (tamaños y pesos definidos de antemano) crea jerarquía y ritmo. Pocas fuentes, bien usadas, comunican más que muchas mal combinadas.
Reutilizar soluciones probadas hace la interfaz predecible y más rápida de construir y mantener.
Un patrón de interfaz es una solución estándar a un problema recurrente: cómo se ve un formulario, una tabla, una búsqueda o una notificación. Usar patrones conocidos reduce la curva de aprendizaje porque el usuario ya sabe cómo funcionan.
La consistencia —mismos componentes, mismos comportamientos, mismo lenguaje visual— reduce la carga cognitiva. Los design systems (tokens, componentes y guías) hacen que esa consistencia escale a medida que el producto y el equipo crecen.
Estas actividades se responden en la bitácora del proyecto: ahí registras lo que hiciste, subes la evidencia y explicas cómo aporta al producto común.
Elijan una app o sitio que usen a diario y auditen su jerarquía visual, contraste, consistencia y affordances. Señalen 3 aciertos y 3 problemas.
Entregable: Documento con capturas anotadas.
Entre los cuatro, revisen 3 productos del dominio del reto institucional, listen los patrones de UI que se repiten y acuerden el encuadre del proyecto.
Entregable: Encuadre acordado en la Fase 0 + inventario de patrones.
Responde para comprobar lo aprendido. Al aprobar (75% o más) el módulo se marca como completado y se desbloquea el siguiente.
1. ¿Cuál es la diferencia principal entre UI y UX?
2. Un botón que 'se ve presionable' gracias a su relieve y color es un ejemplo de:
3. ¿Qué contraste mínimo recomienda WCAG para texto normal?
4. Para crear jerarquía visual, lo más recomendable es:
Completa el módulo anterior (aprueba su evaluación) para desbloquear este contenido. También puedes activar “Explorar sin bloqueo” arriba.
Diseñar desde las necesidades reales de las personas, no desde las suposiciones del equipo. El proceso y las heurísticas que hacen usable un producto.
Aplicar el proceso de diseño centrado en el usuario y las heurísticas de usabilidad para evaluar y mejorar una experiencia.
Un proceso iterativo: descubrir, definir, desarrollar y entregar. El modelo del doble diamante ayuda a alternar entre explorar y enfocar.
El diseño centrado en el usuario parte de una idea simple pero poderosa: las decisiones se toman con base en las necesidades reales de las personas, no en las suposiciones del equipo. Por eso el proceso es iterativo y vuelve una y otra vez a validar con usuarios.
El modelo del doble diamante lo organiza en dos momentos: primero se abre la mirada para explorar el problema y luego se enfoca para definirlo; después se abre de nuevo para explorar soluciones y finalmente se enfoca para entregar. Alternar entre divergir y converger evita enamorarse de la primera idea.
Diez principios generales para evaluar interfaces: visibilidad del estado, control del usuario, prevención de errores, consistencia y más. La base de cualquier evaluación heurística.
Las diez heurísticas de Jakob Nielsen son principios para detectar problemas de usabilidad sin necesidad de usuarios: visibilidad del estado del sistema, correspondencia con el mundo real, control y libertad, consistencia, prevención de errores, reconocer antes que recordar, flexibilidad, diseño minimalista, ayuda para recuperarse de errores y documentación.
Son la base de la evaluación heurística: un método rápido y barato donde varios evaluadores revisan la interfaz contra estos principios. No reemplaza las pruebas con usuarios, pero encuentra muchos problemas evidentes antes de invertir en ellas.
Modelos mentales, carga cognitiva y las 'leyes' de UX (Hick, Fitts, Miller) explican por qué ciertas decisiones de diseño funcionan y otras frustran.
Las personas llegan a tu producto con modelos mentales: expectativas sobre cómo debería funcionar según lo que ya conocen. Cuando el diseño coincide con ese modelo, todo se siente natural; cuando lo contradice, aparece la fricción.
Las 'leyes' de UX resumen patrones de comportamiento: la ley de Hick dice que más opciones aumentan el tiempo de decisión; la de Fitts, que los objetivos grandes y cercanos son más fáciles de alcanzar; la de Miller, que la memoria de trabajo maneja pocos elementos a la vez. Diseñar con ellas reduce la carga cognitiva.
Lo que no se mide no se mejora: tasa de éxito, tiempo en tarea, tasa de error y satisfacción convierten la usabilidad en datos accionables.
Las métricas de usabilidad convierten la experiencia en datos: tasa de éxito (cuántos completan la tarea), tiempo en tarea, tasa de error y nivel de satisfacción. Juntas muestran si un cambio realmente ayudó o solo se ve distinto.
Instrumentos como el SUS entregan un puntaje comparable de satisfacción percibida. Medir antes y después de un rediseño permite demostrar el impacto con evidencia y no con intuición.
Estas actividades se responden en la bitácora del proyecto: ahí registras lo que hiciste, subes la evidencia y explicas cómo aporta al producto común.
Evalúen un flujo completo (inscribirse, pagar, consultar) contra las 10 heurísticas y clasifiquen cada hallazgo por severidad.
Entregable: Tabla de hallazgos con la heurística incumplida y su severidad.
Definan juntos el usuario objetivo y su contexto en la institución, y construyan un guion de 5 a 7 preguntas abiertas sobre experiencias pasadas.
Entregable: Usuario objetivo, contexto y guion en la Fase 1.
Responde para comprobar lo aprendido. Al aprobar (75% o más) el módulo se marca como completado y se desbloquea el siguiente.
1. ¿Qué representa el modelo del doble diamante?
2. La evaluación heurística consiste en:
3. Según la Ley de Hick, si aumentas el número de opciones:
4. ¿Para qué sirve el SUS (System Usability Scale)?
Completa el módulo anterior (aprueba su evaluación) para desbloquear este contenido. También puedes activar “Explorar sin bloqueo” arriba.
Transformar la investigación en insights accionables: agrupar datos, construir personas y mapear el recorrido del usuario.
Sintetizar hallazgos de investigación en personas y customer journey maps que guíen las decisiones de diseño.
El affinity mapping agrupa observaciones dispersas en patrones. Un insight es una conclusión accionable, no un dato suelto.
Tras investigar quedan muchas observaciones sueltas. La síntesis las convierte en patrones: el affinity mapping consiste en escribir cada observación en una nota y agruparlas por similitud hasta que emergen temas claros.
La clave está en distinguir observación de insight. 'El 70% no encontró el botón de pago' es un dato; 'los usuarios esperan pagar desde el carrito, no desde el menú' es un insight accionable que guía el diseño.
Una persona es un personaje semi-ficticio basado en investigación real que representa a un segmento de usuarios y hace memorables sus necesidades.
Una persona resume en un personaje semi-ficticio las necesidades, metas y frustraciones de un segmento de usuarios. No se inventa: se construye a partir de la investigación, y sirve para que todo el equipo tenga en mente a la misma persona al decidir.
Una buena persona incluye contexto, objetivos y puntos de dolor, y evita el antipatrón de la 'persona elástica' que se estira para justificar cualquier decisión. Pocas personas bien fundamentadas valen más que muchas genéricas.
El journey map visualiza fases, acciones, emociones, puntos de contacto y dolores a lo largo de la relación del usuario con el producto, revelando oportunidades.
El journey map cuenta la historia del usuario a lo largo del tiempo: sus fases, lo que hace en cada una, los puntos de contacto con el producto y —muy importante— cómo se siente. Esa curva emocional revela dónde se frustra y dónde podríamos deleitarlo.
Su mayor valor no es el dibujo bonito, sino las oportunidades que hace visibles: cada punto de dolor es una hipótesis de mejora que se puede priorizar.
El empathy map organiza lo que el usuario dice, piensa, hace y siente. Es un puente rápido entre la investigación y la definición del problema.
El empathy map es una herramienta rápida para ponerse en los zapatos del usuario: se divide en lo que dice, piensa, hace y siente. Ayuda a detectar contradicciones —por ejemplo entre lo que alguien dice y lo que realmente hace— que abren pistas de diseño.
Los escenarios lo complementan: describen situaciones concretas de uso ('María, con prisa, intenta pagar desde el celular en el bus'). Aterrizan a la persona en contextos reales donde el producto debe funcionar.
Estas actividades se responden en la bitácora del proyecto: ahí registras lo que hiciste, subes la evidencia y explicas cómo aporta al producto común.
Cada quien entrevista al menos a una persona real del público objetivo con el guion del equipo y registra sus notas textuales en la bitácora de la Fase 1.
Entregable: Notas de la entrevista (una entrada de bitácora por sesión).
Con las notas de los cuatro hagan affinity mapping, extraigan insights y construyan la persona principal, su journey map y la declaración del problema.
Entregable: Insights, persona, journey y POV completos en la Fase 2.
Responde para comprobar lo aprendido. Al aprobar (75% o más) el módulo se marca como completado y se desbloquea el siguiente.
1. ¿Qué es un insight en investigación de UX?
2. Una 'persona' en UX es:
3. El customer journey map sirve principalmente para:
4. El empathy map organiza principalmente lo que el usuario:
Completa el módulo anterior (aprueba su evaluación) para desbloquear este contenido. También puedes activar “Explorar sin bloqueo” arriba.
Organizar el contenido y las rutas para que las personas encuentren lo que buscan sin esfuerzo.
Estructurar la información de un producto y diseñar flujos de usuario claros y validables.
La AI organiza, etiqueta y estructura el contenido. Buenas etiquetas y jerarquía hacen que la navegación se sienta obvia.
La arquitectura de información es el trabajo invisible que hace que un producto se sienta ordenado: decide cómo se organiza el contenido, cómo se etiqueta y cómo se navega. Cuando está bien hecha el usuario no la nota; cuando falla, se pierde.
Cuatro sistemas la componen: organización (cómo se agrupan las cosas), etiquetado (cómo se nombran), navegación (cómo se recorren) y búsqueda (cómo se encuentran). Las etiquetas claras, en el lenguaje del usuario, valen más que cualquier menú ingenioso.
El card sorting revela cómo agrupan la información los usuarios; el tree testing valida si tu estructura permite encontrar las cosas.
El card sorting pide a los usuarios agrupar y nombrar tarjetas de contenido: revela su modelo mental, no el del equipo. Puede ser abierto (ellos crean las categorías) o cerrado (eligen entre categorías dadas).
El tree testing hace lo inverso: con la estructura ya definida, se pide encontrar cosas para medir si la jerarquía funciona. Juntos cierran el ciclo: uno propone la estructura, el otro la valida.
Un user flow mapea los pasos y decisiones para completar una tarea. Los wireflows combinan pantallas y flujo en un solo diagrama.
Un user flow dibuja el recorrido que hace una persona para lograr un objetivo: cada paso y cada punto de decisión (¿tiene cuenta?, ¿el pago fue aprobado?). Verlo completo evita callejones sin salida y estados olvidados.
El wireflow combina el flujo con miniaturas de las pantallas, así se ve a la vez qué hace el usuario y qué ve. Es una herramienta excelente para alinear diseño y desarrollo antes de invertir en alta fidelidad.
Menús globales, breadcrumbs y jerarquías dan al usuario un sentido constante de dónde está y cómo volver.
La navegación es el mapa del producto. Un buen sistema responde siempre a tres preguntas: dónde estoy, a dónde puedo ir y cómo vuelvo. Menús globales, breadcrumbs y estados activos mantienen esa orientación.
Hay una tensión entre profundidad (muchos niveles) y amplitud (muchas opciones por nivel): demasiada profundidad esconde el contenido, demasiada amplitud abruma. El equilibrio se valida con tree testing, no a ojo.
Estas actividades se responden en la bitácora del proyecto: ahí registras lo que hiciste, subes la evidencia y explicas cómo aporta al producto común.
Hagan un card sorting con usuarios reales sobre el contenido del producto y traduzcan el resultado en la estructura y las etiquetas del sistema.
Entregable: Arquitectura de información con etiquetas validadas.
Diagramen paso a paso el flujo de la tarea clave del producto, incluyendo los puntos de decisión y los estados de error.
Entregable: Diagrama de user flow (enlace a Figma o Miro).
Responde para comprobar lo aprendido. Al aprobar (75% o más) el módulo se marca como completado y se desbloquea el siguiente.
1. La arquitectura de información se ocupa de:
2. El card sorting sirve para:
3. Un user flow representa:
4. Los breadcrumbs (migas de pan) ayudan a:
Completa el módulo anterior (aprueba su evaluación) para desbloquear este contenido. También puedes activar “Explorar sin bloqueo” arriba.
Del wireframe al diseño visual: tipografía, color, grillas y layout que comunican y guían.
Componer interfaces visualmente coherentes aplicando tipografía, color, grillas y jerarquía.
La tipografía es el 90% del diseño de una interfaz. Una escala tipográfica y buen interlineado crean jerarquía y legibilidad.
En una interfaz casi todo es texto, por eso la tipografía carga con la mayor parte del trabajo visual. Una escala tipográfica —tamaños relacionados por una proporción— crea jerarquía clara: el ojo distingue de inmediato títulos, subtítulos y cuerpo.
La legibilidad depende tanto del tamaño como del interlineado y la longitud de línea. Líneas demasiado largas cansan; el interlineado apretado agobia. Pocas fuentes bien usadas superan a muchas combinadas sin criterio.
El color comunica jerarquía, estado y marca. El contraste suficiente es un requisito de accesibilidad, no un adorno.
El color comunica jerarquía, estado (éxito, error, advertencia) y marca. Pero antes que estético, debe ser funcional: el contraste entre texto y fondo es un requisito de accesibilidad, no un adorno.
Una paleta ordenada suele seguir la regla 60-30-10 (un color dominante, uno secundario y un acento) y nunca depende solo del color para transmitir información: un error debe tener también un ícono o texto, no únicamente el rojo.
Un sistema de espaciado (por ejemplo, base 8) y grillas de columnas dan ritmo y consistencia, y facilitan el diseño responsive.
Las grillas y un sistema de espaciado consistente (por ejemplo múltiplos de 8) le dan ritmo y orden a una pantalla. El espacio en blanco no es 'vacío desperdiciado': agrupa, separa y dirige la atención.
Pensar en columnas y en breakpoints desde el inicio facilita el diseño responsive, para que la misma pantalla funcione en móvil, tablet y escritorio sin tener que rehacerla.
Empezar en baja fidelidad permite iterar rápido sobre estructura antes de invertir en el detalle visual del alta fidelidad.
Diseñar por niveles de fidelidad ahorra tiempo y dinero. En baja fidelidad (bocetos, wireframes) se decide qué va y dónde va, y se corrige barato; el color y el detalle vienen después.
Subir a alta fidelidad demasiado pronto invita a discutir el color de un botón cuando aún no está claro el flujo. La fidelidad progresiva mantiene las conversaciones en el nivel correcto en cada momento.
Estas actividades se responden en la bitácora del proyecto: ahí registras lo que hiciste, subes la evidencia y explicas cómo aporta al producto común.
Definan escala tipográfica, paleta y espaciado del producto, y verifiquen el contraste de los pares texto/fondo (mínimo 4.5:1).
Entregable: Sistema visual + captura del verificador de contraste.
En baja fidelidad diseñen juntos las pantallas del flujo principal. Cada quien propone su versión de una pantalla y luego eligen y justifican.
Entregable: Wireframes lo-fi (enlace) + justificación de lo elegido.
Responde para comprobar lo aprendido. Al aprobar (75% o más) el módulo se marca como completado y se desbloquea el siguiente.
1. Una escala tipográfica sirve para:
2. El contraste de color suficiente es, sobre todo:
3. El grid de 8 puntos ayuda a:
4. ¿Por qué conviene empezar en baja fidelidad (lo-fi)?
Completa el módulo anterior (aprueba su evaluación) para desbloquear este contenido. También puedes activar “Explorar sin bloqueo” arriba.
Dar vida a los diseños con prototipos interactivos en Figma y acelerar el flujo de trabajo con IA.
Construir prototipos interactivos en Figma y aprovechar herramientas de IA de forma crítica en el flujo de diseño.
Frames, Auto Layout, componentes y estilos son la base para diseñar rápido y de forma mantenible en Figma.
Figma es hoy el estándar del diseño de interfaces por ser colaborativo y basado en navegador. Dominar sus fundamentos —frames, capas, Auto Layout, componentes y estilos— te permite diseñar rápido y, sobre todo, de forma mantenible.
Auto Layout es la pieza que marca la diferencia: hace que los elementos se reordenen y espacien solos según el contenido, igual que lo hará el código, ahorrando horas de ajustes manuales.
Conectar pantallas con interacciones, transiciones y Smart Animate convierte mockups estáticos en experiencias navegables para probar con usuarios.
Un mockup estático no revela cómo se siente usar el producto. Al conectar pantallas con interacciones y transiciones (incluido Smart Animate) obtienes un prototipo navegable que las personas pueden recorrer como si fuera real.
Ese prototipo es tu herramienta de validación: con él corres pruebas de usabilidad, detectas fricciones y ajustas antes de escribir una sola línea de código.
Librerías compartidas, variables y tokens permiten escalar un lenguaje visual consistente entre archivos y equipos.
Cuando un producto crece, la consistencia se vuelve difícil de sostener a mano. Un design system —librerías compartidas de componentes, estilos y tokens (variables)— lo resuelve: cambias algo en un lugar y se actualiza en todo el producto.
Los tokens (color, espaciado, tipografía) desacoplan las decisiones de diseño de cada pantalla, lo que facilita mantener temas (claro/oscuro) y escalar el trabajo entre equipos.
La IA acelera bocetos, texto y variaciones, pero el criterio de diseño sigue siendo humano. Conviene conocer sus usos y sus límites éticos.
La inteligencia artificial ya es parte del flujo de diseño: genera borradores de UI, redacta textos y produce variaciones en segundos. Bien usada, elimina trabajo repetitivo y te deja más tiempo para pensar.
Pero la IA no tiene criterio: no sabe qué necesita tu usuario ni qué es ético. Tu papel es dirigirla, filtrar sus resultados y responsabilizarte de las decisiones. La herramienta acelera; el diseñador decide.
Estas actividades se responden en la bitácora del proyecto: ahí registras lo que hiciste, subes la evidencia y explicas cómo aporta al producto común.
Lleven una pantalla del wireframe a alta fidelidad usando Auto Layout, componentes y estilos del sistema visual del equipo.
Entregable: Pantalla en Figma (enlace) construida con componentes.
Conecten las pantallas en un prototipo navegable listo para probar con usuarios, y documenten qué generaron con IA y qué decidieron a mano.
Entregable: Prototipo navegable (enlace) + registro del uso de IA.
Responde para comprobar lo aprendido. Al aprobar (75% o más) el módulo se marca como completado y se desbloquea el siguiente.
1. En Figma, Auto Layout sirve para:
2. Un prototipo interactivo se usa principalmente para:
3. Los componentes y variantes en Figma sirven para:
4. Sobre la IA en el flujo de diseño, lo más correcto es:
Completa el módulo anterior (aprueba su evaluación) para desbloquear este contenido. También puedes activar “Explorar sin bloqueo” arriba.
Validar con usuarios reales y garantizar que el producto sea usable y accesible para todas las personas.
Planear y ejecutar una prueba de usabilidad y aplicar criterios de accesibilidad WCAG.
Observar a personas reales usando el producto revela problemas que ninguna opinión interna detecta. Con 5 usuarios se encuentra la mayoría de fallos.
Observar a personas reales usando el producto revela problemas que ninguna reunión interna detecta. En una prueba de usabilidad, el participante intenta completar tareas mientras tú observas dónde duda, se equivoca o se frustra.
Puede ser moderada (alguien guía en vivo) o no moderada (a distancia con una herramienta). La técnica de 'pensar en voz alta' es la más valiosa: pedirle a la persona que narre lo que piensa. Y no necesitas multitudes: con unos 5 usuarios afloran la mayoría de los fallos.
Un producto accesible es perceptible, operable, comprensible y robusto (POUR). WCAG define criterios concretos en niveles A, AA y AAA.
Diseñar accesible es diseñar para todas las personas, incluidas quienes usan lector de pantalla, navegan solo con teclado o tienen baja visión. No es un extra: en muchos países es una obligación, y siempre mejora la experiencia de todos.
WCAG organiza sus criterios en cuatro principios (POUR): perceptible, operable, comprensible y robusto, con niveles A, AA y AAA. En la práctica, atender el contraste, la navegación por teclado y los textos alternativos resuelve gran parte del camino.
El feedback inmediato, los estados claros y la animación con propósito hacen que la interfaz se sienta viva y comprensible, sin distraer.
Los detalles de interacción hacen que un producto se sienta vivo: el botón que responde al tocarlo, el estado de carga que avisa que algo pasa, la validación que aparece justo cuando la necesitas. Ese feedback constante reduce la incertidumbre.
La animación debe tener propósito: orientar, dar continuidad o confirmar una acción, nunca solo adornar. El movimiento excesivo distrae y, para algunas personas, marea; por eso se respeta la preferencia de menos movimiento.
No todos los hallazgos pesan igual. Clasificar por severidad permite priorizar qué corregir primero y volver a probar.
Una prueba deja una lista de hallazgos, pero no todos pesan igual. Clasificarlos por severidad —desde cosméticos hasta bloqueantes— permite decidir qué corregir primero con criterio y no por quién grita más fuerte.
Diseñar es iterar: se corrige, se vuelve a probar (retest) y se confirma que el cambio realmente mejoró. La evidencia, no la opinión, es la que cierra cada ciclo.
Estas actividades se responden en la bitácora del proyecto: ahí registras lo que hiciste, subes la evidencia y explicas cómo aporta al producto común.
Prueben el prototipo con 3 a 5 personas usando la técnica de pensar en voz alta. Roten roles: quien modera, quien observa y quien documenta.
Entregable: Registro por sesión + hallazgos priorizados por severidad.
Auditen el prototipo con criterios WCAG: contraste, navegación por teclado, textos alternativos, tamaño de toque y claridad del feedback.
Entregable: Checklist de accesibilidad con hallazgos y correcciones.
Responde para comprobar lo aprendido. Al aprobar (75% o más) el módulo se marca como completado y se desbloquea el siguiente.
1. ¿Con cuántos usuarios se detecta la mayoría de problemas de usabilidad?
2. Los principios de accesibilidad WCAG se resumen en POUR, que significa:
3. En 'pensar en voz alta' (think aloud), el usuario:
4. Clasificar los hallazgos por severidad sirve para:
Completa el módulo anterior (aprueba su evaluación) para desbloquear este contenido. También puedes activar “Explorar sin bloqueo” arriba.
Integrar todo el proceso en un proyecto real y comunicarlo con impacto: del concepto al caso de estudio.
Consolidar el proceso completo en un proyecto y presentar las decisiones de diseño de forma clara y persuasiva.
Definir el alcance mínimo viable y priorizar (por ejemplo, con MoSCoW) evita el sobrediseño y permite aprender rápido con lo esencial.
Tener una idea grande es fácil; entregar algo útil es lo difícil. El MVP (producto mínimo viable) es la versión más pequeña que ya aporta valor y te permite aprender de usuarios reales, en lugar de construir durante meses a ciegas.
Para definirlo se prioriza. Marcos como MoSCoW (Must, Should, Could, Won't) ayudan a separar lo imprescindible de lo deseable, y un design sprint puede llevarte de la idea a un prototipo probado en pocos días.
Un buen case study cuenta la historia del problema, el proceso y el impacto —no solo pantallas bonitas—. El storytelling hace memorable tu trabajo.
Tu portafolio no se juzga por las pantallas, sino por cómo piensas. Un buen caso de estudio cuenta una historia: cuál era el problema, qué hiciste para entenderlo, qué decisiones tomaste y qué resultó de ello.
El storytelling y los contrastes 'antes / después' hacen memorable tu trabajo. Mostrar el proceso —incluidos los caminos que descartaste— comunica criterio, que es justo lo que buscan quienes contratan.
Explicar el porqué (rationale) de cada decisión, manejar el feedback con apertura y entregar bien a desarrollo son habilidades tan importantes como diseñar.
Un diseño que no sabes explicar es un diseño a medias. Presentar bien significa justificar cada decisión con su rationale —por qué esto y no aquello— conectándolo con las necesidades del usuario y los objetivos del negocio.
Recibir feedback con apertura y entregar el diseño con claridad a desarrollo (handoff, con especificaciones y Dev Mode) cierra el ciclo. Comunicar es una habilidad de diseño tan importante como dibujar pantallas.
El diseño es un oficio de aprendizaje continuo. Comunidades, lectura constante y práctica deliberada mantienen tu criterio afilado.
El diseño es un oficio que nunca se termina de aprender: las herramientas cambian, los patrones evolucionan y cada proyecto enseña algo nuevo. Lo que se mantiene es el método —entender, diseñar, probar, iterar— que practicaste en este curso.
De aquí en adelante, tu mejor inversión es la práctica deliberada: sigue construyendo productos, participa en comunidades, lee referentes y pide crítica. Tu proyecto de este curso es el primer caso de un portafolio que apenas empieza.
Estas actividades se responden en la bitácora del proyecto: ahí registras lo que hiciste, subes la evidencia y explicas cómo aporta al producto común.
Cada quien escribe su caso de estudio del proyecto desde su matiz o especialidad, contando problema, proceso, decisiones e impacto.
Entregable: Caso de estudio individual (enlace) para su portafolio.
Consoliden el producto digital, la presentación y el repositorio de cierre. Preparen la sustentación ante la institución.
Entregable: Producto, presentación y repositorio de cierre completos.
Responde para comprobar lo aprendido. Al aprobar (75% o más) el módulo se marca como completado.
1. Un MVP (producto mínimo viable) es:
2. La priorización MoSCoW clasifica requisitos en:
3. Un buen caso de estudio de portafolio muestra sobre todo:
4. Al presentar y defender un diseño, lo más importante es:
Completa el módulo anterior (aprueba su evaluación) para desbloquear este contenido. También puedes activar “Explorar sin bloqueo” arriba.
