Shopify
Ponoćni staklenik - Zaštitni znakovi cvjetaju na dubokoj tirkiznoj pozadini, osvijetljeni jednom iskrom mente
Shopifyjev dizajnerski sistem je ponoćna radionica za trgovinu: gotovo crno platno nijansirano tamno tirkizno zelenom bojom, širok, samouvjeren sans-serif font i jedan živopisni mint akcenat koji aktivira interaktivne trenutke. Interfejs podsjeća na mračnu komoru, gdje su proizvodi i brendovi izvor svjetlosti - fotografije i izlozi sjaje na gotovo crnim površinama, dok se hromirani elementi povlače. Komponente su geometrijske, ali mekane: kartice radijusa 12px s tankim okvirima, dugmad u obliku tableta i font debljine 330 koji šapuće skalu, a ne viče. Jedan hromatski interpunkcijski znak (#36f4a4) se štedljivo koristi na linkovima, oznakama i stanjima fokusa, rezervirajući boju za funkcionalne trenutke kako bi se osiguralo da priče trgovaca ostanu vizualna fokusna tačka.
Maksimalna širina je ~1280px, centrirano, s blokovima uvodnih poruka pune širine koji se protežu izvan okvira za fotografije. Ritam stranice se naizmjenično prikazuje: (1) tamna uvodna stranica pune širine s preklopljenim naslovom i dugmadima za poziv na akciju, (2) ugodni tamni odjeljci s blokovima teksta i slika maksimalne širine u 2 kolone ili mrežama slika u 3 kolone, (3) interaktivni paneli za izlaganje (kartica proizvoda, kalkulator dostave, karta svijeta) prikazani kao izdignute kartice na dubljem platnu. Navigacija je fiksna gornja traka s logotipom + 3 navigacijska elementa + sekundarne veze + primarno dugme za poziv na akciju, sve poravnato udesno. Vertikalni ritam koristi razmake od 80px između odjeljaka s glatkim prijelazom - bez razdjelnika između tamnih odjeljaka, samo promjena u tonu površine.
Vizualni dizajn je prvenstveno fokusiran na trgovca: fotografije proizvoda u punoj veličini i fotografije sa događaja brenda nose najveći dio vizualne težine, često u obliku velikih pozadina s preklopljenim bijelim tekstom. Slike su usko izrezane, visokog kontrasta i svečane prirode (zvonjava Nasdaq zvona, grupni pozdravi, krupni planovi proizvoda u rukama). Tamna pozadina stvara utisak da su ove fotografije osvijetljene reflektorima. Ilustracije su minimalističke - glavni objašnjavajući posao obavljaju ugrađene slike proizvoda i snimci ekrana izloga. Ikone su monohromatske, sa širinom linije od 1,5–2px, obično bijele ili #36f4a4 za aktivna stanja.
Paleta
Brend
- Shopify Mint
#36f4a4— Aktivni indikatori navigacije, prstenovi za fokusiranje, isticanja oznaka i isticanja pri zadržavanju miša na linkovima jedini su hromatski sjaj koji stvara osjećaj omogućene interaktivnosti na tamnoj pozadini.
Neutralno
- Midnight Forest
#02090a— Platno stranice, pozadinske slike zaglavlja, pozadinske slike odjeljaka - Deep Lichen
#061a1c— Glavne površine kartica, podignuti paneli, blokovi sadržaja. - Shaded Fern
#072720— Navigacijska ploča, dodatne kartice, jedva primjetno podizanje ploče. - Spruce Border
#1e2c31— Tanke ivice za kartice, linije razdvajanja, obrisi polja za unos. - Abyss Indigo
#000a1e— Dodatna površina za ugradnju proizvoda/demonstracija, panela s opisima funkcija. - Pure White
#ffffff— Glavni tekst, popunjavanje dugmadi, naslov, logotipi.
Tipografija
od 12 do 70px · 8 koraka
- Neue Haas Grotesk — zamjena: Inter · obrisi 330, 400, 500, 550, 600 · Osnovni tipografski sistem čine naslovi s debljinom fonta od 70–96px (330–400) koji su suptilni, a ne jasni; tekst teksta s debljinom fonta od 16–18px (400–500); te navigacija i korisnički interfejs s debljinom fonta od 14–16px (500–550). Ultra-lagana debljina fonta od 330 na velikim veličinama ekrana je prepoznatljiva karakteristika: prenosi samopouzdanje kroz suzdržanost, a ne kroz glomaznost.
- Inter Variable — zamjena: Inter · obrisi 400, 420, 450, 550 · Sekundarni tip fonta koji se koristi u elementima navigacijskog interfejsa, malim bilješkama, kontrolama kartica i mikrotekstu u podnožjima. Njegova nešto veća mala slova i standardniji razmak između slova čine ga čitljivijim pri kompaktnim veličinama. Također je pogodan za situacije gdje font debljine 420 popunjava prazninu između običnog i srednjeg fonta.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | prosjek |
| Osnovni korak | 12px |
| Radijus dugmeta | 9999px |
| Radijus kartice | 12px |
| Sjene | ne - okviri umjesto sjena |
| Između sekcija | 80px |
| Širina stranice | 1280px |
Vještačka inteligencija će izgraditi vašu web stranicu u Shopify stilu i popuniti je
- Popunite proizvodima i objavama putem linka - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa vaše stare stranice - samo navedite adresu.
- Moderan dizajn na najboljem engine-u: React ( Next.js) sa serverskim renderovanjem i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretrage i preporuke neuronskih mreža.
Slični stilovi
- Retool — Topla radionica od opsidijana - površina za precizne alate, osvijetljena tinjajućim žarom, gdje se sve stvara
- Elektron — Kontrolna ploča opreme u ponoć je gotovo crno platno, gdje fotografije proizvoda blistaju dok interfejs ostaje praktično nevidljiv.
- REKKI — Kontrolna ploča leta u fotolaboratoriji
- OFFFICE : — noir galerija obavijena monolitnim fontom
- Clyde — Izložbeni prostor, sa svojim jedinim reflektorom, je gotovo mračna galerija u kojoj je jedina boja u prostoriji topla gradijentna kugla.
- Channel Studio — Studijski foto-laboratorij s jednim koraljnim abažurom
- Electronic Materials Office — Užareni žar u galeriji ukrašenoj ugljenom
- ORYZO AI — Foto esej o mračnoj komori. Usamljeni predmet koji lebdi u toplom mraku, krem font kao jedini ukras.
- Factory — Terminal "ratne sobe" u ponoć. "Fabrika" je potpuno crna kontrolna ploča gdje jedna bijela kartica sleti poput depeše osvijetljene baterijskom lampom - jedini predmet u sobi je sam rad.
- Hungry Tiger — Grafiti jarkih boja kurkume na zidu tandoora. Ujedinjena paleta zlatne i hrđavo smeđe, s fontom toliko velikim da više liči na znak tržnice začina nego na web stranicu.
- Bibliothèque — Crna galerija u obliku kocke pod reflektorom – usamljena osvijetljena ploča u ogromnoj, mračnoj dvorani
- Apple (España) — crno pozorište sa osvetljenim elementima