Un sistema de diseño para tu sitio web

Qué es un sistema de diseño

Un sistema de diseño es una única fuente de verdad sobre cómo se ve y se comporta tu sitio web, desde el color de un botón hasta la lógica del espaciado y el comportamiento de los formularios. La forma más sencilla de imaginarlo es como tres capas conectadas — tokens, componentes y patrones — que describen una interfaz en un lenguaje que tanto diseñadores como desarrolladores entienden.

Vale la pena separar un sistema de diseño de una guía de estilo o un kit de UI. Una guía de estilo es un documento de recomendaciones que rápidamente se vuelve obsoleto. Un kit de UI es una biblioteca de maquetas en Figma. Un sistema de diseño conecta esas maquetas con código real: la misma definición de un color o un botón vive tanto en el diseño como en el marcado, por lo que la brecha entre cómo se dibujó algo y cómo se construyó se reduce drásticamente.

Tokens, componentes y patrones

Las tres capas funcionan como muñecas rusas, desde las decisiones más pequeñas hasta las más grandes.

• Tokens son valores de diseño nombrados: colores, tamaños de fuente, espaciado, radios de esquina, sombras, duraciones de animación. En lugar de un valor bruto como 'azul #1A6DFF', el equipo utiliza un token como color-primario. Cambia el token en un lugar y todo el sitio se actualiza.
• Componentes son bloques de construcción de interfaz ensamblados a partir de tokens: botones, campos de entrada, tarjetas, modales, navegación. Cada componente tiene estados (predeterminado, hover, foco, deshabilitado, error) y variantes (primario, secundario, destructivo).
• Patrones son formas estables de resolver tareas recurrentes: cómo se ve un formulario de registro, cómo está estructurada una tarjeta de producto, cómo aparecen los errores y los estados vacíos. Los patrones se construyen a partir de componentes y ofrecen un comportamiento predecible en cada página.

Encima de estas capas siempre hay documentación: reglas de uso, ejemplos de lo que se debe y no se debe hacer, y una explicación de por qué se tomó una decisión particular.

Por qué es importante para los negocios

Un sistema de diseño aborda cuatro necesidades empresariales interconectadas.

• Consistencia.El mismo elemento se ve y se comporta de manera idéntica en cada página. Los usuarios aprenden el sitio más rápido, y la marca se siente coherente y confiable.
• Velocidad.Una nueva página o sección se ensambla a partir de componentes listos en lugar de ser dibujada y codificada desde cero. Lo que solía tardar una semana ahora tarda días.
• Escalabilidad.Cuando varios diseñadores y desarrolladores trabajan en un proyecto, el sistema evita que sus estilos se desvíen. Un nuevo miembro del equipo se basa en reglas documentadas en lugar de adivinar.
• Cambios más económicos.Un cambio de marca, un nuevo color de acento, tipografía actualizada: todo se edita a nivel de token y se implementa automáticamente en todo el sitio, sin necesidad de rehacer manualmente cientos de pantallas.

Ese último punto es generalmente donde la inversión comienza a dar frutos: cuanto más tiempo vive un producto, más costoso se vuelve cada cambio único sin un sistema.

Cuándo necesitas uno, cuándo es excesivo

Un sistema de diseño es una herramienta, no un objetivo en sí mismo. No siempre vale la pena, y un socio honesto lo dirá directamente.

Un sistema de diseño completo está justificado cuando el sitio es grande y sigue creciendo; cuando varias personas trabajan en él; cuando se planean actualizaciones regulares y nuevas secciones; cuando hay varios productos o subdominios que deben verse unificados; o cuando se avecina un cambio de marca o rediseño.

Es excesivo cuando el proyecto es una sola página de aterrizaje o un pequeño sitio de folleto de cinco a siete páginas; cuando es algo puntual que no evolucionará; o cuando el presupuesto y los plazos son ajustados y el objetivo es simplemente estar en línea rápidamente. En esos casos, un conjunto ligero de estilos y algunos bloques reutilizables son suficientes; eso sigue siendo un enfoque sistemático, solo que en miniatura.

