Diseño digital, interfaces y nuevas tecnologías
El bloque evalúa si entiendes el diseño de interfaces como un proceso centrado en el usuario, con reglas medibles de accesibilidad y sistemas de componentes, y si sabes distinguir las capas del trabajo digital.
Del problema al interfaz
- UX: investigación, arquitectura de la información, flujos, test con usuarios. UI: capa visual, componentes y estados.
- Wireframe (estructura, sin estilo), mockup (aspecto visual) y prototipo (navegable y testeable, de baja o alta fidelidad).
- Sistema de diseño: tokens de color, tipografía y espaciado; componentes con estados (reposo, hover, foco, activo, deshabilitado, error). El atomic design organiza átomos, moléculas, organismos, plantillas y páginas.
- Leyes de interacción: Fitts (objetivos grandes y cercanos se aciertan antes), Hick (menos opciones, decisión más rápida), retícula de 8 pt para el espaciado.
Accesibilidad y adaptación
- WCAG: contraste mínimo 4,5:1 en texto normal y 3:1 en texto grande; foco visible; texto alternativo; navegación por teclado; principios POUR (perceptible, operable, comprensible, robusto) y niveles A, AA, AAA.
- Áreas táctiles: alrededor de 44 × 44 pt en iOS y 48 × 48 dp en Material Design.
- Responsive: mobile first, breakpoints y reorganización del contenido, no simple reducción de escala.
Ejemplo razonado
Botón primario de una app. Se fija una altura táctil de 48 px, etiqueta verbal explícita ("Enviar solicitud", no "OK") y estado de foco visible con anillo de 2 px. Se comprueba el contraste del texto sobre el azul corporativo: si no alcanza 4,5:1, se oscurece el fondo y se registra la variante como token. Por último se define el estado deshabilitado con texto e icono, no solo con opacidad, para que se entienda también sin percibir diferencias sutiles de color. El razonamiento encadena requisito, medida, verificación y documentación: eso es lo que se valora.
Errores que restan nota
- Confundir UX (problema, flujo, investigación) con UI (capa visual).
- Llamar "mobile first" a encoger la versión de escritorio.
- Eliminar el anillo de foco "porque es feo": rompe el uso por teclado.
- Emplear patrones oscuros que inducen a error o dificultan cancelar una acción.
- Confundir wireframe con mockup o con prototipo funcional.