Shopify
Seră de la miezul nopții - Mărcile comerciale înfloresc pe un fundal turcoaz intens, iluminat de o singură scânteie de mentă
Sistemul de design Shopify este un atelier de lucru la miezul nopții pentru comerț: o pânză aproape neagră, nuanțată într-un verde turcoaz intens, un font sans-serif lat și încrezător și un singur accent vibrant de mentă care activează momente interactive. Interfața seamănă cu o cameră obscură, unde produsele și brandurile sunt sursa de lumină - fotografiile și vitrinele magazinelor strălucesc pe suprafețe aproape negre, în timp ce elementele cromate se retrag. Componentele sunt geometrice, dar delicate: carduri cu o rază de 12px cu margini subțiri, butoane în formă de pilulă și un font de 330 care șoptește scalare în loc de strigăte. Un singur semn de punctuație cromatic (#36f4a4) este folosit cu moderație pe linkuri, etichete și stări de focalizare, rezervând culoarea pentru momentele funcționale, pentru a se asigura că poveștile comercianților rămân punctul focal vizual.
Lățimea maximă este de ~1280px, centrată, cu blocuri de prezentare pe toată lățimea care se extind dincolo de containerul fotografiei. Ritmul paginii alternează: (1) o pagină de prezentare întunecată pe toată lățimea, cu un titlu suprapus și butoane de îndemn la acțiune, (2) secțiuni întunecate confortabile cu text de lățime maximă și blocuri de imagine pe 2 coloane sau grile de imagine pe 3 coloane, (3) panouri interactive de prezentare (schedă de produs, calculator de livrare, hartă a lumii) afișate ca niște carduri în relief pe o pânză mai adâncă. Navigarea este o bară superioară fixă cu sigla + 3 elemente de navigare + linkuri secundare + butonul principal de îndemn la acțiune, toate aliniate la dreapta. Ritmul vertical folosește intervale de 80px între secțiuni, cu o tranziție lină - fără separatoare între secțiunile întunecate, doar o schimbare a tonului suprafeței.
Designul vizual este axat în principal pe comerciant: fotografiile de produse la dimensiune completă și fotografiile de la evenimentele mărcii poartă cea mai mare parte a greutății vizuale, adesea sub forma unor fundaluri mari cu text alb suprapus. Imaginile sunt decupate strâns, cu contrast ridicat și au un caracter festiv (sunetul clopotului Nasdaq, saluturi de grup, prim-planuri ale produselor în mână). Fundalul întunecat creează impresia că aceste fotografii sunt iluminate de spoturi. Ilustrațiile sunt minimaliste - principala activitate explicativă este realizată prin imagini de produse încorporate și capturi de ecran ale vitrinelor. Pictogramele sunt monocrome, cu o lățime a liniei de 1,5–2px, de obicei albe sau #36f4a4 pentru stările active.
Paletă
Marca
- Shopify Mint
#36f4a4— Indicatorii de navigare activi, inelele de focalizare, evidențierile etichetelor și evidențierile la trecerea cu mouse-ul pe linkuri sunt singura strălucire cromatică care creează o senzație de interactivitate activată pe un fundal întunecat.
Neutru
- Midnight Forest
#02090a— Pânză de pagină, imagini de fundal pentru antet, imagini de fundal pentru secțiuni - Deep Lichen
#061a1c— Suprafețe principale ale cărții, panouri în relief, blocuri de conținut. - Shaded Fern
#072720— Panou de navigare, carduri suplimentare, ridicare abia sesizabilă a panoului. - Spruce Border
#1e2c31— Borduri subțiri pentru cărți de joc, linii de divizare, contururi ale câmpurilor de introducere a datelor. - Abyss Indigo
#000a1e— Suprafață suplimentară pentru încorporarea produselor/demonstrațiilor, panouri cu descrieri ale funcțiilor. - Pure White
#ffffff— Text principal, umplere butoane, titlu, logo-uri.
Tipografie
de la 12 la 70px · 8 pași
- Neue Haas Grotesk — înlocuire: Inter · contururi 330, 400, 500, 550, 600 · Sistemul tipografic de bază este format din titluri cu o grosime a fontului de 70–96px (330–400), care sunt subtile mai degrabă decât puternice; text cu o grosime a fontului de 16–18px (400–500); și navigare și interfață utilizator cu o grosime a fontului de 14–16px (500–550). Grosimea ultra-ușoară a fontului de 330 la dimensiuni mari ale ecranelor este o caracteristică distinctivă: transmite încredere prin sobrietate, mai degrabă decât prin volum.
- Inter Variable — înlocuire: Inter · contururi 400, 420, 450, 550 · Un tip de font secundar utilizat în elementele interfeței de navigare, notele mici, controalele de tip tab și microtextul din subsoluri. Literele sale mici puțin mai mari și spațierea mai standard a literelor îl fac mai ușor de citit la dimensiuni compacte. De asemenea, este potrivit pentru situațiile în care un font de grosime 420 umple golul dintre un font obișnuit și unul de dimensiuni medii.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | medie |
| Pasul de bază | 12px |
| Raza butonului | 9999px |
| Raza cardului | 12px |
| Umbre | fără - margini în loc de umbre |
| Între secțiuni | 80px |
| Lățimea paginii | 1280px |
Inteligența artificială vă va construi site-ul web în stilul Shopify și îl va completa
- Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
- Transferați conținut de pe vechiul site - specificați doar adresa.
- Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
- Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.
Stiluri similare
- Retool — Un atelier cald de obsidian - o suprafață pentru unelte de precizie, luminată de jar mocnit, unde totul este creat
- Elektron — Panoul de control al echipamentului la miezul nopții este o pânză aproape neagră, unde fotografiile produselor strălucesc în timp ce interfața rămâne practic invizibilă.
- REKKI — Panou de control al zborului în laboratorul foto
- OFFFICE : — o galerie noir învăluită în fonturi monolitice
- Clyde — Showroom-ul, cu un singur spot, este o galerie aproape întunecată, unde singura culoare din încăpere este o sferă caldă în gradient.
- Channel Studio — Un laborator foto de studio cu un abajur coral
- Electronic Materials Office — Un jar aprins într-o galerie decorată cu cărbune
- ORYZO AI — Un eseu foto despre o cameră obscură. Un obiect solitar plutind în întunericul cald, singurul decor fiind fontul crem.
- Factory — Terminalul „camera de război” la miezul nopții. „Fabrica” este un panou de control negru, unde o singură cartelă albă aterizează ca o dispeceră luminată de o lanternă - singurul obiect din cameră este lucrarea în sine.
- Hungry Tiger — Graffiti cu culori strălucitoare de turmeric pe peretele tandoorului. O paletă unitară de auriu și maro ruginiu, cu font atât de mare încât arată mai mult ca o firmă de la o piață de condimente decât ca un site web.
- Bibliothèque — O galerie neagră în formă de cub sub un reflector – o placă solitară iluminată într-un hol vast și întunecat
- Apple (España) — teatru negru cu corpuri iluminate