Lección 8 de 12 · Lectura y práctica
Auditoría de componentes UI
Auditoría de componentes UI Antes de construir un design system, auditá el producto real. Una auditoría de componentes revela botones duplicados, inputs inconsistentes, cards con estilos mezclados y patrones que se repiten sin.
Del concepto a la práctica
Taller de esta lección
Una auditoría convierte la inconsistencia visual en un inventario priorizable. El objetivo no es contar diferencias sin contexto, sino descubrir qué repetición produce más confusión o coste de mantenimiento.
Ejemplo resuelto
En cuatro pantallas aparecen seis botones: tres alturas, dos radios y dos etiquetas para confirmar. Se registra frecuencia 6, impacto alto y esfuerzo medio. Los campos de búsqueda aparecen cuatro veces con dos estructuras de error. Se prioriza el botón por alcance y después el campo por riesgo de comprensión.
Pruébalo
Captura o describe tres pantallas del mismo producto.
Agrupa elementos por función, no por parecido superficial.
Cuenta variantes y asigna frecuencia, impacto y esfuerzo.
Elige tres prioridades y explica qué queda fuera.
Error frecuente: unificar elementos con objetivos distintos solo porque tienen el mismo color. Corrige separando función, contenido y estado antes de consolidar.
Ejercicio: crea una tabla de diez hallazgos con prioridad calculada como frecuencia más impacto menos esfuerzo, usando valores de 1 a 3.
Comprueba tu resultado
aparecen tres prioridades justificadas y cada una conserva evidencia de pantalla.
Mapa de prácticaUn componente debe adaptarse cuando cambia su contenido o el ancho disponible. Las reglas de espacio y alineación conservan la relación entre sus elementos mientras el texto se ajusta. Prueba estados reales en lugar de diseñar solo una tarjeta ideal.
Ver la infografía en tamaño completo ↗Auditoría de componentes UI
Antes de construir un design system, auditá el producto real. Una auditoría de componentes revela botones duplicados, inputs inconsistentes, cards con estilos mezclados y patrones que se repiten sin reglas claras.
Qué revisar primero
- Botones: tamaños, estados, iconos, textos y jerarquía.
- Formularios: labels, placeholders, errores, ayuda y validación.
- Cards: padding, títulos, acciones, imágenes y estados vacíos.
- Tablas/listas: densidad, alineación, filtros y acciones masivas.
- Navegación: menú, breadcrumbs, tabs, sidebar y mobile.
Caso práctico: inventario de inconsistencias
Elegí 3 pantallas del mismo producto. Marcá cada componente repetido y anotá cuántas variantes aparecen. Si encontrás 5 botones primarios distintos, no lo arregles todavía: primero documentá el problema.
| Componente | Variantes encontradas | Riesgo | Decisión |
|---|---|---|---|
| Botón primario | 5 | Jerarquía confusa | Unificar tamaño, color y estado |
| Input | 4 | Errores poco claros | Definir label, helper y error |
| Card | 6 | Layout inconsistente | Crear variantes por uso |
Ejercicio práctico: auditoría en 30 minutos
- Tomá screenshots de 3 pantallas.
- Listá al menos 10 componentes repetidos.
- Agrupá variantes que deberían ser el mismo componente.
- Priorizá 3 componentes para normalizar esta semana.
Checklist de entrega
- Inventario con componente, cantidad de variantes y riesgo.
- Una captura anotada por pantalla.
- Una propuesta de 3 decisiones para reducir inconsistencias.
- Un componente rediseñado con estados normal, hover, disabled y error.
Resultado: esta auditoría se puede mostrar como caso de portfolio para roles UI, product design o design systems assistant.
Sigue con Diseño UI y Sistemas de Diseño
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.