Curso de Diseño de Interfaz de Usuario para Equipos de Diseño

Crear documentos HTML correctamente estructurados con `doctype`, `html`, `head`, `body`, metadatos, idioma, título y viewport.

Usar etiquetas semánticas como `header`, `nav`, `main`, `section`, `article`, `aside` y `footer` según el significado real del contenido.

Organizar encabezados con jerarquía lógica para que la página sea comprensible para usuarios, buscadores y tecnologías de asistencia.

Construir menús, listados, enlaces, botones, imágenes, tablas y bloques de contenido con el elemento adecuado para cada caso.

Evitar usar `div` y `span` para todo cuando existen elementos nativos más expresivos y accesibles.

Añadir textos alternativos útiles en imágenes, diferenciando imágenes informativas, decorativas, funcionales y complejas.

Diseñar tablas solo para datos tabulares, con encabezados, caption y estructura comprensible.

Crear enlaces claros y botones reales, evitando elementos falsos que rompen navegación por teclado y accesibilidad.

Preparar plantillas base para landing, dashboard, página de detalle, formulario y área privada.

Construir una página semántica completa con navegación, contenido principal, secciones, llamadas a la acción y pie de página.

Definir jerarquía visual mediante tamaño, peso, color, contraste, posición, espaciado y agrupación.

Aplicar principios de composición para ordenar contenido, reducir ruido visual y guiar al usuario hacia la acción principal.

Diseñar escalas tipográficas coherentes para títulos, subtítulos, párrafos, ayudas, etiquetas, errores y elementos auxiliares.

Crear sistemas de espaciado con valores reutilizables para márgenes, paddings, gaps, secciones y componentes.

Trabajar con color de forma funcional: estados, alertas, acciones, fondos, bordes, foco, feedback y marca.

Evitar interfaces saturadas con demasiados tamaños, estilos, colores, sombras y decisiones visuales aisladas.

Diseñar botones, enlaces, tarjetas, badges, inputs, alertas y menús con consistencia visual.

Usar wireframes rápidos para validar estructura antes de invertir tiempo en CSS detallado.

Traducir una guía visual sencilla a tokens: colores, tipografías, radios, sombras, espaciados y tamaños.

Construir un mini sistema visual base para utilizarlo durante el resto del curso.

Escribir CSS limpio con selectores claros, baja especificidad y convenciones de nombres mantenibles.

Entender cascada, herencia, especificidad, orden de aparición y cómo se resuelven conflictos de estilos.

Usar custom properties para colores, espaciados, tipografía, tamaños, sombras, radios y temas visuales.

Aplicar cascade layers para organizar reset, base, layout, componentes, utilidades y overrides sin pelear constantemente con especificidad.

Diseñar una arquitectura CSS que permita crecer sin duplicar reglas ni crear estilos imposibles de depurar.

Crear resets o normalizaciones controladas sin eliminar comportamientos útiles del navegador.

Usar pseudo-clases y pseudo-elementos para estados, decoraciones, foco, interacción y detalles visuales.

Evitar `!important` salvo casos muy justificados y documentados.

Organizar CSS por capas, componentes, utilidades y patrones comunes.

Construir una hoja de estilos base reutilizable para proyectos corporativos.

Diseñar layouts mobile-first que funcionen primero en pantallas pequeñas y escalen hacia escritorio.

Usar Flexbox para navegación, alineaciones, grupos de botones, barras, tarjetas, toolbars y componentes flexibles.

Usar CSS Grid para estructuras bidimensionales, dashboards, galerías, layouts complejos y zonas de contenido.

Combinar Grid y Flexbox sin forzar una única técnica para todos los problemas de diseño.

Crear breakpoints basados en contenido y necesidades reales, no solo en tamaños genéricos de dispositivos.

Aplicar container queries para que un componente se adapte al tamaño de su contenedor, no solo al viewport.

Diseñar cards, tablas, formularios y menús que se comporten bien en móvil, tablet, escritorio y pantallas grandes.

Evitar layouts rígidos basados en alturas fijas, anchos absolutos o dependencias visuales frágiles.

Probar diseños con DevTools, emulación de dispositivos, zoom, fuentes grandes y contenido variable.

Construir una página responsive completa con header, hero, grid de contenidos, formulario, sidebar y footer.

Diseñar componentes con estructura HTML clara, estilos encapsulados, variantes visuales y estados definidos.

Crear botones primarios, secundarios, destructivos, deshabilitados, de carga, con icono y de ancho completo.

Construir tarjetas para productos, servicios, usuarios, artículos, métricas o proyectos, con contenido flexible y acciones.

Diseñar navegación principal, navegación secundaria, breadcrumbs, menús móviles y estados activos.

Implementar tabs, acordeones, dropdowns y modales respetando semántica, foco, teclado y roles necesarios.

