Shopify
Pusnakts siltumnīca — preču zīmes zied uz tumši tirkīza fona, ko izgaismo viena piparmētru dzirksts
Shopify dizaina sistēma ir kā nakts darbnīca komercijai: gandrīz melns audekls, kas ietonēts dziļi tirkīza zaļā krāsā, plašs, pārliecināts sans-serif fonts un viens spilgts piparmētru akcents, kas aktivizē interaktīvos mirkļus. Saskarne atgādina tumšo istabu, kur gaismas avots ir produkti un zīmoli — fotoattēli un veikalu vitrīnas mirdz uz gandrīz melnām virsmām, bet hroma elementi atkāpjas. Komponenti ir ģeometriski, bet maigi: 12 pikseļu rādiusa kartītes ar plānām apmalēm, tabletes formas pogas un 330 biezuma fonts, kas čukst mērogu, nevis kliedz. Viena hromatiskā pieturzīme (#36f4a4) tiek izmantota taupīgi saitēs, tagos un fokusa stāvokļos, rezervējot krāsu funkcionāliem mirkļiem, lai nodrošinātu, ka tirgotāju stāsti paliek vizuālais centrālais punkts.
Maksimālais platums ir ~1280 pikseļi, centrēts, ar pilna platuma uzplaiksnījuma blokiem, kas sniedzas ārpus fotoattēlu konteinera. Lapas ritms mainās: (1) pilna platuma tumša uzplaiksnījuma lapa ar pārklātu virsrakstu un aicinājuma uz darbību pogām, (2) ērtas tumšas sadaļas ar maksimālā platuma teksta un attēlu blokiem 2 kolonnās vai attēlu režģiem 3 kolonnās, (3) interaktīvi vitrīnas paneļi (produkta karte, piegādes kalkulators, pasaules karte), kas tiek parādīti kā paceltas kartītes uz dziļāka audekla. Navigācija ir fiksēta augšējā josla ar logotipu + 3 navigācijas elementiem + sekundārajām saitēm + galveno aicinājuma uz darbību pogu, kas visas ir izlīdzinātas pa labi. Vertikālajā ritmā starp sadaļām tiek izmantotas 80 pikseļu atstarpes ar vienmērīgu pāreju — starp tumšajām sadaļām nav atdalītāju, tikai virsmas toņa maiņa.
Vizuālais dizains galvenokārt ir vērsts uz mazumtirgotāju: lielāko vizuālo svaru veido pilna izmēra produktu fotoattēli un fotoattēli no zīmola pasākumiem, bieži vien lielu fonu veidā ar pārklātu baltu tekstu. Attēli ir cieši apgriezti, ar augstu kontrastu un svētku noskaņu (Nasdaq zvana zvanīšana, grupu sveicieni, rokās turētu produktu tuvplāni). Tumšais fons rada iespaidu, ka šīs fotogrāfijas ir izgaismotas ar prožektoriem. Ilustrācijas ir minimālistiskas — galveno skaidrojošo darbu veic iegultie produktu attēli un veikalu vitrīnu ekrānuzņēmumi. Ikonas ir vienkrāsainas, ar līnijas platumu 1,5–2 pikseļi, parasti baltas vai #36f4a4 aktīviem stāvokļiem.
Palete
Zīmols
- Shopify Mint
#36f4a4— Aktīvās navigācijas indikatori, fokusa gredzeni, tagu izcelšana un kursora izcelšana saitēs ir vienīgais hromatiskais mirdzums, kas rada iespējošas mijiedarbības sajūtu uz tumša fona.
Neitrāls
- Midnight Forest
#02090a— Lapas audekls, galvenes fona attēli, sadaļu fona attēli - Deep Lichen
#061a1c— Galvenās karšu virsmas, paceltie paneļi, satura bloki. - Shaded Fern
#072720— Navigācijas panelis, papildu kartes, paneļa pacelšana tik tikko pamanāma. - Spruce Border
#1e2c31— Plānas apmales kartēm, sadalošās līnijas, ievades lauku kontūras. - Abyss Indigo
#000a1e— Papildu virsma produktu/demonstrāciju iegulšanai, paneļi ar funkciju aprakstiem. - Pure White
#ffffff— Galvenais teksts, pogu aizpildījums, virsraksts, logotipi.
Tipogrāfija
no 12 līdz 70 pikseļiem · 8 soļi
- Neue Haas Grotesk — nomaiņa: Inter · kontūras 330, 400, 500, 550, 600 · Galvenā tipogrāfiskā sistēma ir virsraksti ar fonta svaru 70–96 pikseļi (330–400), kas ir diezgan neuzkrītoši, nevis skaļi; pamatteksts ar fonta svaru 16–18 pikseļi (400–500); un navigācija un lietotāja saskarne ar fonta svaru 14–16 pikseļi (500–550). Īpaši vieglais fonta svars 330 lielos ekrānos ir atšķirīga iezīme: tas pauž pārliecību, izmantojot atturību, nevis apjomu.
- Inter Variable — nomaiņa: Inter · kontūras 400, 420, 450, 550 · Otrreizējs fonta veids, ko izmanto navigācijas saskarnes elementos, nelielās piezīmēs, tabulēšanas vadīklās un mikrotekstā kājenēs. Tā nedaudz lielāki mazie burti un standarta burtu atstarpes padara to vieglāk lasāmu kompaktos izmēros. Tas ir piemērots arī situācijām, kad 420 biezuma fonts aizpilda atstarpi starp parasto un vidēja izmēra fontu.
Intervāli un forma
| Mērķis | Nozīme |
|---|---|
| Blīvums | vidēji |
| Pamata solis | 12px |
| Pogas rādiuss | 9999px |
| Kartes rādiuss | 12px |
| Ēnas | nē — robežas ēnu vietā |
| Starp sekcijām | 80px |
| Lapas platums | 1280px |
Mākslīgais intelekts izveidos jūsu vietni Shopify stilā un aizpildīs to
- Aizpildiet ar produktiem un ierakstiem, izmantojot saiti — Instagram, TikTok, Facebook.
- Pārsūtiet saturu no savas vecās vietnes — vienkārši norādiet adresi.
- Moderns dizains uz labākā dzinēja: React ( Next.js) ar servera renderēšanu un SEO optimizāciju uzreiz pēc instalēšanas.
- Pilnībā automatizēta SEO optimizācija meklēšanas rezultātiem un neironu tīkla ieteikumiem.
Līdzīgi stili
- Retool — Silta obsidiāna darbnīca — precīzijas instrumentu virsma, ko apgaismo kvēlojošas ogles, kur viss tiek radīts.
- Elektron — Iekārtu vadības panelis pusnaktī ir gandrīz melns audekls, kur mirdz produktu fotoattēli, bet saskarne paliek praktiski neredzama.
- REKKI — Lidojuma vadības panelis fotolaboratorijā
- OFFFICE : — monolītā fontā iegrimusi noir galerija
- Clyde — Izstāžu zāle ar vienīgo prožektoru ir gandrīz tumša galerija, kur vienīgā krāsa telpā ir silta gradienta bumba.
- Channel Studio — Studijas fotolaboratorija ar vienu koraļļu abažūru
- Electronic Materials Office — Kvēlojoša ogle galerijā, kas dekorēta ar ogli
- ORYZO AI — Foto eseja par tumšo istabu. Vientuļš objekts, kas lidinās siltā tumsā, krēmkrāsas fonts — vienīgā dekorācija.
- Factory — "Kara telpas" terminālis pusnaktī. "Rūpnīca" ir skarbi melns vadības panelis, kur viena balta karte nolaižas kā ar lukturīti apgaismota ziņojumapmaiņa — vienīgais objekts telpā ir pats darbs.
- Hungry Tiger — Kurkumas spilgts grafiti uz tandūra sienas. Vienota zelta un rūsganbrūna palete ar tik lielu fontu, ka tas vairāk izskatās pēc garšvielu tirgus zīmes nekā tīmekļa vietnes.
- Bibliothèque — Melna kuba formas galerija prožektoru gaismā – vientuļa izgaismota plāksne plašā, tumšā zālē
- Apple (España) — melns teātris ar izgaismotām iekārtām