Kit de actualización de UI: Estética de vidrio líquido para el tema Shopify Horizon

Como parte de la mejora de nuestra propia cartera de desarrolladores de Shopify y de nuestro sitio de consultoría, creamos un kit completo de actualización de la interfaz de usuario utilizando el tema Horizon de Shopify como base. El diseño es un sistema visual oscuro basado en degradados, inspirado en la estética de cristal líquido de Apple: profundidad de color, bordes cristalinos, sombras, efectos de desenfoque y componentes consistentes.

Actualizado el 11 de noviembre de 2026. Desde la primera versión, hemos seguido desarrollando el kit. Esta página ahora cubre el kit en sí y el trabajo posterior realizado en el mismo sitio.

Resumen del proyecto

El propósito de este proyecto era rediseñar nuestro propio sitio web de consultoría para lograr una identidad visual más limpia y moderna, al tiempo que mostrábamos nuestro trabajo de diseño y desarrollo como agencia de Shopify.

Creamos un kit de interfaz de usuario reutilizable que combina un tema oscuro, una barra de encabezado flotante, títulos con degradados y efectos de profundidad similares al cristal. La actualización prioriza la consistencia de los componentes, el espaciado y un diseño de carga rápida, y utiliza gráficos vectoriales y iconos personalizados en lugar de imágenes pesadas.

Objetivos

El objetivo era crear un sistema de interfaz de usuario visualmente distintivo y técnicamente refinado que mostrara nuestro trabajo de front-end y de personalización de temas de Shopify.

• Crear un sistema oscuro consistente – Establecer tokens de diseño globales para espaciado, sombras, bordes y degradados.
• Incorporar detalles de cristal líquido – Añadir bordes translúcidos, desenfoques y efectos de difusión de luz.
• Reducir la dependencia de las imágenes – Reemplazar la fotografía con iconos y gráficos vectoriales para mejorar la velocidad y la escalabilidad.

Cómo trabajamos

El proyecto se inspiró en la arquitectura modular del tema Horizon, un tema que utilizamos a menudo por su flexibilidad y su código base limpio. Lo ampliamos con capas translúcidas, degradados animados y sutiles efectos de profundidad.

Fundamentos y tokens de diseño

• Creamos una paleta de colores basada en #0A0A0F, #bb8bfd, #00d3f2, #f66aba y #00A142, ampliándola con rampas de degradados para acentos y estados de hover.
• Estandarizamos el espaciado, los radios de borde, las sombras y las variables de desenfoque en todo el tema.

Sistema de componentes

• Desarrollamos botones de estilo cristal líquido y bordes translúcidos con filtros de fondo y estados brillantes.
• Añadimos desenfoque, superposiciones de degradados y elevación por capas a tarjetas y secciones.
• Creamos una barra de encabezado flotante inspirada en la Dynamic Island de Apple que reacciona al desplazamiento y al visor.

Simplificación de contenido y elementos visuales

• Reemplazamos las imágenes por iconografía e ilustraciones vectoriales para lograr un aspecto minimalista.
• Introdujimos títulos con degradados que cambian entre tonos violeta, turquesa y magenta.

Accesibilidad y optimización

• Comprobamos el contraste de colores según las pautas WCAG.
• Utilizamos un espaciado de cuadrícula estable y puntos de interrupción responsivos para limitar el cambio de diseño.
• Redujimos el desorden visual para mejorar la concentración en el contenido y la claridad del movimiento.

Lo que construimos sobre el kit

El kit es la base de todo lo demás en el sitio. Esto es lo que se ha añadido o reconstruido con él desde la primera versión.

Tipografía y página de inicio

• Cambiamos el texto del cuerpo de Inter a Instrument Sans y mantuvimos Bricolage Grotesque para los títulos.
• Rediseñamos el hero de la página de inicio para que la llamada a la acción quede por encima del pliegue, con un titular claro y una línea de «llamada gratuita y sin compromiso».
• Corregimos los problemas menores encontrados en la revisión: estrellas de testimonios sólidas, errores tipográficos y la estructura de los encabezados para que cada página tenga un H1.

