Construir · Criterio KATA
Sistema, no plantilla
Lo que hace genérica a una web no es tener un sistema. Es no haber decidido nada dentro de él.
Cómo se ha elaborado esta guía
Qué estás leyendo
Es cómo construye KATA su capa visual. Criterio propio.
Qué es criterio propio y qué es estándar externo
- Criterio propio: Las decisiones de construcción, los umbrales y el orden son metodología de KATA.
- Experiencia observada: Lo aprendido en proyectos propios. No se cuantifica ni se presenta como dato del sector.
- Estándar externo: Cuando se cita una norma o un umbral de un tercero, se identifica su fuente oficial con entidad y fecha.
La metodología completa está en el Método KATA.
Respuesta directa
Un sistema de diseño es un conjunto de decisiones tomadas una vez: escalas, colores, espaciados y componentes. La coherencia que produce es una ventaja, no una limitación.
La genericidad no viene del sistema: viene de no haber decidido dentro de él y adoptar los valores por defecto de todo el mundo.
El sistema mínimo
| Elemento | Qué decide | Dónde suele estar la genericidad |
|---|---|---|
| Escala tipográfica | Tamaños y ritmo del texto. | Usar la escala por defecto del framework. |
| Paleta con roles | Qué color hace qué, no solo cuáles son. | Colores sin rol: nadie sabe cuándo usar cada uno. |
| Escala de espaciado | Ritmo vertical. | Espaciados improvisados en cada sección. |
| Componentes | Botón, tarjeta, tabla, formulario. | Cinco variantes de botón que nadie decidió. |
| Estados | Reposo, foco, activo, error, vacío. | Solo se diseña el reposo. |
| Contrastes verificados | Que cada combinación cumpla. | Elegir por gusto y no medir. |
Los estados son donde se nota el trabajo
Casi todos los sistemas que revisamos definen el aspecto en reposo y poco más. El foco, el error y el estado vacío se resuelven improvisando cuando aparecen, que es cuando peor se decide.
El estado de foco además tiene consecuencias de accesibilidad: si no está diseñado, suele acabar eliminado por resultar «feo», y con él desaparece la posibilidad de navegar con teclado.
Nuestro propio ejemplo, medido
En este sitio, el color de marca daba 4,49:1 sobre blanco. Suficiente para texto grande, insuficiente para texto pequeño según el criterio de contraste mínimo.
La corrección no fue cambiar la marca: fue decidir dónde se usa cada tono. El texto pequeño pasó a un tono más profundo, con 7,07:1. La identidad no cambió; cambió la regla de uso, que es justo lo que un sistema debe fijar.
Dónde este criterio NO aplica
- Proyectos con manual de marca cerrado e impuesto, donde el margen es de aplicación y no de decisión.
- Sitios de una sola página, donde el sistema se reduce a unas pocas reglas.
- Rediseños parciales que deben convivir con un sistema anterior.
Preguntas frecuentes
¿Usar un framework hace genérica la web?
No por sí mismo. La hace genérica usarlo con sus valores por defecto. Un framework es un punto de partida, y la diferencia está en cuántas decisiones se toman después.
¿Cuándo se define?
Antes de maquetar la segunda página. Con una sola no se ven los patrones; a partir de la tercera, cambiar el sistema obliga a rehacer.
Siguiente decisión
Continúa con una pregunta concreta
Reconstrucción y mejora de webs existentes
Qué podemos abordar contigo y cómo delimitamos el trabajo.
Reconstrucción y mejora de webs existentes →
Ilustraciones conceptuales; no son fotografías de clientes.