Evitar componentes que solo funcionan con ratón o que no indican estado a lectores de pantalla.

Definir estados de componente: hover, focus, active, disabled, loading, selected, expanded, collapsed y error.

Separar componente, layout y contenido para reutilizar patrones en diferentes páginas.

Documentar cada componente con uso recomendado, variantes, límites y ejemplos.

Crear una pequeña librería de componentes UI en HTML, CSS y JavaScript vanilla.

Diseñar formularios claros con etiquetas visibles, ayudas, agrupaciones, orden lógico y acciones comprensibles.

Usar tipos de input adecuados para email, teléfono, número, fecha, búsqueda, contraseña, selección y subida de archivos.

Crear validaciones HTML nativas y validaciones JavaScript complementarias cuando la lógica lo requiera.

Mostrar errores junto al campo afectado, con mensajes concretos, accesibles y orientados a corrección.

Evitar placeholders como sustituto de labels, porque desaparecen y empeoran comprensión y accesibilidad.

Diseñar estados de formulario: vacío, enfocado, válido, inválido, cargando, enviado, error global y éxito.

Agrupar campos con `fieldset` y `legend` cuando el formulario contiene opciones relacionadas.

Crear formularios largos con secciones, progreso, guardado parcial o revisión final cuando sea necesario.

Prevenir envíos duplicados, pérdida de datos y errores silenciosos.

Construir un formulario completo de alta, contacto o solicitud con validación, feedback y diseño responsive.

Aplicar WCAG 2.2 como referencia para crear interfaces más perceptibles, operables, comprensibles y robustas.

Revisar contraste de color, tamaño de texto, foco visible, navegación por teclado y orden lógico de tabulación.

Usar HTML semántico antes de añadir ARIA, evitando roles innecesarios que duplican o rompen comportamiento nativo.

Diseñar componentes interactivos que indiquen estado, nombre accesible, descripción y cambios relevantes.

Crear modales accesibles con gestión de foco, cierre por teclado, bloqueo de interacción externa y retorno al elemento inicial.

Diseñar mensajes de error, alertas, estados de carga y cambios dinámicos comprensibles para usuarios con tecnologías de asistencia.

Evitar interfaces que dependen solo del color para transmitir error, éxito, prioridad o estado.

Probar formularios, menús, botones, tabs y componentes con teclado y herramientas de inspección de accesibilidad.

Crear una checklist de accesibilidad para revisar cada pantalla antes de entregarla.

Mejorar una interfaz existente detectando problemas de semántica, contraste, foco, teclado y feedback.

Usar JavaScript moderno con `let`, `const`, funciones, arrays, objetos, módulos y buenas prácticas de organización.

Manipular el DOM de forma controlada para leer, crear, modificar, insertar y eliminar elementos.

Gestionar eventos de usuario: clic, input, submit, change, keydown, focus, blur, scroll y resize.

Separar lógica, selección de elementos, actualización de interfaz y datos internos para evitar scripts caóticos.

Usar módulos JavaScript para dividir código en archivos reutilizables y mejorar mantenibilidad.

Crear estados sencillos para menús, filtros, tabs, modales, formularios, contadores o paneles desplegables.

Evitar manipular estilos inline de forma masiva cuando puede resolverse con clases CSS y estados bien definidos.

Gestionar errores en JavaScript para que la interfaz no falle silenciosamente.

Depurar código con consola, breakpoints, inspección de eventos y herramientas del navegador.

Construir interacciones base para menú móvil, modal, filtros, tabs y validación progresiva.

Entender cuándo una interfaz necesita consumir datos externos desde una API, archivo JSON o servicio interno.

Usar Fetch API para solicitar recursos de red de forma más flexible que enfoques antiguos como XMLHttpRequest.

Trabajar con promesas, `async/await`, estados de carga, éxito, error y datos vacíos.

Renderizar tarjetas, listados, tablas, filtros y detalles a partir de datos JSON.

Gestionar errores de red, respuestas no válidas, timeouts, datos incompletos y mensajes de feedback al usuario.

Evitar bloquear la interfaz mientras se cargan datos o dejar pantallas vacías sin explicación.

Diseñar skeletons, spinners, mensajes de carga y estados alternativos para mejorar percepción de rendimiento.

Crear filtros, búsquedas, ordenaciones y paginación sencilla en el cliente.

Separar obtención de datos, transformación y renderizado visual en funciones diferentes.

Construir una interfaz dinámica que cargue datos, los muestre, permita filtrarlos y gestione errores.

Usar transiciones CSS para mejorar cambios de estado en botones, enlaces, tarjetas, menús y formularios.

Crear animaciones útiles para entrada de elementos, carga, expansión, confirmación, error y desplazamiento.

Diferenciar microinteracción funcional de decoración innecesaria que distrae o ralentiza.