Catálogo de proyectos

• Reconstruimos la página de proyectos con nueve filtros, proyectos destacados fijados, tarjetas con imágenes y títulos cortos, un contador en vivo de «mostrando N proyectos» y una llamada a la acción final.
• Llevamos cada estudio de caso de proyecto a un diseño de artículo estándar (introducción, resumen, objetivos, cómo trabajamos, resultado) y eliminamos las afirmaciones de rendimiento que no podíamos respaldar.
• Añadimos una etapa de proyectos destacados: una copia desenfocada de la imagen del proyecto como fondo, la imagen nítida en un marco, el logotipo del cliente, etiquetas y un botón. Una barra en la parte inferior enumera los proyectos y también funciona como temporizador de reproducción automática. Tiene un botón de pausa, flechas, soporte para deslizamiento y teclado, y permanece estática para los visitantes que prefieren menos movimiento.

Tarjetas deslizantes y tiendas de demostración

• Añadimos una tira de proyectos deslizante a la página de inicio, basada en el patrón CSS de tarjetas deslizantes: se abre una tarjeta a la vez, con el logotipo del cliente y las etiquetas, y funciona con un clic, un toque o el teclado.
• Creamos un tipo de registro de «Tienda de demostración» en Shopify y un widget que muestra una demostración en un marco de navegador, con lo que probar, la contraseña de la demostración con un botón de copiar y enlaces para abrirla o leer cómo se construyó. Cada demostración aparece en la página de servicios a la que pertenece.
• Añadimos un deslizador de demostraciones debajo del catálogo en la página de proyectos. Todos los artículos etiquetados como «Demo» aparecen allí en lugar de en la cuadrícula regular. Las primeras demostraciones son Seance, una tienda que diseñamos nosotros mismos en Figma y luego construimos como un tema personalizado, Brew, CocoBamboo y Moreia.

Páginas y formularios

• Reconstruimos las páginas de reseñas, contacto, reservar una llamada y sobre nosotros: un H1 en cada una, textos con nuestra propia voz y un siguiente paso claro.
• Añadimos etiquetas visibles al formulario de contacto y eliminamos un patrón de número de teléfono que rechazaba números internacionales.
• Configuramos la página de reservas como el destino de cada botón de «Reservar una llamada».

Facilidad de búsqueda

• Añadimos datos estructurados de la empresa y su fundador, y escribimos una meta descripción para cada artículo.
• Añadimos una línea visible de autor y fecha a los artículos, y reconstruimos la plantilla de artículo predeterminada como una sola columna legible con una llamada a la acción.
• Creamos cuatro páginas de servicios (desarrollo de temas, de Figma a Shopify, diseño de páginas de destino, migración) y reconstruimos las páginas de servicios de CRO, velocidad y creación de tiendas con el mismo patrón, cada una con una introducción clara, proceso, preguntas frecuentes y estudios de caso correspondientes.

Flujo de trabajo

• Llevamos el tema a un repositorio privado de GitHub conectado a Shopify, para que cada cambio se registre y pueda revertirse.

Resultado

El sitio ahora funciona como una demostración en vivo del kit. El mismo sistema oscuro de cristal líquido lleva la página de inicio, el catálogo de proyectos, los estudios de caso, las páginas de servicios y las tiendas de demostración.

• Diseñamos y construimos un sistema de interfaz de usuario oscuro inspirado en el cristal líquido
• Ampliamos el tema Horizon con secciones personalizadas, componentes y degradados
• Llevamos el sistema a la página de inicio, el catálogo, los estudios de caso, las páginas de servicios y las demostraciones
• Pusimos el tema bajo control de versiones, conectado a la tienda en vivo