Diseño UI y Sistemas de Diseño
Texto Leccion
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 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 m
Tiempo de estudio
18 Min
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.
Texto Lessons
#1
Jerarquía Visual y Layout
#2
Qué es design system: sistema de diseño
#3
Teoría del Color para UI
#4
Design Tokens en Práctica
#5
Tipografía para Sistemas de UI
#6
Documentar Componentes del Sistema
#7
Auditoría de componentes UI
#8
Caso de portfolio: mini design system
Ver full lessons
Revisar curso learning pagina