La buena noticia es que un sistema se puede desarrollar gradualmente: comienza con tokens y componentes centrales, luego expándelo a medida que el proyecto crece, sin reconstruir todo de una vez.

Qué hay dentro de un sistema terminado

Un sistema de diseño terminado no es un archivo, sino un conjunto de artefactos mantenidos en sincronía entre sí.

• Una biblioteca en una herramienta de diseño.Normalmente Figma con variables, estilos y componentes de los cuales los diseñadores ensamblan nuevas pantallas.
• Una biblioteca de componentes de código.Los mismos botones y tarjetas implementados en marcado — en HTML/CSS puro o en cualquier marco que utilice el proyecto.
• Un archivo de tokens.Una única fuente de valores que alimenta tanto el diseño como el código, idealmente de forma automática.
• Documentación.Ejemplos de componentes en vivo, reglas de uso, principios de accesibilidad y el tono del lenguaje visual.
• Reglas de accesibilidad.Contraste, tamaños de objetivos táctiles y comportamiento del teclado — integrados en los componentes en lugar de ser verificados a mano cada vez.

La palabra clave aquí es sincronización. Un sistema solo vale la pena cuando el diseño y el código permanecen como un todo en lugar de separarse un par de meses después del lanzamiento.

Cómo Ostohlo construye sistemas de diseño

En Ostohlo construimos sistemas de diseño para el proyecto específico en lugar de a partir de una plantilla. El proceso generalmente se lleva a cabo en varios pasos.

1. Auditoría. Revisamos las pantallas existentes y encontramos cada elemento repetido y cada inconsistencia en colores, fuentes y espaciado. A menudo, este paso por sí solo muestra dónde está fallando el sitio.
2. Tokens y fundamentos. Definimos la paleta, la tipografía y la escala de espaciado y radios, luego los formalizamos como tokens.
3. Componentes. Construimos el conjunto básico — botones, campos, tarjetas, navegación — con todos sus estados y variantes.
4. Patrones y páginas. Montamos pantallas típicas a partir de componentes y confirmamos que el sistema cubre escenarios reales.
5. Documentación y entrega.Describimos las reglas y capacitamos al equipo del cliente para que el sistema continúe después del lanzamiento.

Vinculamos este proceso a nuestro enfoque más amplio del diseño de interfaces — más sobre esto en el artículo sobre el proceso de diseño UX/UI. Si el sistema es necesario para actualizar un sitio existente, es importante no perder terreno — cubrimos eso en nuestra pieza sobre rediseñar sin perder tráfico.

Mantenimiento y errores comunes

Un sistema de diseño es más fácil de crear que de mantener. Vemos algunos errores típicos que deshacen su valor.

• Un sistema en un vacío.Una hermosa biblioteca de componentes que nadie usa porque está desconectada de las tareas reales del producto.
• El diseño y el código se separan.Una cosa en Figma, otra en el marcado. Sin una única fuente de token, esto es casi inevitable.
• Complejidad excesiva.Docenas de variantes de botones en las que el equipo mismo se pierde. Un buen sistema es mínimo y cubre casos reales, no hipotéticos.
• Sin propietario.Un sistema del que nadie es responsable se vuelve obsoleto en unos pocos meses.

Por eso siempre incorporamos reglas de actualización y acordamos quién hace cambios y cómo. Un sistema de diseño es un producto vivo, no un artefacto único en un disco.

Por dónde empezar

Si no estás seguro de si tu proyecto necesita un sistema de diseño completo o solo un conjunto ordenado de estilos, esa es una pregunta justa, y una que es mejor responder con números y tareas concretas en lugar de en abstracto.

Echa un vistazo a nuestro servicios para ver cómo trabajamos, luego ponte en contacto — discutiremos tu proyecto, estimaremos el alcance y propondremos una solución adaptada a la tarea, sin sobreingeniería forzada.

Preguntas frecuentes