Respetar preferencias de usuario como reducción de movimiento mediante `prefers-reduced-motion`.

Evitar animaciones que impiden usar la interfaz, ocultan información o generan mareo.

Añadir feedback inmediato en acciones: guardando, enviado, error, completado, seleccionado o actualizado.

Diseñar estados de carga y transición entre pantallas para que el usuario entienda qué está ocurriendo.

Usar `transform` y `opacity` cuando sea posible para animaciones más eficientes.

Coordinar animaciones con accesibilidad, rendimiento y consistencia visual.

Construir un conjunto de microinteracciones para formularios, cards, modales, alertas y navegación.

Optimizar imágenes con tamaños adecuados, formatos modernos, compresión, `srcset`, lazy loading y atributos de dimensión.

Reducir CSS y JavaScript innecesario para mejorar carga inicial y tiempo de interacción.

Gestionar fuentes web con criterio: pesos necesarios, `font-display`, fallback y coherencia visual.

Evitar layouts que provocan saltos visuales por imágenes sin tamaño, fuentes mal cargadas o contenido insertado tarde.

Medir rendimiento con DevTools, Lighthouse y paneles de red, rendimiento y cobertura.

Analizar peso de recursos, solicitudes, bloqueo de renderizado, scripts largos y estilos no utilizados.

Crear estrategias de carga progresiva para interfaces con contenido dinámico.

Diseñar componentes que funcionen rápido incluso con datos variables, imágenes grandes o dispositivos modestos.

Revisar impacto de animaciones, sombras, filtros, vídeos y assets pesados.

Optimizar una interfaz existente reduciendo peso, mejorando carga y manteniendo calidad visual.

Crear un sistema de diseño ligero basado en tokens, componentes, patrones, documentación y ejemplos reutilizables.

Definir reglas para espaciado, color, tipografía, estados, iconografía, grid, breakpoints y comportamiento responsive.

Diseñar componentes que funcionen en distintos contextos: card en grid, sidebar, modal, dashboard, móvil y página de detalle.

Usar container queries para crear componentes verdaderamente adaptativos dentro de layouts variables.

Crear utilidades CSS controladas para espaciado, visibilidad, alineación, layout y estados comunes.

Evitar duplicar componentes visualmente parecidos con nombres y reglas distintas.

Documentar componentes con ejemplos, variantes, reglas de uso, accesibilidad y límites.

Preparar una guía de revisión para asegurar consistencia entre pantallas y equipos.

Escalar una interfaz desde una página aislada hasta un pequeño producto con varias vistas.

Construir una guía UI interna con tokens, componentes, patrones responsive y ejemplos codificados.

Revisar interfaces en distintos navegadores, tamaños, zoom, sistemas operativos y dispositivos.

Usar DevTools para inspeccionar HTML, CSS, layout, eventos, red, rendimiento, accesibilidad y errores JavaScript.

Crear checklists de QA visual: alineación, espaciados, estados, responsive, formularios, enlaces, textos y contenido variable.

Validar HTML, revisar errores de consola y detectar CSS no utilizado o reglas sobrescritas.

Probar navegación por teclado, foco, contraste, etiquetas, errores de formulario y comportamiento de modales.

Diseñar pruebas manuales y semiautomáticas para componentes críticos.

Usar capturas comparativas para detectar regresiones visuales entre versiones.

Evitar aprobar una interfaz solo porque “se ve bien” en la pantalla del desarrollador.

Crear criterios de aceptación frontend para historias de usuario y tareas de diseño.

Preparar una revisión completa de calidad de una interfaz antes de publicarla o entregarla.

Definir el objetivo del proyecto final: landing avanzada, dashboard, portal interno, ficha de producto, área de cliente o sistema de solicitudes.

Crear wireframe inicial con estructura, contenido, secciones, jerarquía, navegación y acciones principales.

Implementar HTML semántico con estructura clara, encabezados correctos, imágenes, formularios, botones y contenido accesible.

Diseñar CSS completo con tokens, layout responsive, componentes, estados, estilos base, variantes y arquitectura mantenible.

Añadir JavaScript para interacción: menú móvil, filtros, modales, validación, carga de datos, feedback y estados dinámicos.

Integrar datos desde JSON o API simulada usando Fetch, controlando carga, error, vacío y renderizado.

Aplicar accesibilidad: contraste, foco visible, teclado, labels, errores, semántica y reducción de movimiento.

Optimizar rendimiento con imágenes adecuadas, CSS limpio, JS organizado, fuentes controladas y medición en navegador.

Documentar decisiones de diseño, estructura de archivos, componentes, criterios responsive, accesibilidad y mejoras futuras.

Presentar el proyecto final con demo, explicación técnica, revisión UI, checklist de calidad y plan de evolución.