Shopify
Miðnæturgróðurhús - Vörumerki blómstra á djúpgrænum bakgrunni, upplýst af einum neista af myntu.
Hönnunarkerfi Shopify er eins og miðnætursmiðja fyrir viðskipti: næstum svartur strigi litaður djúpt tyrkisgrænum lit, breitt og öruggt sans-serif leturgerð og einn líflegur mintugrænn hlekkur sem virkjar gagnvirkar stundir. Viðmótið líkist myrkraherbergi þar sem vörur og vörumerki eru uppspretta ljóssins - ljósmyndir og verslunargluggar glóa á móti næstum svörtum fleti, en krómþættir hverfa. Íhlutirnir eru rúmfræðilegir en samt mjúkir: 12px-radíus kort með þunnum röndum, pillulaga hnappar og 330-þyngdar leturgerð sem hvíslar kvarða frekar en hrópar. Eitt krómatískt greinarmerki (#36f4a4) er notað sparlega á tenglum, merkjum og áherslustöðum, og litur er geymdur fyrir hagnýtar stundir til að tryggja að sögur kaupmanna séu sjónrænt miðpunktur.
Hámarksbreidd er ~1280px, miðjað, með fullbreiddar sprettablokkum sem teygja sig út fyrir myndaílátið. Síðutakturinn skiptist á: (1) dökk sprettasíða í fullri breidd með yfirlagðri fyrirsögn og hnöppum fyrir aðgerðahvatningu, (2) þægilegir dökkir hlutar með hámarksbreidd texta og myndablokka í 2 dálkum eða myndaneti í 3 dálkum, (3) gagnvirkir sýningarspjöld (vörukort, sendingarreiknivél, heimskort) birt sem upphleypt kort á dýpra striga. Leiðsögnin er föst efri stika með merkinu + 3 leiðsagnareiningum + auka tenglum + aðalhnappinum fyrir aðgerðahvatningu, allt stillt til hægri. Lóðrétta takturinn notar 80px bil á milli hluta með mjúkri umskipti - engar skiptingar milli dökkra hluta, aðeins breyting á yfirborðstóni.
Sjónræna hönnunin beinist fyrst og fremst að smásalanum: vörumyndir í fullri stærð og myndir frá vörumerkjaviðburðum bera meginþunga sjónræns þunga, oft í formi stórra bakgrunna með hvítum texta ofan á. Myndirnar eru þéttskornar, með mikilli birtuskilum og hátíðlegar í eðli sínu (hringing Nasdaq-bjöllunnar, hópkveðjur, nærmyndir af vörum í höndunum). Dökki bakgrunnurinn skapar þá tilfinningu að þessar myndir séu upplýstar af kastljósum. Myndskreytingarnar eru lágmarks - aðalskýringarvinnan er unnin með innfelldum vörumyndum og skjáskotum af verslunum. Táknmyndir eru einlita, með línubreidd 1,5–2px, venjulega hvítar eða #36f4a4 fyrir virka stöðu.
Litatöflu
Vörumerki
- Shopify Mint
#36f4a4— Virkir flakkvísar, fókushringir, merkjamerkingar og sveimamerkingar á tenglum eru einu litabreytingarnar sem skapa tilfinningu fyrir virkri gagnvirkni á dökkum bakgrunni.
Hlutlaus
- Midnight Forest
#02090a— Síðustrigi, bakgrunnsmyndir fyrir haus, bakgrunnsmyndir fyrir hluta - Deep Lichen
#061a1c— Aðalkortyfirborð, upphækkaðir spjöld, innihaldsblokkir. - Shaded Fern
#072720— Leiðsöguborð, viðbótarkort, varla áberandi hækkun á spjaldinu. - Spruce Border
#1e2c31— Þunnir rammar fyrir kort, skiptingarlínur, útlínur innsláttarreita. - Abyss Indigo
#000a1e— Viðbótarflötur til að fella inn vörur/sýndarsýningar, spjöld með lýsingum á virkni. - Pure White
#ffffff— Aðaltexti, hnappafylling, titill, lógó.
Leturfræði
frá 12 til 70px · 8 skref
- Neue Haas Grotesk — skipti: Inter · útlínur 330, 400, 500, 550, 600 · Kjarnaleturkerfið samanstendur af fyrirsögnum með leturþyngd 70–96px (330–400) sem eru frekar lúmskar en háværar; meginmál með leturþyngd 16–18px (400–500); og leiðsögn og notendaviðmót með leturþyngd 14–16px (500–550). Létt leturþyngd 330 á stórum skjástærðum er sérkennilegt: það miðlar sjálfstrausti með hófsemi frekar en fyrirferð.
- Inter Variable — skipti: Inter · útlínur 400, 420, 450, 550 · Auka leturgerð sem notuð er í viðmótseiningar, litlum athugasemdum, flipastýringum og örtexta í síðufótum. Stærri lágstafir og hefðbundnara bil á milli stafa gera það læsilegra í minni stærð. Það hentar einnig vel í aðstæðum þar sem leturgerð með þyngd 420 fyllir bilið á milli venjulegs og meðalstórs leturs.
Millibil og form
| Tilgangur | Merking |
|---|---|
| Þéttleiki | meðaltal |
| Grunnskref | 12px |
| Hnapparadíus | 9999px |
| Radíus korts | 12px |
| Skuggar | engin landamæri í stað skugga |
| Milli hluta | 80px |
| Síðubreidd | 1280px |
Gervigreind mun smíða vefsíðuna þína í stíl við Shopify og fylla hana út
- Fyllið út vörur og færslur í gegnum tengilinn - Instagram, TikTok, Facebook.
- Flyttu efni af gömlu síðunni þinni — tilgreindu bara vefslóðina.
- Nútímaleg hönnun á bestu vélinni: React ( Next.js) með netþjónsútgáfu og SEO-bestun beint úr kassanum.
- Fullkomlega sjálfvirk SEO hagræðing fyrir leitarniðurstöður og tillögur að tauganetum.
Líkir stílar
- Retool — Hlýlegt verkstæði úr obsidian - yfirborð fyrir nákvæmnisverkfæri, upplýst af glóandi glóðum, þar sem allt verður til
- Elektron — Stjórnborð búnaðarins um miðnætti er næstum svart strigi, þar sem myndir af vörum skína á meðan viðmótið er nánast ósýnilegt.
- REKKI — Flugstjórnborð í ljósmyndastofunni
- OFFFICE : — Noir gallerí hulið einlita leturgerð
- Clyde — Sýningarsalurinn, með einum kastljósi, er næstum dimmt gallerí þar sem eini liturinn í herberginu er hlýr, litbrigðalegur kúla.
- Channel Studio — Ljósmyndastofa með einum kóral lampaskermi
- Electronic Materials Office — Glóandi glóð í galleríi skreytt með viðarkolum
- ORYZO AI — Ljósmyndaritgerð um myrkraherbergi. Einstæður hlutur svífur í hlýju myrkrinu, rjómalitaður letur eina skreytingin.
- Factory — „Stríðsherbergið“ er stöð um miðnætti. „Verksmiðjan“ er svart stjórnborð þar sem eitt hvítt kort lendir eins og vasaljós — eina hluturinn í herberginu er verkið sjálft.
- Hungry Tiger — Björt túrmerik-krot á vegg tandoor-ofnsins. Sameinuð litasamsetning af gullnum og ryðbrúnum litum, með leturgerð svo stórri að hún líkist frekar skilti á kryddmarkaði en vefsíðu.
- Bibliothèque — Svart teningslaga gallerí undir kastljósi – einn upplýstur plata í stórum, dimmum sal
- Apple (España) — Svart leikhús með upplýstum innréttingum