Shopify
Invernadoiro de medianoite: as marcas comerciais florecen sobre un fondo turquesa intenso, iluminado por unha soa faísca de menta.
O sistema de deseño de Shopify é un taller de medianoite para o comercio: unha lona case negra tinguida cun verde turquesa intenso, un tipo de letra sans-serif amplo e seguro e un único toque vibrante de cor menta que activa momentos interactivos. A interface parécese a un cuarto escuro, onde os produtos e as marcas son a fonte de luz: as fotos e os escaparates brillan contra superficies case negras, mentres que os elementos cromados retroceden. Os compoñentes son xeométricos pero suaves: tarxetas de radio de 12 px con bordos finos, botóns en forma de pílula e un tipo de letra de peso 330 que susurra escala en lugar de berros. Un único signo de puntuación cromático (#36f4a4) úsase con moderación en ligazóns, etiquetas e estados de foco, reservando a cor para momentos funcionais para garantir que as historias dos comerciantes sigan sendo o punto focal visual.
A largura máxima é de ~1280 px, centrada, con bloques de presentación de ancho completo que se estenden máis alá do contedor da foto. O ritmo da páxina alterna: (1) unha páxina de presentación escura de ancho completo cun título superposto e botóns de chamada á acción, (2) seccións escuras cómodas con texto de ancho máximo e bloques de imaxe en 2 columnas ou cuadrículas de imaxes en 3 columnas, (3) paneis de mostra interactivos (tarxeta do produto, calculadora de envío, mapa do mundo) que se mostran como tarxetas en relevo nun lenzo máis profundo. A navegación é unha barra superior fixa co logotipo + 3 elementos de navegación + ligazóns secundarias + o botón de chamada á acción principal, todos aliñados á dereita. O ritmo vertical usa espazos de 80 px entre as seccións cunha transición suave: sen divisores entre as seccións escuras, só un cambio no ton da superficie.
O deseño visual céntrase principalmente no vendedor polo miúdo: as fotos de produtos a tamaño real e as fotos de eventos da marca levan a maior parte do peso visual, a miúdo en forma de fondos grandes con texto branco superposto. As imaxes están recortadas con precisión, teñen un alto contraste e son de natureza festiva (o toque da campá do Nasdaq, saúdos en grupo, primeiros planos de produtos na man). O fondo escuro crea a impresión de que estas fotos están iluminadas por focos. As ilustracións son minimalistas: o principal traballo explicativo realízase mediante imaxes de produtos incrustadas e capturas de pantalla de escaparates. As iconas son monocromas, cun ancho de liña de 1,5 a 2 px, normalmente brancas ou #36f4a4 para os estados activos.
Paleta
Marca
- Shopify Mint
#36f4a4— Os indicadores de navegación activa, os aneis de foco, os realces de etiquetas e os realces ao pasar o rato nas ligazóns son o único brillo cromático que crea unha sensación de interactividade activada sobre un fondo escuro.
Neutro
- Midnight Forest
#02090a— Lenzo da páxina, imaxes de fondo da cabeceira, imaxes de fondo da sección - Deep Lichen
#061a1c— Superficies principais da tarxeta, paneis en relevo, bloques de contido. - Shaded Fern
#072720— Panel de navegación, tarxetas adicionais, elevación apenas perceptible do panel. - Spruce Border
#1e2c31— Bordes finos para tarxetas, liñas divisorias, contornos de campos de entrada. - Abyss Indigo
#000a1e— Superficie adicional para integrar produtos/demostracións, paneis con descricións de funcións. - Pure White
#ffffff— Texto principal, recheo de botóns, título, logotipos.
Tipografía
de 12 a 70 px · 8 pasos
- Neue Haas Grotesk — substitución: Inter · contornos 330, 400, 500, 550, 600 · O sistema tipográfico principal son titulares cun grosor de letra de 70–96 px (330–400) que son sutís en lugar de fortes; corpo do texto cun grosor de letra de 16–18 px (400–500); e navegación e interface de usuario cun grosor de letra de 14–16 px (500–550). O grosor de letra ultralixeiro de 330 en pantallas grandes é unha característica distintiva: transmite confianza a través da moderación en lugar do volume.
- Inter Variable — substitución: Inter · contornos 400, 420, 450, 550 · Un tipo de letra secundario empregado en elementos da interface de navegación, notas pequenas, controis de lapelas e microtexto nos pés de páxina. As súas letras minúsculas lixeiramente máis grandes e o espazado entre letras máis estándar fan que sexa máis lexible en tamaños compactos. Tamén é axeitado para situacións nas que unha fonte de grosor 420 enche o oco entre unha fonte normal e unha de tamaño medio.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 12px |
| Radio do botón | 9999px |
| Radio da tarxeta | 12px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 80px |
| Largura da páxina | 1280px |
A IA creará o teu sitio web ao estilo de Shopify e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- Retool — Un cálido taller de obsidiana: unha superficie para ferramentas de precisión, iluminada por brasas fumegantes, onde todo se crea
- Elektron — O panel de control do equipo á medianoite é unha lona case negra, onde as fotos do produto brillan mentres a interface permanece practicamente invisible.
- REKKI — Panel de control de voo no laboratorio fotográfico
- OFFFICE : — unha galería noir envolvida nunha fonte monolítica
- Clyde — A sala de exposicións, co seu único foco, é unha galería case escura onde a única cor da habitación é unha cálida bóla de degradado.
- Channel Studio — Un laboratorio fotográfico de estudio cunha pantalla de lámpada de coral
- Electronic Materials Office — Unha brasa brillante nunha galería decorada con carbón vexetal
- ORYZO AI — Un ensaio fotográfico sobre un cuarto escuro. Un obxecto solitario pairando na cálida escuridade, cunha fonte cor crema como única decoración.
- Factory — O terminal da "sala de guerra" á medianoite. A "fábrica" é un panel de control negro e impoluto onde aterra unha única tarxeta branca coma un despacho iluminado por unha lanterna; o único obxecto na sala é a propia obra.
- Hungry Tiger — Grafiti de cor cúrcuma na parede do tandoor. Unha paleta unificada de dourado e marrón oxidado, cunha fonte tan grande que parece máis o letreiro dun mercado de especias que unha páxina web.
- Bibliothèque — Unha galería negra en forma de cubo baixo un foco: unha placa solitaria iluminada nun corredor vasto e escuro
- Apple (España) — teatro negro con accesorios iluminados