Shopify
Hivernacle de mitjanit: les marques comercials floreixen sobre un fons turquesa profund, il·luminat per una sola guspira de menta.
El sistema de disseny de Shopify és un taller de mitjanit per al comerç: un llenç gairebé negre tenyit d'un verd turquesa profund, una tipografia sans-serif ampla i segura i un únic accent vibrant de color menta que activa moments interactius. La interfície s'assembla a una sala fosca, on els productes i les marques són la font de llum: les fotos i els aparadors brillen contra superfícies gairebé negres, mentre que els elements cromats retrocedeixen. Els components són geomètrics però suaus: targetes de radi de 12 px amb vores primes, botons en forma de píndola i una tipografia de pes 330 que xiuxiueja escala en lloc de cridar. Un únic signe de puntuació cromàtica (#36f4a4) s'utilitza amb moderació en enllaços, etiquetes i estats de focus, reservant el color per a moments funcionals per garantir que les històries dels comerciants continuïn sent el punt focal visual.
L'amplada màxima és d'uns 1280 px, centrada, amb blocs de presentació d'amplada completa que s'estenen més enllà del contenidor de la foto. El ritme de la pàgina alterna: (1) una pàgina de presentació fosca d'amplada completa amb un títol superposat i botons de crida a l'acció, (2) seccions fosques còmodes amb text d'amplada màxima i blocs d'imatges en 2 columnes o quadrícules d'imatges en 3 columnes, (3) panells interactius de mostra (targeta del producte, calculadora d'enviament, mapa del món) que es mostren com a targetes en relleu en un llenç més profund. La navegació és una barra superior fixa amb el logotip + 3 elements de navegació + enllaços secundaris + el botó de crida a l'acció principal, tots alineats a la dreta. El ritme vertical utilitza espais de 80 px entre seccions amb una transició suau: sense divisors entre seccions fosques, només un canvi en el to de la superfície.
El disseny visual se centra principalment en el minorista: les fotos de productes a mida real i les fotos d'esdeveniments de la marca porten la major part del pes visual, sovint en forma de fons grans amb text blanc superposat. Les imatges estan retallades, tenen un contrast elevat i són de naturalesa festiva (el so de la campana del Nasdaq, salutacions en grup, primers plans de productes a la mà). El fons fosc crea la impressió que aquestes fotos estan il·luminades per focus. Les il·lustracions són minimalistes: la principal tasca explicativa la realitzen imatges de productes incrustades i captures de pantalla d'aparadors de botigues. Les icones són monocromes, amb una amplada de línia d'1,5 a 2 px, normalment blanques o #36f4a4 per als estats actius.
Paleta
Marca
- Shopify Mint
#36f4a4— Els indicadors de navegació activa, els anells de focus, els ressaltats d'etiquetes i els ressaltats en passar el cursor pel enllaç són l'única brillantor cromàtica que crea una sensació d'interactivitat habilitada sobre un fons fosc.
Neutral
- Midnight Forest
#02090a— Llenç de pàgina, imatges de fons de capçalera, imatges de fons de secció - Deep Lichen
#061a1c— Superfícies principals de la targeta, panells en relleu, blocs de contingut. - Shaded Fern
#072720— Panell de navegació, targetes addicionals, elevació gairebé imperceptible del panell. - Spruce Border
#1e2c31— Vores primes per a targetes, línies divisòries, contorns de camps d'entrada. - Abyss Indigo
#000a1e— Superfície addicional per incrustar productes/demostracions, panells amb descripcions de funcions. - Pure White
#ffffff— Text principal, farciment de botons, títol, logotips.
Tipografia
de 12 a 70px · 8 passos
- Neue Haas Grotesk — reemplaçament: Inter · esquemes 330, 400, 500, 550, 600 · El sistema tipogràfic principal consisteix en titulars amb un gruix de lletra de 70–96 px (330–400) que són subtils en lloc de forts; text del cos amb un gruix de lletra de 16–18 px (400–500); i navegació i interfície d'usuari amb un gruix de lletra de 14–16 px (500–550). El gruix de lletra ultralleuger de 330 a mides de pantalla grans és una característica distintiva: transmet confiança a través de la moderació en lloc del volum.
- Inter Variable — reemplaçament: Inter · esquemes 400, 420, 450, 550 · Un tipus de lletra secundari que s'utilitza en elements d'interfície de navegació, notes petites, controls de pestanyes i microtext als peus de pàgina. Les seves lletres minúscules lleugerament més grans i l'espaiat de lletres més estàndard la fan més llegible en mides compactes. També és adequada per a situacions en què una lletra de pes 420 omple el buit entre una lletra normal i una de mida mitjana.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | mitjana |
| Pas bàsic | 12px |
| Radi del botó | 9999px |
| Radi de la targeta | 12px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 80px |
| Amplada de la pàgina | 1280px |
La IA crearà el vostre lloc web a l'estil Shopify i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- Retool — Un taller d'obsidiana càlid: una superfície per a eines de precisió, il·luminada per brases fumejants, on tot es crea
- Elektron — El panell de control de l'equip a mitjanit és un llenç gairebé negre, on les fotos del producte brillen mentre la interfície roman pràcticament invisible.
- REKKI — Panell de control de vol al laboratori fotogràfic
- OFFFICE : — una galeria noir engolida per una font monolítica
- Clyde — La sala d'exposició, amb el seu únic focus, és una galeria gairebé fosca on l'únic color de l'habitació és una bola de degradat càlid.
- Channel Studio — Un laboratori fotogràfic d'estudi amb una pantalla de làmpada de corall
- Electronic Materials Office — Una brasa brillant en una galeria decorada amb carbó vegetal
- ORYZO AI — Un assaig fotogràfic sobre un quart fosc. Un objecte solitari suspès en la foscor càlida, amb una lletra color crema com a única decoració.
- Factory — La terminal de la "sala de guerra" a mitjanit. La "fàbrica" és un panell de control negre i impecable on aterra una única targeta blanca com un enviament il·luminat per una llanterna; l'únic objecte de la sala és l'obra en si.
- Hungry Tiger — Grafiti amb color cúrcuma a la paret del tandoor. Una paleta unificada de daurat i marró rovellat, amb una font tan gran que sembla més un rètol de mercat d'espècies que un lloc web.
- Bibliothèque — Una galeria negra en forma de cub sota un focus: una placa il·luminada solitària en una sala vasta i fosca
- Apple (España) — teatre negre amb accessoris il·luminats