¿Necesita un sistema de diseño para su sitio web?
Un sistema de diseño es un conjunto de componentes reutilizables y las reglas para usarlos. En un sitio grande con varias personas haciendo cambios elimina muchísima toma de decisiones duplicada. En un sitio de presentación de cinco páginas es un coste sin retorno.
Esta guía cubre dónde está la línea, qué contiene de verdad un sistema mínimo útil y qué hacer cuando un sistema completo no se justifica.
Cuándo se paga y cuándo no#
El valor viene de la repetición: la misma decisión tomada una vez en lugar de cuarenta, y de forma coherente. Si no hay repetición, tampoco hay valor.
| Situación | Veredicto |
|---|---|
| Sitio de presentación de cinco páginas, un diseñador, cambios raros | No: una página de guía de estilo basta |
| Un sitio, varias plantillas, cambios ocasionales de contenido | Ligero: tokens y una hoja de componentes |
| Sitio más aplicación compartiendo marca | Sí: la superficie compartida es donde aparece la deriva |
| Varios sitios en una organización | Sí: este es el caso más claro |
| Pruebas A/B frecuentes y páginas de campaña | Sí: la velocidad de montaje es la recompensa |
| Reconstrucción prevista dentro de un año | Todavía no: construya el sistema con la reconstrucción |
El sistema mínimo útil#
Casi todo el beneficio viene de un núcleo pequeño. Esto se construye en días, no en meses, y basta para casi todos los sitios que necesitan uno.
- Tokens: color, escala tipográfica, escala de espaciado, radios, sombras, puntos de ruptura, con nombre y no como números fijos.
- Tipografía: niveles de encabezado y estilos de texto con su comportamiento adaptable.
- Botones y enlaces: todos los estados: normal, hover, foco, activo, deshabilitado, cargando.
- Controles de formulario: campo, selector, área de texto, casilla, opción, más estilos de error y de ayuda.
- Tarjetas y listas: los dos o tres contenedores de contenido repetidos que su sitio usa de verdad.
- Navegación: cabecera, pie, migas de pan, paginación.
- Respuesta al usuario: estado vacío, estado de error, estado de carga, mensaje de éxito.
Los estados son la parte que se salta y la que más importa. Un componente definido solo en su estado normal devuelve cada caso límite a quien lo esté implementando.
El coste de mantenimiento que nadie presupuesta#
Un sistema de diseño es un producto con usuarios, y necesita un responsable. Sin él deriva: el sitio gana componentes que el sistema no tiene, el sistema conserva componentes que nadie usa, y al cabo de un año la gente trabaja rodeándolo en vez de con él.
- Alguien lo posee y decide qué entra. Un sistema en manos de un comité deja de cambiar.
- Una vía documentada para proponer un componente nuevo, para que la gente lo amplíe en vez de esquivarlo.
- Versionado, para que un cambio no altere en silencio todas las páginas a la vez.
- Una auditoría periódica de lo que hay en el sitio en producción y no en el sistema: esa brecha es la medida de salud.
- Borrado. Los componentes sin uso son coste, no valor.
Alternativas más ligeras#
Si no hay caso para un sistema completo, existen pasos más baratos que capturan gran parte del beneficio de coherencia.
| Opción | Esfuerzo | Buena para |
|---|---|---|
| Propiedades personalizadas CSS para color, tipografía y espaciado | Horas | Cualquier sitio: este es el suelo |
| Una única página de guía de estilo viva dentro del propio sitio | Un día | Sitios pequeños con colaboradores ocasionales |
| Biblioteca de componentes en el CMS o en la capa de plantillas | Días | Equipos de contenido que montan páginas |
| Framework CSS establecido, con tematización ligera | Días | Herramientas internas y pantallas de administración |
| Sistema de diseño completo y documentado | Semanas o meses | Varios productos o varios equipos |
Una página de guía de estilo viva dentro del sitio real gana a un documento: usa el mismo CSS, así que no puede desviarse de la realidad sin romperse de forma visible.
Preguntas frecuentes
¿Puedo usar un sistema de diseño ya hecho?
Sí, y para herramientas internas suele ser lo acertado: la marca importa poco y obtiene componentes accesibles y probados de inmediato. Para un sitio público de marketing el intercambio es que su sitio se parece a todos los que usan el mismo sistema, así que casi todas las organizaciones lo tematizan mucho, y ahí desaparece parte del ahorro en mantenimiento.
¿Quién debe responsabilizarse del sistema de diseño?
Una persona nombrada, con aportaciones de diseño y desarrollo. La responsabilidad compartida entre diseño e ingeniería suena colaborativa y en la práctica significa que nadie decide, así que el sistema deja de evolucionar y la gente lo rodea. Quien lo posee no tiene que construirlo todo; tiene que decir sí y no.
¿Cuál es la diferencia entre guía de estilo y sistema de diseño?
Una guía de estilo documenta la apariencia: colores, tipografías, uso del logotipo. Un sistema de diseño incluye eso más componentes funcionando, sus estados, las reglas para combinarlos y normalmente el código. Una guía de estilo le dice cómo se ven las cosas; un sistema de diseño le da las piezas y le dice cuándo usar cada una.
¿Cómo evito que se quede obsoleto?
Haga que sea el camino de menor resistencia y audite la brecha. Si usar el sistema es más lento que escribir CSS puntual, la gente escribirá CSS puntual. Liste periódicamente los componentes del sitio en producción que no están en el sistema: una lista que crece significa que el sistema no está sirviendo a quienes construyen páginas, y eso es un problema de diseño del propio sistema.
sistema de diseñoguía de estilo webdesign tokensbiblioteca de componentescoherencia de interfazsistema de diseño web
