Qué es un sistema de diseño y por qué lo necesita un equipo pequeño
Por qué un sistema de diseño ahorra más tiempo a un equipo pequeño que a uno grande, y por dónde empezar con solo unas pocas piezas reutilizables.
Equipo de rabbitclipPublicación: 6 min. de lectura
En breve
Un sistema de diseño es una única fuente que reúne las piezas recurrentes de una marca, color, tipografía, botones, formularios, tarjetas, para que una página o función nueva se construya con esas piezas ya listas en vez de diseñarse desde cero cada vez. Para un equipo pequeño, eso significa no tener que volver a preguntar nunca más 'cómo se suponía que se veía este botón'.
Un sistema de diseño puede sonar a lujo reservado a grandes empresas, pero la realidad es justo la contraria: un equipo pequeño con recursos limitados es precisamente el que menos se puede permitir perder tiempo corrigiendo incoherencias.
Este artículo explica qué es realmente un sistema de diseño y qué le aporta en concreto a un equipo pequeño. Por reducido que sea su alcance, el beneficio funciona en la misma dirección.
Qué es realmente un sistema de diseño
Un sistema de diseño documenta el lenguaje visual de una marca, paleta de color, tipografía, reglas de espaciado, junto con los componentes reutilizables construidos a partir de ese lenguaje, botones, campos de formulario, tarjetas, avisos, todo en un solo lugar.
Puede ser un documento, una librería de código o ambas cosas a la vez. Lo importante es que un diseñador o desarrollador que construye una página nueva pueda recurrir a un componente ya listo en lugar de preguntarse cada vez de qué color debería ser ese botón.
Si el botón de reserva de una cadena de spas aparece en un tono de verde ligeramente distinto en cada página, esa es una señal concreta de que falta un sistema de diseño.
Un diseñador no necesita construir este sistema en solitario; ponerse de acuerdo pronto con el desarrollador sobre cómo se llama cada componente en el código reduce mucho la confusión más adelante.
Por qué importa especialmente en un equipo pequeño
En un equipo grande, la incoherencia es un problema de descuido; en uno pequeño, es un problema de tiempo. Si un equipo de dos o tres personas vuelve a discutir color, espaciado y tamaño de letra en cada página nueva, ese tiempo no va al trabajo real, al contenido o a la nueva función.
Cuando se añade una categoría de producto nueva al sitio de un fabricante de ropa laboral, un sistema de diseño existente resuelve ese trabajo en horas; sin uno, tarda días. La diferencia está en si cada elemento se diseña desde una página en blanco o no.
El ahorro de tiempo no se nota solo en el diseño, también en el desarrollo; con una librería de componentes lista, un desarrollador recurre a una pieza existente en lugar de programar un formulario nuevo desde cero, lo que además reduce el riesgo de errores.
Qué pasa sin un sistema de diseño
Con el tiempo, un sitio acumula decenas de estilos de botones, campos de formulario y tamaños de título que ya no encajan del todo entre sí. Eso se convierte en una experiencia confusa para el visitante, y para el equipo, en la carga de comprobar en cada cambio si es igual en las demás páginas.
Un ejemplo habitual es el sitio de diez años de un fabricante, cuyas páginas añadidas en distintas épocas ya no se parecen entre sí; cada página lleva el gusto de quien la diseñó en su momento.
Por dónde empieza un equipo pequeño
No hace falta construir un sistema de diseño corporativo completo; basta con empezar por un puñado de piezas básicas: una paleta de color principal, dos o tres tamaños de letra, y estilos coherentes para botones y campos de formulario.
Si estas piezas básicas viven en una librería de código, un archivo de componentes compartido, por ejemplo, una página nueva se monta llamando a esas piezas; un cambio de color o tamaño se hace en un solo lugar y se refleja en todo el sitio.
Un buen punto de partida es auditar las tres páginas más visitadas del sitio actual y listar los elementos que se repiten en ellas; esa lista ofrece un comienzo más rápido que diseñar un sistema desde cero.
- Una paleta principal y colores secundarios se definen en un solo lugar
- Se fijan dos o tres tamaños de letra (título, cuerpo de texto, texto pequeño)
- Los componentes de botón, campo de formulario y tarjeta se hacen reutilizables en el código
- Una página nueva se construye a partir de estos componentes en lugar de diseñarse desde cero
Qué aporta un sistema de diseño a medida que la empresa crece
A medida que una empresa crece, añadir una nueva página de sucursal, una nueva categoría de producto o una nueva página de campaña se hace en días con un sitio que tiene sistema de diseño; sin uno, tarda semanas.
Además, da a un diseñador o desarrollador nuevo que se une al equipo un único punto de referencia; aprende el lenguaje visual de la marca desde una sola fuente, en vez de reconstruirlo página por página.
De quién es la responsabilidad de mantener el sistema de diseño
Un sistema de diseño no se mantiene actualizado solo una vez construido; alguien tiene que seguir los cambios de color, componente o regla. En un equipo pequeño, esa responsabilidad suele recaer en el diseñador o en el desarrollador más veterano, sin necesidad de crear un puesto aparte.
Sin una responsabilidad clara, la incoherencia vuelve a acumularse con el tiempo: alguien añade un estilo de botón nuevo, nadie comprueba si encaja con el sistema existente, y el sistema se rompe solo. Por eso conviene convertir en costumbre revisar el sistema existente antes de añadir un componente nuevo.
Si el equipo de marketing de un fabricante encarga una nueva página de campaña a una agencia que desconoce el sistema de diseño existente, esa página se desconecta visualmente del resto del sitio; esto demuestra que un sistema de diseño necesita mantenimiento, no solo construcción.
Esta responsabilidad puede sonar a carga pesada, pero en la práctica es pequeña; una hora de revisión al mes basta para la mayoría de los equipos pequeños.
Un sistema de diseño no es el lujo de una gran empresa, es la forma en que un equipo pequeño protege su propio tiempo. En una primera llamada con rabbitclip se detectan juntos los puntos de incoherencia del sitio actual y queda claro por dónde debería empezar un sistema de diseño básico. Incluso un comienzo pequeño siempre es mejor que ninguno. Las pequeñas incoherencias que se acumulan con el tiempo terminan costando más que un único gran error.
Preguntas frecuentes
¿Un sistema de diseño es solo para grandes empresas?
No, al contrario, un equipo pequeño es el que más protege su tiempo con este sistema; el alcance puede mantenerse proporcionalmente reducido. El alcance crece junto con la empresa.
¿Cuánto tiempo lleva construir un sistema de diseño?
Uno básico, color, tipografía, unos pocos componentes, puede construirse en días; uno más completo depende del tamaño del proyecto.
¿Se puede añadir un sistema de diseño a un sitio ya existente?
Sí, se auditan las páginas existentes para detectar piezas recurrentes, que después se convierten en el sistema.
¿Un sistema de diseño es solo cuestión visual?
No, también abarca la reutilización de componentes en el código; por eso concierne tanto al diseñador como al desarrollador.
¿Un sistema de diseño debe vivir en una sola herramienta de diseño?
No, debe existir tanto en el archivo de diseño como en el código; si ambos se desincronizan, el sistema pierde coherencia con el tiempo. Puede ser tan sencillo como abrir un archivo de componentes compartido en el código.
