Jerarquía
El Sistema de Diseño de Spaceship está construido en capas, cada una de las cuales aporta claridad, estructura y propósito. Forman una jerarquía que guía cómo diseñamos, construimos y escalamos productos, desde la decisión visual más pequeña hasta el recorrido de usuario más amplio.
Siguiendo los principios del Diseño Atómico, hemos estructurado nuestros recursos principales en las siguientes categorías, lo que facilita su uso para todos los equipos.
Fundamentos
Definen las reglas básicas de nuestro lenguaje visual: colores, tipografía, espaciado, cuadrículas, movimiento y tokens. Nos proporcionan una base coherente desde la que trabajar.
Componentes
Dan vida a las reglas fundamentales en elementos de interfaz reutilizables que resuelven problemas cotidianos de diseño.
Plantillas
Demuestran cómo los componentes y los patrones funcionan juntos en contexto, proporcionando estructuras listas para usar para páginas y experiencias completas.
Patrones
Recogen soluciones probadas y buenas prácticas, garantizando que nuestro trabajo siga siendo coherente, accesible y centrado en el usuario en cada punto de contacto.
Fundamentos
Los átomos esenciales del Spaceship Design System. Definen las reglas visuales y estructurales sobre las que se construyen todos los componentes y patrones.
Color
Define paletas de marca y funcionales que garantizan armonía, accesibilidad y flexibilidad en todos los productos.
Tipografía
Establece jerarquía y claridad con una escala tipográfica que hace que el contenido sea fácil de leer y escanear.
Espaciado
Proporciona una escala sistemática para márgenes, relleno y ritmo de diseño con el fin de mantener interfaces coherentes.
Cuadrículas
Crea diseños adaptables que se ajustan a distintos dispositivos manteniendo la estructura y la alineación.
Movimiento
Utiliza transiciones y animación para guiar la atención, comunicar el estado y hacer que las interacciones se sientan naturales.
Design Tokens
Traducen los valores fundamentales en código, sirviendo como una única fuente de verdad y facilitando actualizaciones rápidas y sencillas.
Unos fundamentos claros significan menos barreras, más inclusión y más tiempo dedicado a resolver problemas reales en lugar de empezar desde cero.
Componentes
Estos son los elementos reutilizables del Spaceship Design System. Cada uno resuelve un problema específico de la interfaz, desde botones y campos de entrada hasta navegación y mensajes de retroalimentación. Todos los componentes son accesibles, adaptables y se ajustan fácilmente a diferentes contextos o dispositivos.
Los componentes reutilizables garantizan que cada producto que creamos se lance más rápido y se sienta conectado con una visión más amplia.
Plantillas
Las plantillas son el puente entre los bloques de construcción y la experiencia del usuario. Combinan fundamentos y componentes en contextos de página completa, demostrando cómo funciona el sistema en la práctica.
Plantillas de páginas de producto
Estructuras de página de alto nivel para páginas de destino y de producto, donde los diseñadores actualizan principalmente el contenido y ajustan los módulos para adaptarlos a cada contexto.
Componentes compartibles
Las estructuras reutilizables más complejas, como las tablas comparativas o las tarjetas de precios, están diseñadas para gestionar escenarios específicos de forma coherente en todos los productos.
Con estructuras listas para usar como punto de partida, los equipos pueden centrarse menos en las decisiones de diseño y más en responder a las necesidades reales de los usuarios.
Patrones
Los patrones recogen lo que hemos aprendido de las pruebas, los comentarios y el uso en el mundo real, y lo convierten en soluciones reutilizables y estandarizadas. Cada patrón se basa en la intención del usuario, ya sea simplificar el proceso de compra, gestionar errores o guiar a los usuarios a través de formularios.
Al definir soluciones probadas, los patrones hacen que nuestro trabajo tenga un propósito, garantizando que cada experiencia no solo sea funcional, sino también diseñada con atención.