Shopify
Middernachtsbroeikas - Handelsmerken bloeie tsjin in djip turkooizen eftergrûn, ferljochte troch in inkele fonk munt
It ûntwerpsysteem fan Shopify is in middernachtsworkshop foar hannel: in hast swart doek tint mei in djip turkoois grien, in breed, selsbewust sans-serif lettertype, en in inkele libbene muntaksint dy't ynteraktive mominten aktivearret. De ynterface liket op in tsjustere keamer, dêr't produkten en merken de boarne fan ljocht binne - foto's en winkelpuien gloeie tsjin hast swarte oerflakken, wylst chrome eleminten weromlûke. Komponinten binne geometrysk, mar sêft: kaarten mei in radius fan 12px mei tinne rânen, pilfoarmige knoppen, en in lettertype fan 330 gewicht dat skaal flústeret ynstee fan roppen. In inkele chromatyske leesteken (#36f4a4) wurdt sparjend brûkt op keppelings, tags en fokusstaten, wêrby't kleur reservearre wurdt foar funksjonele mominten om te soargjen dat hannelsferhalen it fisuele fokuspunt bliuwe.
De maksimale breedte is ~1280px, sintraal, mei splash-blokken oer folsleine breedte dy't fierder geane as de fotokontener. It sidenritme wikselt ôf: (1) in donkere splash-side oer folsleine breedte mei in oerlizzende koptekst en call-to-action-knoppen, (2) noflike donkere seksjes mei tekst- en ôfbyldingsblokken oer maksimale breedte yn 2 kolommen of ôfbyldingsrasters yn 3 kolommen, (3) ynteraktive showcase-panielen (produktkaart, ferstjoerrekkenmasine, wrâldkaart) werjûn as ferhege kaarten op in djipper doek. De navigaasje is in fêste boppeste balke mei it logo + 3 navigaasje-eleminten + sekundêre keppelings + de primêre call-to-action-knop, allegear rjochts ôfstimd. It fertikale ritme brûkt gatten fan 80px tusken seksjes mei in glêde oergong - gjin skiedingswanden tusken donkere seksjes, allinich in feroaring yn oerflaktoan.
It fisuele ûntwerp is benammen rjochte op 'e retailer: produktfoto's op folsleine grutte en foto's fan merkeveneminten drage it grutste part fan it fisuele gewicht, faak yn 'e foarm fan grutte eftergrûnen mei oerlizzende wite tekst. De ôfbyldings binne strak bysnien, hawwe in heech kontrast en binne feestlik fan aard (it rinkeljen fan 'e Nasdaq-bel, groepsgroetnis, close-ups fan produkten yn 'e hân). De donkere eftergrûn skept de yndruk dat dizze foto's ferljochte wurde troch spotlights. De yllustraasjes binne minimalistysk - it wichtichste ferklearjende wurk wurdt dien troch ynbêde produktôfbyldings en skermôfbyldings fan winkels. Ikoanen binne monochroom, mei in linebreedte fan 1,5-2px, typysk wyt of #36f4a4 foar aktive steaten.
Palet
Merk
- Shopify Mint
#36f4a4— Aktive navigaasje-yndikatoaren, fokusringen, tag-markeringen en sweefmarkeringen op keppelings binne de ienige chromatyske fonkeling dy't in gefoel fan ynskeakele ynteraktiviteit makket tsjin in donkere eftergrûn.
Neutraal
- Midnight Forest
#02090a— Sidedoek, koptekst eftergrûnôfbyldings, seksje eftergrûnôfbyldings - Deep Lichen
#061a1c— Haadkaartoerflakken, ferhege panielen, ynhâldsblokken. - Shaded Fern
#072720— Navigaasjepaniel, ekstra kaarten, amper merkbere ferheging fan it paniel. - Spruce Border
#1e2c31— Tinne rânen foar kaarten, skiedslinen, omtreklinen fan ynfierfjilden. - Abyss Indigo
#000a1e— Ekstra oerflak foar it ynbêdzjen fan produkten/demonstraasjes, panielen mei beskriuwingen fan funksjes. - Pure White
#ffffff— Haadtekst, knopynfolling, titel, logo's.
Typografy
fan 12 oant 70px · 8 stappen
- Neue Haas Grotesk — ferfanging: Inter · sketsen 330, 400, 500, 550, 600 · It kearntypografyske systeem bestiet út koppen mei in lettertypegewicht fan 70–96px (330–400) dy't subtyl binne ynstee fan lûd; lichemtekst mei in lettertypegewicht fan 16–18px (400–500); en navigaasje en brûkersynterface mei in lettertypegewicht fan 14–16px (500–550). It ultralichte lettertypegewicht fan 330 op grutte skermgrutte is in ûnderskiedend skaaimerk: it straalt fertrouwen út troch beheining ynstee fan bulk.
- Inter Variable — ferfanging: Inter · sketsen 400, 420, 450, 550 · In sekundêr lettertype dat brûkt wurdt yn navigaasje-ynterface-eleminten, lytse notysjes, tabkontrôles en mikrotekst yn fuotteksten. De wat gruttere lytse letters en mear standert letterôfstân meitsje it better lêsber by kompakte formaten. It is ek geskikt foar situaasjes wêr't in lettertype fan 420 gewicht de gat tusken in gewoan en middelgrut lettertype follet.
Yntervallen en foarm
| Doel | Betsjutting |
|---|---|
| Dichtheid | trochsneed |
| Basisstap | 12px |
| Knopradius | 9999px |
| Kaartradius | 12px |
| Skaden | gjin grinzen ynstee fan skaden |
| Tusken seksjes | 80px |
| Sidebreedte | 1280px |
AI sil jo webside bouwe yn Shopify -styl en it folje
- Folje oan mei produkten en berjochten fia de link - Instagram, TikTok, Facebook.
- Oerdrage ynhâld fan jo âlde side - spesifisearje gewoan it adres.
- Modern ûntwerp op 'e bêste motor: React ( Next.js) mei serverrendering en SEO-optimalisaasje direkt út 'e doaze.
- Folslein automatisearre SEO-optimalisaasje foar sykresultaten en oanbefellings foar neurale netwurken.
Ferlykbere stilen
- Retool — In waarme obsidiaanwurkpleats - in oerflak foar presyzje-ark, ferljochte troch smeulende koalen, dêr't alles makke wurdt
- Elektron — It kontrôlepaniel fan 'e apparatuer om middernacht is in hast swart doek, dêr't produktfoto's skine, wylst de ynterface praktysk ûnsichtber bliuwt.
- REKKI — Flechtkontrôlepaniel yn it fotolaboratoarium
- OFFFICE : — in noir-galery omhuld troch in monolitysk lettertype
- Clyde — De showroom, mei syn ienige spotlight, is in hast tsjustere galery dêr't de ienige kleur yn 'e keamer in waarme kleurferrinbal is.
- Channel Studio — In studiofotolaboratoarium mei ien koraal lampeskerm
- Electronic Materials Office — In gloeiende koal yn in galery fersierd mei houtskoal
- Apple iPhone 18 Pro — In galery fan middernachtshardware. Beskôgje elke seksje as in tsjustere, museum-eftige plint, mei ien stik fan it produkt presys markearre, en de typografy en blauwe kontrôles dy't tsjinje as diskrete labels deromhinne.
- Apple Watch Ultra 4 — In ark foar testen yn 'e nacht. Meitsje skermen as in sekwinsje fan swarte tentoanstellingsgebieten, dêr't enoarme SF Pro-headers heechpresyzje-apparatuer, aktive gegevens en soarchfâldich dosearre elektryske kleuren ynramje.
- Apple Watch Series 12 — In brûnzen sensor yn it tsjuster. Tink oan de hardware en statusoanwizings fan it horloazje as ferljochte objekten dy't yn in hast tsjustere galery hingje.
- Bedouin's Daughter — Sinneljocht op swart fluweel. Brûk ljochtsjend bûtergiele, hurde swarte oerflakken en korrelige, sinneljochte ôfbyldings as gelikense dielen fan 'e fisuele komposysje.
- ORYZO AI — In foto-essay oer in tsjustere keamer. In iensum objekt dat sweeft yn 'e waarme tsjusternis, mei in crèmekleurige lettertype as ienige dekoraasje.