Shopify
Middernachtkas - Handelsmerken bloeien op tegen een diep turkooizen achtergrond, verlicht door een enkele vonk mintgroen.
Het ontwerpsysteem van Shopify is een nachtelijke werkplaats voor e-commerce: een bijna zwart canvas met een diepe turquoise groene tint, een breed, zelfverzekerd schreefloos lettertype en een enkele levendige mintgroene accentkleur die interactieve momenten activeert. De interface doet denken aan een donkere kamer, waar producten en merken de lichtbron zijn – foto's en winkelpagina's gloeien tegen bijna zwarte oppervlakken, terwijl chromen elementen naar de achtergrond verdwijnen. Componenten zijn geometrisch maar zacht: kaarten met een radius van 12px en dunne randen, pilvormige knoppen en een lettertype met een gewicht van 330 dat de schaal subtiel suggereert in plaats van op te vallen. Een enkel chromatisch leesteken (#36f4a4) wordt spaarzaam gebruikt op links, tags en focusstatussen, waardoor kleur gereserveerd blijft voor functionele momenten om ervoor te zorgen dat de verhalen van de verkopers het visuele middelpunt blijven.
De maximale breedte is ongeveer 1280px, gecentreerd, met splash-blokken over de volledige breedte die buiten de fotocontainer uitsteken. Het paginaritme wisselt af: (1) een donkere splashpagina over de volledige breedte met een overlay van een koptekst en call-to-action-knoppen, (2) comfortabele donkere secties met tekst- en afbeeldingsblokken van maximale breedte in 2 kolommen of afbeeldingsrasters in 3 kolommen, (3) interactieve showcase-panelen (productkaart, verzendkostenberekening, wereldkaart) weergegeven als verhoogde kaarten op een dieper canvas. De navigatie bestaat uit een vaste bovenbalk met het logo + 3 navigatie-elementen + secundaire links + de primaire call-to-action-knop, allemaal rechts uitgelijnd. Het verticale ritme maakt gebruik van tussenruimtes van 80px tussen secties met een vloeiende overgang – geen scheidingslijnen tussen donkere secties, alleen een verandering in de oppervlaktetint.
Het visuele ontwerp is primair gericht op de retailer: productfoto's op ware grootte en foto's van merkevenementen vormen het grootste deel van de visuele aantrekkingskracht, vaak in de vorm van grote achtergronden met witte tekst eroverheen. De afbeeldingen zijn strak bijgesneden, contrastrijk en feestelijk van aard (het luiden van de Nasdaq-bel, groepsbegroetingen, close-ups van producten in de hand). De donkere achtergrond wekt de indruk dat deze foto's door schijnwerpers worden belicht. De illustraties zijn minimalistisch – de belangrijkste uitleg wordt verzorgd door ingesloten productafbeeldingen en screenshots van winkelgevels. Pictogrammen zijn monochroom, met een lijndikte van 1,5–2px, meestal wit of #36f4a4 voor actieve staten.
Palet
Merk
- Shopify Mint
#36f4a4— Actieve navigatie-indicatoren, focusringen, tagmarkeringen en hovermarkeringen op links zijn de enige kleuraccenten die een gevoel van ingeschakelde interactiviteit creëren tegen een donkere achtergrond.
Neutrale
- Midnight Forest
#02090a— Pagina-canvas, achtergrondafbeeldingen voor de header, achtergrondafbeeldingen voor de secties - Deep Lichen
#061a1c— Hoofdkaartoppervlakken, verhoogde panelen, inhoudsblokken. - Shaded Fern
#072720— Navigatiepaneel, extra kaarten, nauwelijks merkbare verhoging van het paneel. - Spruce Border
#1e2c31— Dunne randen voor kaarten, scheidingslijnen, omlijning van invoervelden. - Abyss Indigo
#000a1e— Extra oppervlak voor het inbedden van producten/demonstraties, panelen met functiebeschrijvingen. - Pure White
#ffffff— Hoofdtekst, knopvulling, titel, logo's.
Typografie
van 12 tot 70px · 8 stappen
- Neue Haas Grotesk — vervanging: Inter · overzichten 330, 400, 500, 550, 600 · Het kerntypografische systeem bestaat uit koppen met een letterdikte van 70–96px (330–400), die subtiel in plaats van opvallend zijn; de hoofdtekst met een letterdikte van 16–18px (400–500); en navigatie en gebruikersinterface met een letterdikte van 14–16px (500–550). De ultralichte letterdikte van 330 bij grote schermformaten is een opvallend kenmerk: het straalt zelfvertrouwen uit door ingetogenheid in plaats van door een te dikke letter.
- Inter Variable — vervanging: Inter · overzichten 400, 420, 450, 550 · Een secundair lettertype dat wordt gebruikt in navigatie-elementen, kleine notities, tabbediening en microtekst in voetteksten. De iets grotere kleine letters en de meer standaard letterafstand maken het beter leesbaar op compacte formaten. Het is ook geschikt voor situaties waarin een lettertype met een gewicht van 420 de kloof tussen een normaal en een middelgroot lettertype overbrugt.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gemiddeld |
| Basisstap | 12px |
| Knopradius | 9999px |
| Kaartradius | 12px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 80px |
| Paginabreedte | 1280px |
AI bouwt je website in de stijl Shopify en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- Retool — Een warme obsidiaanwerkplaats - een oppervlak voor precisiegereedschap, verlicht door smeulende kolen, waar alles wordt gecreëerd.
- Elektron — Het bedieningspaneel van de apparatuur is 's nachts een bijna zwart canvas, waarop productfoto's schitteren terwijl de interface vrijwel onzichtbaar blijft.
- REKKI — Vluchtcontrolepaneel in het fotolab
- OFFFICE : — een noir-galerie gehuld in een monolithisch lettertype
- Clyde — De showroom, met zijn enkele spot, is een bijna volledig donkere galerij waar de enige kleur in de ruimte een warme, geleidelijke kleurovergang in de vorm van een bol is.
- Channel Studio — Een fotostudio met één koraalkleurige lampenkap.
- Electronic Materials Office — Een gloeiende kool in een galerij versierd met houtskool.
- ORYZO AI — Een fotoreportage over een donkere kamer. Een eenzaam object dat zweeft in de warme duisternis, crèmekleurige letters als enige versiering.
- Factory — De terminal in de "oorlogskamer" om middernacht. De "fabriek" is een strak zwart bedieningspaneel waar een enkele witte kaart landt als een door een zaklamp verlicht bericht – het enige object in de kamer is het werk zelf.
- Hungry Tiger — Felgekleurde graffiti op de muur van de tandoor, in de kleur kurkuma. Een harmonieus kleurenpalet van goud en roestbruin, met een lettertype zo groot dat het meer op een uithangbord van een kruidenmarkt lijkt dan op een website.
- Bibliothèque — Een zwarte, kubusvormige galerij in het licht van een spot – een eenzame, verlichte plaat in een immense, donkere hal.
- Apple (España) — zwart theater met verlichte armaturen