Blog
ArtículoDiseño visual3 min de lectura

La coherencia visual no exige que todas las páginas sean iguales

Un artículo y una pantalla de facturación pueden verse distintos y compartir un lenguaje de diseño coherente. La coherencia es más útil cuando preserva el significado.

Por Equipo de auditoría de diseño

Haz que una misma señal siempre signifique lo mismo

Una pantalla de facturación necesita comparaciones densas e importes claros. Una página editorial necesita un ritmo cómodo de lectura. Darles el mismo diseño ignoraría sus distintas funciones; compartir tipografía, convenciones de interacción y colores con significado semántico puede hacer que ambas se sientan parte del mismo producto.

Los problemas aparecen cuando una señal cambia de significado sin aviso. Si un tratamiento de acento indica la acción principal en una página, un filtro seleccionado en otra y un error en una tercera, las personas deben reinterpretarlo cada vez. Revisa el significado, no solo el valor del color.

Compara elementos equivalentes

Coloca controles equivalentes uno junto al otro, en el mismo estado y al mismo ancho. No compares un botón deshabilitado con uno habilitado, ni exijas que una acción compacta de tabla tenga las mismas dimensiones que una acción destacada de página.

Ante cada diferencia, pregunta si responde a una regla. «Las acciones compactas se usan dentro de las filas de datos» es una regla. «Esta pantalla se veía mejor con un botón más pequeño» es una preferencia local que cuesta mantener a medida que crece el producto.

Busca el origen de las variaciones repetidas

Imagina doce tarjetas con espacios inconsistentes. Diez usan un componente compartido y dos se crearon por separado. Editar doce páginas ocultaría esa diferencia estructural. Antes de decidir el alcance del cambio, revisa el espaciado de la tarjeta compartida y por qué existen las dos excepciones.

Los tokens de diseño hacen explícitas las decisiones recurrentes, pero el nombre de un token no explica por sí solo cuándo usarlo. Acompaña el valor compartido con una breve regla de uso y un ejemplo de excepción válida. Así el sistema sigue siendo útil sin convertir cada composición nueva en una disputa sobre las reglas.

Revisa más allá del ejemplo ideal

Prueba con un encabezado largo, una imagen ausente, un resultado vacío y un bloque de texto denso. Estos estados muestran si el componente sigue una regla de diseño coherente o si solo se adapta al contenido de ejemplo con el que se diseñó.

Deja por escrito la regla que quieres preservar: el mismo énfasis para opciones comparables, una separación clara entre grupos de contenido o una ubicación estable para la siguiente acción. Así, quienes colaboren después tendrán una referencia más duradera que la instrucción de imitar una captura de pantalla.

Referencias y lecturas adicionales

Sigue aprendiendo

Explora tu sitio web con Design Audit

Envía una URL y convierte la próxima revisión en un plan de acción concreto.