Pulido de interfaz
Haz que la interfaz sea más fácil de leer, de apuntar y de navegar. Comienza con el producto que existe: su tipografía, iconos, colores, densidad, componentes y framework. Mejora las relaciones entre esas elecciones. Cambia una convención visual solo cuando un problema observado o la solicitud del usuario lo justifique.
Encuentra la fricción en el uso
Rastrea una tarea representativa a través de la pantalla real. Abre un menú, selecciona una fila, estrecha un panel, aplica un filtro y regresa al contenido. Lee las definiciones de componentes y tokens detrás de los problemas visibles. Las capturas de pantalla revelan jerarquía y espaciado; la interacción revela enfoque recortado, controles inalcanzables y movimiento que se corta.
Prioriza los fallos que bloquean la lectura o la acción antes que las inconsistencias cosméticas. Vincula cada cambio propuesto a un síntoma concreto: metadatos que desaparecen, una acción final empujada fuera de la vista, un número que tiembla o un menú cuya escala salta mientras su opacidad se desvanece. Para una solicitud amplia, elige una pasada coherente e impleméntala. Para una solicitud de solo revisión, proporciona hallazgos con ubicaciones y evidencia.
Inspecciona las instrucciones del repositorio, la cadena de herramientas compatible y las comprobaciones existentes antes de editar. Lee la cascada actual y cualquier cambio superpuesto. Una sustitución de token que se ve idéntica en una rama puede cambiar la geometría después de que otra rama actualice ese token.
Asigna trabajos distintos a texto e iconos
Establece un conjunto pequeño de roles de texto. Deja que el título de la fila lidere, que los metadatos expliquen y que la acción siga siendo reconocible. Una interfaz de escritorio densa podría usar títulos de 14px/600, metadatos de 12px/400 y etiquetas de sección de 16px. Trátalos como puntos de partida; una app con mucho texto o táctil puede necesitar texto más grande. Mantén la fuente establecida si puede expresar los pesos requeridos.
Usa espaciado y peso para separar roles antes de agregar más recuadros o colores. Mantén los metadatos relacionados debajo de su título con un espacio intencional. Usa cifras tabulares para recuentos que se actualizan y reserva suficiente ancho para el valor esperado más grande. Equilibra los encabezados cortos o usa un mejor ajuste de párrafo donde sea compatible, sin depender de reglas de ajuste para arreglar un panel de tamaño insuficiente.
Mide el texto secundario contra su fondo real en cada tema compatible. El texto ordinario necesita al menos una relación de contraste de 4.5:1. La opacidad se combina con los colores de superficie, por lo que un valor de token plausible por sí solo demuestra poco. Conserva la paleta del producto y los roles de color semántico; no se requiere ninguna fuente, tono de acento, biblioteca de iconos o tema solo neutro en particular.
Mantén los tamaños de icono y el peso óptico consistentes dentro de un rol. Inspecciona el conjunto existente antes de cambiar el grosor del trazo, porque las bibliotecas usan geometría diferente. Un glifo pequeño puede estar en un botón más grande. Proporciona nombres accesibles a los controles solo con iconos y oculta los duplicados decorativos de la tecnología de asistencia.
Haz que la geometría apoye la acción
Usa la escala de radio existente de manera consistente. Si la escala misma necesita trabajo, asigna los tamaños a roles como chips pequeños, controles y paneles flotantes en lugar de reemplazar cada esquina con un radio. Para formas anidadas, deriva el radio interior del radio exterior menos el recuadro real, incluidos el borde y el relleno. Ajústalo a cero cuando sea necesario.
Dimensiona el objetivo interactivo por separado del icono o texto visible. Apunta al menos a 24 por 24 píxeles CSS en controles compactos y objetivos táctiles más generosos donde el espacio lo permita. WCAG tiene espaciado y otras excepciones; verifícalas explícitamente antes de confiar en ellas. Prefiere el relleno del botón o una etiqueta envolvente. Las extensiones invisibles del área de impacto necesitan comprobaciones de recorte, superposición y activación accidental de controles vecinos.
Usa bordes y sombras para agrupar, estado o elevación cuando ayuden. Otro plano de sombra rara vez es la primera solución para una jerarquía débil. Conserva el enfoque visible dentro de listas recortadas, usando un tratamiento de recuadro cuando sea apropiado. Mantén las acciones esenciales descubribles sin pasar el ratón, incluso en dispositivos táctiles.
Responde al espacio que tiene el componente
Una ventana ancha puede contener un área de trabajo estrecha después de que se abra una barra lateral o un inspector. Dimensiona los encabezados, filas y compositores reutilizables a partir del ancho disponible del panel. Coloca consultas de contenedor en el ancestro relevante y adapta sus descendientes; una consulta de tamaño no puede cambiar el tamaño de su propio contenedor de consulta. Verifica la posición y superposición de superposiciones después de introducir el confinamiento.
Decide qué cede primero. Deja que las etiquetas se encojan con min-width: 0, reserva una pista estable para la acción de seguimiento, luego degrada el cromo secundario antes de comprimir la tarea principal. Una etiqueta oculta aún necesita un nombre accesible. Eliminar una divulgación decorativa es diferente de eliminar la única forma de activar una fila.
Prueba títulos largos, conteos grandes, metadatos reales, listas vacías y resultados filtrados. Explica por qué una vista está vacía y ofrece una recuperación apropiada, como limpiar un filtro o crear un elemento. Mantén el contenido existente durante la actualización en segundo plano cuando sigue siendo válido. No reemplaces filas cargadas con un esqueleto solo porque comenzó una solicitud.
Lee las trampas de implementación al cambiar la capacidad de respuesta del panel, controles anidados o superposiciones.
Haz que el movimiento coincida con el cambio de estado
Usa el sistema de animación y los tokens de suavizado ya presentes. Inspecciona los estilos calculados antes de afirmar que un reemplazo de clase o token cambia el movimiento. Transiciona explícitamente las propiedades que realmente cambian: la scale y translate CSS individuales están separados de transform.
Favorece viajes pequeños y asentamiento rápido para controles rutinarios. Una entrada de alrededor de 150–250 ms y una salida más corta pueden ser útiles, pero la frecuencia y el propósito deciden la sincronización. Evita escalar filas desde cero, llegadas escalonadas lentas en listas de trabajo y animaciones en cada actualización transmitida. Anima solo lo que ayuda a alguien a seguir un cambio.
Mantén el movimiento al pasar el ratón detrás de condiciones de puntero fino capaces de pasar el ratón. Los controles esenciales permanecen disponibles para los usuarios de teclado y táctiles. Un cierre durante una apertura debe revertirse desde el estado visible, y un elemento que sale debe dejar de aceptar entrada. Cuando un diálogo o menú primitivo ya gestiona la presencia y el enfoque, usa su ciclo de vida de salida compatible. No agregues un segundo temporizador de desmontaje o un controlador de enfoque en competencia. El despido lógico y la restauración del enfoque deben seguir el comportamiento de la primitiva sin esperar el movimiento decorativo de salida.
El movimiento reducido alcanza el mismo estado final utilizable sin viaje espacial. Verifica la lógica de finalización cuando se eliminan las transiciones. Usa una habilidad de movimiento dedicada para resortes complejos, coreografía o arquitectura de animación; esta pasada no requiere instalar otro paquete de habilidad.
Verifica el resultado que la gente usará
Inspecciona el resultado combinado después de todos los cambios, con los mismos datos antes y después. Incluye una pantalla ancha con un panel estrecho, un viewport de tamaño de teléfono, temas compatibles, navegación por teclado y acceso táctil. Verifica la reversión a medio camino y el movimiento reducido para las ediciones de movimiento. Una captura de pantalla estática no puede establecer que una salida se anima correctamente.
Ejecuta las pruebas aplicables del repositorio, lint, typecheck y compilación usando su tiempo de ejecución compatible. Investiga los fallos antes de culpar al parche. Cuando sea necesaria una comparación de referencia, reprodúcela con el mismo tiempo de ejecución y configuración. Prefiere comprobaciones de comportamiento para la ruta cambiada; las afirmaciones de cadena CSS por sí solas no pueden establecer contraste, geometría, visibilidad de enfoque o continuidad de animación.
Informa qué cambió y por qué, las comprobaciones realmente realizadas y cualquier incertidumbre restante. Separa las mejoras observadas de la limpieza de tokens sin efecto visible. Mantén las descripciones y la evidencia actualizadas después de la integración. Para inspiración externa, inspecciona la fuente actual, adapta el principio a este producto y acredita las fuentes públicas. Di cuando una fuente fue inaccesible en lugar de inventar una cita o respaldo.