Shopify
Vidurnakčio šiltnamis – prekių ženklai žydi tamsiai turkio spalvos fone, apšviestame vienos mėtos kibirkštėlės.
„Shopify“ dizaino sistema – tai tarsi vidurnakčio dirbtuvės prekybai: beveik juoda drobė, nuspalvinta tamsiai turkio žalia spalva, platus, užtikrintas šriftas be serifų ir vienas ryškus mėtinis akcentas, aktyvuojantis interaktyvius momentus. Sąsaja primena tamsų kambarį, kuriame šviesos šaltinis yra produktai ir prekių ženklai – nuotraukos ir vitrinos švyti ant beveik juodų paviršių, o chromo elementai yra menkesni. Komponentai yra geometriniai, tačiau švelnūs: 12 pikselių spindulio kortelės su plonais rėmeliais, piliulės formos mygtukai ir 330 storio šriftas, kuris šnabžda mastelį, o ne šaukia. Vienas chromatinis skyrybos ženklas (#36f4a4) naudojamas saikingai nuorodose, žymose ir fokusavimo būsenose, spalvas paliekant funkciniams momentams, siekiant užtikrinti, kad prekybininkų istorijos išliktų vizualiniu pagrindiniu elementu.
Didžiausias plotis yra ~1280 pikselių, centre, su viso pločio įžanginiais blokais, besidriekiančiais už nuotraukos konteinerio ribų. Puslapio ritmas kaitaliojasi: (1) viso pločio tamsus įžanginis puslapis su uždėta antrašte ir raginimo veikti mygtukais, (2) patogios tamsios sekcijos su maksimalaus pločio teksto ir vaizdų blokais 2 stulpeliuose arba vaizdų tinkleliais 3 stulpeliuose, (3) interaktyvūs demonstraciniai skydeliai (produkto kortelė, pristatymo skaičiuoklė, pasaulio žemėlapis), rodomi kaip iškilusios kortelės ant gilesnio drobės. Navigacija yra fiksuota viršutinė juosta su logotipu + 3 naršymo elementais + antrinėmis nuorodomis + pagrindiniu raginimo veikti mygtuku, visi sulygiuoti dešinėje. Vertikalus ritmas naudoja 80 pikselių tarpus tarp sekcijų su sklandžiu perėjimu – tarp tamsių sekcijų nėra skirtukų, tik pasikeičia paviršiaus tonas.
Vizualinis dizainas pirmiausia orientuotas į mažmenininką: didžiąją vizualinio svorio dalį sudaro viso dydžio produktų nuotraukos ir nuotraukos iš prekės ženklo renginių, dažnai didelių fonų su uždėtu baltu tekstu pavidalu. Vaizdai yra griežtai apkirpti, didelio kontrasto ir šventinio pobūdžio (Nasdaq varpo skambėjimas, grupiniai pasisveikinimai, rankose laikomų produktų stambūs planai). Tamsus fonas sukuria įspūdį, kad šias nuotraukas apšviečia prožektoriai. Iliustracijos minimalistinės – pagrindinį aiškinamąjį darbą atlieka įterptieji produktų vaizdai ir vitrinų ekrano kopijos. Piktogramos yra vienspalvės, linijos plotis yra 1,5–2 pikseliai, paprastai baltos arba #36f4a4 aktyvioms būsenoms.
Paletė
Prekės ženklas
- Shopify Mint
#36f4a4— Aktyvūs naršymo indikatoriai, fokusavimo žiedai, žymų paryškinimai ir nuorodų paryškinimai yra vienintelis chromatinis spindesys, sukuriantis įgalinto interaktyvumo pojūtį tamsiame fone.
Neutralus
- Midnight Forest
#02090a— Puslapio drobė, antraštės fono paveikslėliai, skyrių fono paveikslėliai - Deep Lichen
#061a1c— Pagrindiniai kortelių paviršiai, iškilūs skydeliai, turinio blokai. - Shaded Fern
#072720— Navigacijos skydelis, papildomos kortelės, vos pastebimas skydelio pakėlimas. - Spruce Border
#1e2c31— Plonos kortelių rėmeliai, skiriamosios linijos, įvesties laukų kontūrai. - Abyss Indigo
#000a1e— Papildomas paviršius produktams / demonstracijoms įterpti, skydeliai su funkcijų aprašymais. - Pure White
#ffffff— Pagrindinis tekstas, mygtukų užpildymas, pavadinimas, logotipai.
Tipografija
nuo 12 iki 70 pikselių · 8 žingsniai
- Neue Haas Grotesk — pakeitimas: Inter · kontūrai 330, 400, 500, 550, 600 · Pagrindinę tipografinę sistemą sudaro antraštės, kurių šrifto svoris yra 70–96 pikselių (330–400), kurios yra subtilios, o ne ryškios; pagrindinė teksto dalis – 16–18 pikselių (400–500) šrifto svoris; o navigacijos ir vartotojo sąsajos dalis – 14–16 pikselių (500–550) šrifto svoris. Itin lengvas, 330 pikselių šrifto svoris dideliuose ekranuose yra išskirtinis bruožas: jis perteikia pasitikėjimą santūrumu, o ne masyvumu.
- Inter Variable — pakeitimas: Inter · kontūrai 400, 420, 450, 550 · Antrinis šrifto tipas, naudojamas naršymo sąsajos elementuose, mažose pastabose, tabuliacijos valdikliuose ir mikrotekste poraštėse. Dėl šiek tiek didesnių mažųjų raidžių ir standartinių tarpų tarp raidžių jį lengviau skaityti kompaktiškuose dydžiuose. Jis taip pat tinka situacijoms, kai 420 svorio šriftas užpildo tarpą tarp įprasto ir vidutinio dydžio šrifto.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | vidutinis |
| Pagrindinis žingsnis | 12px |
| Mygtuko spindulys | 9999px |
| Kortelės spindulys | 12px |
| Šešėliai | ne – rėmeliai vietoj šešėlių |
| Tarp sekcijų | 80px |
| Puslapio plotis | 1280px |
Dirbtinis intelektas sukurs jūsų svetainę Shopify stiliumi ir ją užpildys
- Užpildykite produktais ir įrašais per nuorodą – Instagram, TikTok, Facebook.
- Perkelkite turinį iš senos svetainės – tiesiog nurodykite adresą.
- Modernus dizainas geriausiame variklyje: React ( Next.js) su serverio atvaizdavimu ir SEO optimizavimu iš karto.
- Visiškai automatizuotas SEO optimizavimas paieškos rezultatams ir neuroninių tinklų rekomendacijoms.
Panašūs stiliai
- Retool — Šiltas obsidianų dirbtuvės – precizinių įrankių paviršius, apšviestas rusenančių žarijų, kur viskas kuriama
- Elektron — Įrangos valdymo skydelis vidurnaktį yra beveik juoda drobė, kurioje spindi gaminių nuotraukos, o sąsaja išlieka praktiškai nematoma.
- REKKI — Skrydžio valdymo pultas fotolaboratorijoje
- OFFFICE : — monolitiniame šrifte apgaubta noir galerija
- Clyde — Parodų salė su vieninteliu prožektoriumi yra beveik tamsi galerija, kurioje vienintelė kambario spalva yra šiltas gradientinis rutulys.
- Channel Studio — Studijinė fotolaboratorija su vienu koraliniu šviestuvo gaubtu
- Electronic Materials Office — Žėrintis žarijas galerijoje, papuoštoje anglimi
- ORYZO AI — Fotoreportažas apie tamsų kambarį. Vienišas objektas, kybantis šiltoje tamsoje, kurio vienintelė puošmena – kreminis šriftas.
- Factory — „Karo kambario“ terminalas vidurnaktį. „Gamykla“ – tai atšiauriai juodas valdymo skydelis, ant kurio nukrenta viena balta kortelė tarsi žibintuvėlio apšviesta žinutė – vienintelis objektas kambaryje yra pats darbas.
- Hungry Tiger — Ryškus ciberžolės grafitis ant tandūro sienos. Vieninga aukso ir surūdijusios rudos spalvos paletė, šriftas toks didelis, kad labiau primena prieskonių turgaus iškabą nei svetainę.
- Bibliothèque — Juoda kubo formos galerija prožektoriuje – vieniša apšviesta lėkštė didžiulėje, tamsioje salėje
- Apple (España) — juodas teatras su apšviestomis detalėmis