Diseño UI y Sistemas de Diseño

Este curso propone construir un sistema de diseño pequeño, coherente y comprobable a partir de decisiones concretas de interfaz. El punto de partida no es decorar una pantalla, sino observar cómo una persona encuentra información, interpreta una acción y recupera el control cuando algo sale mal. Trabajarás con un producto ficticio de reservas para una biblioteca municipal: debe mostrar disponibilidad, permitir filtrar ejemplares y confirmar una reserva sin ambigüedades. El escenario ofrece suficientes estados para practicar jerarquía, color, tipografía, componentes y documentación.

En el primer módulo estudiarás cómo ordenar una pantalla. Analizarás la relación entre título, resumen, filtros, lista de resultados y acción principal. Compararás una composición con demasiados focos de atención con otra que usa escala, contraste, alineación y espacio para establecer una secuencia clara. Después convertirás la teoría del color en decisiones funcionales: estados de éxito, advertencia y error, contraste de texto y señales que no dependan únicamente del color. La tipografía se definirá como una escala con tamaños, pesos y alturas de línea adecuados para títulos, datos y ayudas breves. La lección de iteración reunirá estas decisiones en ciclos de observación, hipótesis, cambio y comprobación.

El segundo módulo convierte las decisiones visuales en un sistema. Primero distinguirás entre principios, tokens, componentes, patrones y documentación. Luego crearás tokens primitivos y semánticos para color, espacio, radio, sombra y texto. La diferencia será importante: un token llamado color-azul-600 describe un valor, mientras que texto-acción describe una función que puede cambiar sin modificar cada componente. Documentarás componentes indicando anatomía, variantes, estados, reglas de uso, accesibilidad y casos límite. La auditoría partirá de pantallas con inconsistencias reales del escenario: botones con alturas distintas, formularios sin mensajes claros y tarjetas con rellenos incompatibles. En lugar de normalizar todo indiscriminadamente, priorizarás según frecuencia, impacto y esfuerzo.

El mini caso de portfolio servirá para explicar el razonamiento completo. Mostrarás el problema inicial, el inventario, los tokens elegidos, la evolución de dos componentes y una pantalla reconstruida. El plan de siete días dividirá el trabajo en sesiones breves con entregas verificables: inventario, escala visual, componentes, documentación, prueba y revisión. Así evitarás confundir actividad con avance.

El módulo de medición y mejora ampliará el horizonte a treinta días. Definirás indicadores observables, como tiempo para localizar un filtro, errores al confirmar una reserva o cantidad de variantes duplicadas. No asumirás que una interfaz mejor es la que recibe opiniones más entusiastas: compararás una línea base con una versión modificada, registrarás condiciones y anotarás límites de la observación. Las decisiones se revisarán por evidencia, no por preferencia personal.

En el cierre elaborarás un plan de implementación con prioridades, responsables, dependencias y criterios de aceptación. El trabajo final consiste en entregar un mini sistema para la pantalla de reservas: inventario auditado, tokens, componentes documentados, flujo antes y después, registro de mediciones y una propuesta de mantenimiento. Se comprobará mediante una rúbrica: jerarquía comprensible en una revisión rápida, contraste suficiente, escala tipográfica consistente, estados explícitos, nombres de tokens funcionales, documentación accionable y una comparación medible. La entrega debe permitir que otra persona reproduzca la pantalla y entienda por qué cada decisión existe.