Shopify
Polnočni rastlinjak - Blagovne znamke cvetijo na temno turkiznem ozadju, osvetljene z eno samo iskrico mete
Shopifyjev oblikovalski sistem je polnočna delavnica za trgovino: skoraj črno platno, obarvano z globoko turkizno zeleno, široka, samozavestna pisava sans-serif in en sam živahen poudarek mint, ki aktivira interaktivne trenutke. Vmesnik spominja na temnico, kjer so izdelki in blagovne znamke vir svetlobe – fotografije in izložbe se svetijo na skoraj črnih površinah, medtem ko se kromirani elementi umikajo. Komponente so geometrijske, a mehke: kartice s polmerom 12px s tankimi robovi, gumbi v obliki tablet in pisava z debelino 330, ki šepeta lestvico in ne kriči. Eno samo kromatično ločilo (#36f4a4) se redko uporablja na povezavah, oznakah in stanjih fokusa, barva pa je rezervirana za funkcionalne trenutke, da se zagotovi, da zgodbe trgovcev ostanejo vizualna osrednja točka.
Največja širina je ~1280 slikovnih pik, poravnana na sredino, z bloki za uvodno stranjo polne širine, ki segajo čez vsebnik s fotografijami. Ritem strani se izmenjuje: (1) temna uvodna stran polne širine s prekrivajočim naslovom in gumbi za poziv k dejanju, (2) udobni temni razdelki z bloki besedila in slik največje širine v 2 stolpcih ali mrežami slik v 3 stolpcih, (3) interaktivne predstavitvene plošče (kartica izdelka, kalkulator za pošiljanje, zemljevid sveta), prikazane kot dvignjene kartice na globljem platnu. Navigacija je fiksna zgornja vrstica z logotipom + 3 navigacijskimi elementi + sekundarnimi povezavami + primarnim gumbom za poziv k dejanju, vse poravnano na desno. Navpični ritem uporablja 80 slikovnih pik vrzeli med razdelki z gladkim prehodom – brez ločil med temnimi razdelki, le sprememba površinskega tona.
Vizualna podoba je osredotočena predvsem na trgovca: fotografije izdelkov v polni velikosti in fotografije z dogodkov blagovnih znamk nosijo večino vizualne teže, pogosto v obliki velikih ozadij s prekrivajočim belim besedilom. Slike so tesno obrezane, visokokontrastne in praznične narave (zvonjenje zvonca Nasdaq, skupinski pozdravi, bližnji posnetki izdelkov v rokah). Temno ozadje ustvarja vtis, da so te fotografije osvetljene z reflektorji. Ilustracije so minimalistične – glavno pojasnjevalno delo opravljajo vdelane slike izdelkov in posnetki zaslona izložb. Ikone so enobarvne, s širino črte 1,5–2 slikovnih pik, običajno bele ali #36f4a4 za aktivna stanja.
Paleta
Blagovna znamka
- Shopify Mint
#36f4a4— Aktivni navigacijski indikatorji, obroči za fokusiranje, označevanje oznak in označevanje povezav s kazalcem miške so edini kromatični lesk, ki ustvarja občutek omogočene interaktivnosti na temnem ozadju.
Nevtralno
- Midnight Forest
#02090a— Platno strani, slike ozadja glave, slike ozadja razdelkov - Deep Lichen
#061a1c— Glavne površine kartic, dvignjene plošče, bloki vsebine. - Shaded Fern
#072720— Navigacijska plošča, dodatne kartice, komaj opazen dvig plošče. - Spruce Border
#1e2c31— Tanke obrobe za kartice, ločilne črte, obrisi vnosnih polj. - Abyss Indigo
#000a1e— Dodatna površina za vgradnjo izdelkov/demonstracij, plošče z opisi funkcij. - Pure White
#ffffff— Glavno besedilo, polnilo gumbov, naslov, logotipi.
Tipografija
od 12 do 70 slikovnih pik · 8 korakov
- Neue Haas Grotesk — zamenjava: Inter · obrisi 330, 400, 500, 550, 600 · Osnovni tipografski sistem so naslovi s težo pisave 70–96 slikovnih pik (330–400), ki so prefinjeni in ne kričeči; besedilo besedila s težo pisave 16–18 slikovnih pik (400–500); ter navigacija in uporabniški vmesnik s težo pisave 14–16 slikovnih pik (500–550). Ultralahka teža pisave 330 pri velikih velikostih zaslona je posebnost: izraža samozavest z zadržanostjo in ne z obsežnostjo.
- Inter Variable — zamenjava: Inter · obrisi 400, 420, 450, 550 · Sekundarna vrsta pisave, ki se uporablja v elementih navigacijskega vmesnika, majhnih opombah, zavihkih in mikrobesedilu v nogah. Zaradi nekoliko večjih malih črk in večjega standardnega razmika med črkami je bolj berljiva pri kompaktnih velikostih. Primerna je tudi za situacije, ko pisava z debelino 420 zapolni vrzel med navadno in srednje veliko pisavo.
Intervali in oblika
| Namen | Pomen |
|---|---|
| Gostota | povprečje |
| Osnovni korak | 12px |
| Polmer gumba | 9999px |
| Polmer kartice | 12px |
| Sence | ne - obrobe namesto senc |
| Med odseki | 80px |
| Širina strani | 1280px |
Umetna inteligenca bo zgradila vašo spletno stran v slogu Shopify in jo napolnila
- Polnite z izdelki in objavami prek povezave - Instagram, TikTok, Facebook.
- Prenesite vsebino s starega spletnega mesta – samo navedite naslov.
- Sodoben dizajn na najboljšem iskalniku: React ( Next.js) z vnaprej pripravljenim upodabljanjem na strežniku in optimizacijo za SEO.
- Popolnoma avtomatizirana SEO optimizacija za rezultate iskanja in priporočila nevronskih mrež.
Podobni slogi
- Retool — Topla delavnica iz obsidiana - površina za precizno orodje, osvetljena s tlečim žerjavom, kjer nastaja vse
- Elektron — Nadzorna plošča opreme je ob polnoči skoraj črno platno, kjer se fotografije izdelkov lesketajo, medtem ko vmesnik ostaja praktično neviden.
- REKKI — Nadzorna plošča leta v fotolaboratoriju
- OFFFICE : — galerija noir, zajeta v monolitni pisavi
- Clyde — Razstavni prostor z enim samim reflektorjem je skoraj temna galerija, kjer je edina barva v prostoru topla gradientna krogla.
- Channel Studio — Fotografski studio z enim koralnim senčnikom
- Electronic Materials Office — Žareča žerjavica v galeriji, okrašeni z ogljem
- ORYZO AI — Foto esej o temnici. Osamljen predmet, ki lebdi v topli temi, kremna pisava kot edina dekoracija.
- Factory — Terminal "vojne sobe" ob polnoči. "Tovarna" je črna nadzorna plošča, kjer pristane ena sama bela kartica kot s svetilko osvetljeno sporočilo – edini predmet v sobi je delo samo.
- Hungry Tiger — Grafiti v svetlih barvah kurkume na steni tandoorja. Enotna paleta zlate in rjasto rjave barve, s tako veliko pisavo, da je bolj podobna napisu tržnice z začimbami kot spletni strani.
- Bibliothèque — Črna galerija v obliki kocke pod reflektorjem – osamljena osvetljena plošča v prostrani, temni dvorani
- Apple (España) — črno gledališče z osvetljenimi elementi