Respuesta breve
Un sistema de diseño se compone de tokens para color, tipografía y espaciado, de componentes construidos con ellos y de una comprobación en el build que rechaza valores sueltos. Según nuestra experiencia, se amortiza hacia la décima página o al segundo cambio de marca.
Un sistema de diseño suele describirse como una colección de componentes. La parte más decisiva es la regla sobre dónde pueden vivir los valores, porque de ella depende que el sistema siga siendo cierto dentro de medio año.
De qué se compone realmente el sistema
Cuatro capas, y la última es la que distingue un sistema de una carpeta con archivos.
- Tokens: cada color, espaciado, radio y tamaño tipográfico definido en un solo sitio
- Primitivas: botones, tarjetas, títulos y campos construidos con tokens
- Bloques: secciones terminadas con las que se arman las páginas
- Una comprobación en el build que frena los valores crudos en el código de página
La comprobación es lo que mantiene cierto el sistema
Un sistema que solo existe como documento se desmonta, porque teclear un color siempre es más rápido que buscar el token correcto. Esta web ejecuta esa comprobación: un paso del build lee el código y lo tumba en el primer valor hex o de píxel suelto fuera del sistema de diseño. A partir de ahí la duda deja de aparecer.
El contraste se calcula antes de usar el color
Cada par de colores del sistema se verifica contra WCAG AA, que exige un mínimo de 4,5:1 para texto corrido, en modo claro y oscuro. Calculado a nivel de token, ninguna página futura puede volverse ilegible, porque la combinación que lo provocaría no existe.
El tamaño a partir del cual compensa
Por debajo de cinco páginas un sistema cuesta más de lo que devuelve. En diez páginas queda equilibrado. Con 30 páginas, dos temas y nueve idiomas es la diferencia entre un día de trabajo y una semana cuando algo debe cambiar en todas partes, que es la cuenta que hicimos para esta web.
Las pantallas pequeñas forman parte del sistema
Cada componente se diseña primero para 320 píxeles y crece hacia arriba. Las pruebas recorren cada tipo de página en siete anchos desde 320 píxeles, y una página que genera scroll horizontal tumba el build. Sale más barato que reparar un diseño roto en móvil después del lanzamiento.
Preguntas frecuentes
- ¿Necesita un sistema de diseño una web pequeña?
- Por debajo de cinco páginas bastan unas convenciones. A partir de diez páginas el sistema devuelve el tiempo que costó, sobre todo si la web va a crecer o a publicarse en varios idiomas.
- ¿En qué se diferencia de un manual de marca?
- El manual describe cómo debe verse. El sistema es el código que lo consigue. Un PDF nunca puede tumbar un build, y es justo esa función la que mantiene unido el aspecto con los años.
- ¿Cómo se trata el modo oscuro?
- Cada token lleva un valor para el modo claro y otro para el oscuro. El contraste se calcula en ambos, así que un tema nunca puede quedar peor que el otro.
- ¿De quién es el sistema de diseño tras el lanzamiento?
- Tuyo, y vive en tu repositorio. Está construido para que otra desarrolladora pueda continuar: los valores en un sitio, los componentes documentados y la comprobación como parte del build.
- ¿Cada cuánto hay que rehacer un sistema de diseño?
- Rara vez entero. Los tokens cambian cuando cambia la marca y los componentes se añaden sobre la marcha. Un sistema que hay que reescribir cada dos años estaba hecho para una sola campaña.
- ¿Se puede introducir un sistema en una web existente?
- Sí, un tipo de página cada vez. Empieza por los tokens y los componentes más usados, activa la comprobación en los directorios ya convertidos y amplía desde ahí.
Cuéntanos qué quieres construir
Treinta minutos, sin coste, y una respuesta directa sobre si somos el estudio adecuado.