T1 Guía de estudio 11 apartados + guía de Figma

Visión general de T1

Esta web mejorada de T1 no representa actividades evaluables: en la fuente original, UD1 no tiene página de actividades publicada. Es una reestructuración de los 11 apartados de teoría más el manual de Figma, pensada para estudiar y consultar, con autocomprobación de comprensión en cada página.

Tu progreso en el tema

El progreso se guarda en este navegador. Inicia sesión para sincronizarlo entre dispositivos.

✓Cómo usar esta guía

  • Empieza por 1 · Fundamentos IPO y avanza en orden: los apartados siguen la numeración del profesor y la guía de Figma (G1-G3) va al final como material de consulta práctica.
  • Cada página es autosuficiente: teoría, tablas, código y ejemplos. No necesitas volver aquí para completarla.
  • Las casillas de cada página son puntos de autocomprobación ("sé explicar...", "conozco...") para repasar si has entendido el apartado — no son pasos de una tarea que se entrega.
  • Los bloques de código tienen botón Copiar.
Meta del temaTerminar con una base sólida de usabilidad, accesibilidad WCAG y principios de diseño de interfaces, más soltura práctica en Figma para prototipar.

1Qué cubre UD1

Mapa de los 14 bloques de este tema.

Teoría (apartados 1-11)

Desde los fundamentos de la IPO/HCI hasta accesibilidad, sistemas de diseño, gestión de errores, herramientas de evaluación e IA aplicada a interfaces.

Guía de Figma (G1-G3)

Manual práctico de prototipado: estructura y sistemas de diseño (G1), interacción y animación (G2), accesibilidad dentro de Figma y entrega de un prototipo (G3).

Glosario transversal

TérminoIdea
UI / UXApariencia visual y componentes (UI) frente a la vivencia global de uso (UX).
WCAGPautas de accesibilidad web (principios Perceptible, Operable, Comprensible, Robusto).
HeurísticaRegla de usabilidad empírica (p. ej. las 10 heurísticas de Nielsen).
Wireframe / Mockup / PrototipoNiveles crecientes de fidelidad de una interfaz antes de programarla.
Design TokenValor atómico de diseño (color, tamaño, espaciado) reutilizable en toda la interfaz.
Smart AnimateMotor de Figma que interpola propiedades entre capas con el mismo nombre y jerarquía.

Contenido reestructurado a partir de pablomp.eu (UD1 — Introdución ás GUI, Usabilidade e Accesibilidade). Fuente única de la verdad para cualquier duda de detalle.