Shopify
Invernadero de medianoche: las marcas registradas florecen sobre un fondo turquesa intenso, iluminadas por una única chispa de menta.
El sistema de diseño de Shopify es un taller nocturno para el comercio: un lienzo casi negro con un profundo tono verde turquesa, una tipografía sans-serif amplia y segura, y un único acento verde menta vibrante que activa momentos interactivos. La interfaz se asemeja a un cuarto oscuro, donde los productos y las marcas son la fuente de luz: las fotos y los escaparates brillan sobre superficies casi negras, mientras que los elementos cromados se desvanecen. Los componentes son geométricos pero suaves: tarjetas de 12 píxeles de radio con bordes finos, botones en forma de píldora y una tipografía de 330 puntos que sugiere escala en lugar de gritar. Un único signo de puntuación cromático (#36f4a4) se usa con moderación en enlaces, etiquetas y estados de enfoque, reservando el color para momentos funcionales para asegurar que las historias de los comerciantes sigan siendo el punto focal visual.
El ancho máximo es de ~1280px, centrado, con bloques de pantalla completa que se extienden más allá del contenedor de la foto. El ritmo de la página alterna: (1) una página de pantalla oscura de ancho completo con un titular superpuesto y botones de llamada a la acción, (2) secciones oscuras cómodas con bloques de texto e imagen de ancho máximo en 2 columnas o cuadrículas de imágenes en 3 columnas, (3) paneles de exhibición interactivos (ficha de producto, calculadora de envío, mapa mundial) mostrados como tarjetas en relieve sobre un lienzo más profundo. La navegación es una barra superior fija con el logotipo + 3 elementos de navegación + enlaces secundarios + el botón principal de llamada a la acción, todo alineado a la derecha. El ritmo vertical utiliza espacios de 80px entre secciones con una transición suave; no hay divisores entre secciones oscuras, solo un cambio en el tono de la superficie.
El diseño visual se centra principalmente en el minorista: las fotos de productos a tamaño completo y las fotos de eventos de la marca constituyen la mayor parte del impacto visual, a menudo en forma de grandes fondos con texto blanco superpuesto. Las imágenes están recortadas con precisión, presentan un alto contraste y un carácter festivo (el sonido de la campana del Nasdaq, saludos grupales, primeros planos de productos en mano). El fondo oscuro crea la impresión de que estas fotos están iluminadas por focos. Las ilustraciones son minimalistas; la función principal de la explicación la cumplen las imágenes de productos integradas y las capturas de pantalla de las tiendas. Los iconos son monocromáticos, con un grosor de línea de 1,5 a 2 píxeles, generalmente blancos o de color #36f4a4 para los estados activos.
Paleta
Marca
- Shopify Mint
#36f4a4— Los indicadores de navegación activos, los anillos de enfoque, los resaltados de etiquetas y los resaltados al pasar el cursor sobre los enlaces son el único brillo cromático que crea una sensación de interactividad habilitada sobre un fondo oscuro.
Neutral
- Midnight Forest
#02090a— Lienzo de página, imágenes de fondo del encabezado, imágenes de fondo de la sección - Deep Lichen
#061a1c— Superficies de la tarjeta principal, paneles en relieve, bloques de contenido. - Shaded Fern
#072720— Panel de navegación, tarjetas adicionales, elevación apenas perceptible del panel. - Spruce Border
#1e2c31— Bordes finos para tarjetas, líneas divisorias, contornos de campos de entrada. - Abyss Indigo
#000a1e— Superficie adicional para integrar productos/demostraciones, paneles con descripciones de funciones. - Pure White
#ffffff— Texto principal, relleno de botones, título, logotipos.
Tipografía
De 12 a 70 píxeles · 8 pasos
- Neue Haas Grotesk — reemplazo: Inter · esquemas 330, 400, 500, 550, 600 · El sistema tipográfico principal se compone de titulares con un grosor de fuente de 70–96 px (330–400), que resultan sutiles en lugar de llamativos; texto principal con un grosor de fuente de 16–18 px (400–500); y navegación e interfaz de usuario con un grosor de fuente de 14–16 px (500–550). El grosor de fuente ultraligero de 330 en pantallas grandes es una característica distintiva: transmite confianza a través de la sobriedad, en lugar de la ostentación.
- Inter Variable — reemplazo: Inter · esquemas 400, 420, 450, 550 · Un tipo de letra secundario utilizado en elementos de interfaz de navegación, notas breves, controles de pestañas y microtexto en pies de página. Sus letras minúsculas ligeramente más grandes y un espaciado entre letras más estándar facilitan la lectura en tamaños compactos. También es adecuado para situaciones en las que una fuente de 420 puntos cubre el espacio entre una fuente regular y una de tamaño mediano.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 12px |
| Radio del botón | 9999px |
| Radio de la tarjeta | 12px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 80px |
| Ancho de página | 1280px |
La IA construirá tu sitio web al estilo de Shopify y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Retool — Un cálido taller de obsidiana, una superficie para herramientas de precisión, iluminada por brasas humeantes, donde todo se crea.
- Elektron — A medianoche, el panel de control del equipo es un lienzo casi negro, donde destacan las fotos de los productos mientras que la interfaz permanece prácticamente invisible.
- REKKI — Panel de control de vuelo en el laboratorio fotográfico
- OFFFICE : — una galería noir envuelta en una tipografía monolítica
- Clyde — La sala de exposiciones, con su único foco, es una galería casi a oscuras donde el único color en la estancia es una esfera con un degradado cálido.
- Channel Studio — Un laboratorio fotográfico de estudio con una lámpara de pantalla color coral.
- Electronic Materials Office — Una brasa incandescente en una galería decorada con carbón.
- ORYZO AI — Un reportaje fotográfico sobre un cuarto oscuro. Un objeto solitario flotando en la cálida oscuridad, con una tipografía color crema como única decoración.
- Factory — La terminal de la "sala de guerra" a medianoche. La "fábrica" es un panel de control de un negro austero donde una sola tarjeta blanca aterriza como un despacho iluminado por una linterna; el único objeto en la sala es el trabajo en sí.
- Hungry Tiger — Grafitis de color cúrcuma brillante en la pared del tandoor. Una paleta unificada de dorado y marrón óxido, con una tipografía tan grande que parece más un letrero de un mercado de especias que una página web.
- Bibliothèque — Una galería negra con forma de cubo bajo un foco: un plato iluminado solitario en un vasto y oscuro salón.
- Apple (España) — Teatro negro con iluminación ambiental.