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.