Shopify
Keskiyön kasvihuone - Tavaramerkit kukkivat syvän turkoosia taustaa vasten, valaistuna yhdellä mintun kipinällä
Shopifyn suunnittelujärjestelmä on kuin yöttömän yön työpaja kaupankäynnille: lähes musta, syvän turkoosinvihreällä sävytetty kangas, leveä ja itsevarma sans-serif-kirjasintyyppi ja yksi eloisa mintunvihreä aksentti, joka aktivoi interaktiivisia hetkiä. Käyttöliittymä muistuttaa pimiötä, jossa tuotteet ja brändit ovat valonlähteitä – valokuvat ja myymälät hehkuvat lähes mustia pintoja vasten, kun taas kromielementit ovat piilossa. Komponentit ovat geometrisia mutta pehmeitä: 12 pikselin säteellä varustetut kortit, joissa on ohuet reunat, pillerinmuotoiset painikkeet ja 330-painoinen kirjasintyyppi, joka kuiskaa mittakaavan eikä huuda. Yhtä kromaattista välimerkkiä (#36f4a4) käytetään säästeliäästi linkeissä, tageissa ja kohdistustiloissa, jolloin väri varataan toiminnallisille hetkille sen varmistamiseksi, että kauppiastarinat pysyvät visuaalisena keskipisteenä.
Suurin leveys on noin 1280 pikseliä keskitettynä, ja täysleveät aloitussivun osat ulottuvat kuvasäiliön ulkopuolelle. Sivun rytmi vaihtelee: (1) täysleveä tumma aloitussivu, jossa on päällekkäin otsikko ja toimintakehotuspainikkeet, (2) mukavan tummat osiot, joissa on maksimileveydet teksti- ja kuvalohkot kahdessa sarakkeessa tai kuvaruudukot kolmessa sarakkeessa, (3) interaktiiviset esittelypaneelit (tuotekortti, toimituskululaskuri, maailmankartta), jotka näytetään kohokortteina syvemmällä pohjalla. Navigointi on kiinteä yläpalkki, jossa on logo + 3 navigointielementtiä + toissijaiset linkit + ensisijainen toimintakehotuspainike, kaikki tasattu oikealle. Pystysuuntainen rytmi käyttää 80 pikselin välejä osioiden välillä ja sujuvaa siirtymää – tummien osioiden välillä ei ole jakajia, vain pintasävy muuttuu.
Visuaalinen suunnittelu keskittyy ensisijaisesti jälleenmyyjään: täysikokoiset tuotekuvat ja bränditapahtumien kuvat kantavat suurimman osan visuaalisesta painoarvosta, usein suurien taustojen muodossa, joiden päällä on valkoista tekstiä. Kuvat ovat tiiviisti rajattuja, kontrastiltaan voimakkaita ja luonteeltaan juhlavia (Nasdaq-pörssin kellon soiminen, ryhmätervehdykset, lähikuvia käsin otetuista tuotteista). Tumma tausta luo vaikutelman, että nämä kuvat ovat kohdevalojen valaisemia. Kuvitukset ovat minimalistisia – pääasiallinen selittävä työ tehdään upotetuilla tuotekuvilla ja myymälöiden kuvakaappauksilla. Kuvakkeet ovat yksivärisiä, viivanleveys 1,5–2 pikseliä, tyypillisesti valkoisia tai #36f4a4 aktiivisissa tiloissa.
Paletti
Merkki
- Shopify Mint
#36f4a4— Aktiiviset navigointi-indikaattorit, tarkennusrenkaat, tunnisteiden korostukset ja linkkien kohokohdat ovat ainoa kromaattinen kimallus, joka luo tummaa taustaa vasten vaikutelman vuorovaikutteisuudesta.
Neutraali
- Midnight Forest
#02090a— Sivukangas, otsikon taustakuvat, osioiden taustakuvat - Deep Lichen
#061a1c— Kortin pääpinnat, kohopaneelit, sisältöblokit. - Shaded Fern
#072720— Navigointipaneeli, lisäkortit, paneelin tuskin havaittava nosto. - Spruce Border
#1e2c31— Ohuet reunat korteille, jakoviivat, syöttökenttien ääriviivat. - Abyss Indigo
#000a1e— Lisäpinta tuotteiden/esittelyjen upottamiseen, paneelit toimintojen kuvauksilla. - Pure White
#ffffff— Pääteksti, painikkeiden täyttö, otsikko, logot.
Typografia
12:sta 70 pikseliin · 8 askelta
- Neue Haas Grotesk — korvaava: Inter · ääriviivat 330, 400, 500, 550, 600 · Ydintypografinen järjestelmä koostuu otsikoista, joiden fonttikoko on 70–96 pikseliä (330–400), jotka ovat hienovaraisia eivätkä kovin äänekkäitä; leipätekstistä, jonka fonttikoko on 16–18 pikseliä (400–500); ja navigoinnista ja käyttöliittymästä, jonka fonttikoko on 14–16 pikseliä (500–550). Erittäin kevyt, 330 pikselin fonttikoko suurilla näyttökooilla on erottuva ominaisuus: se välittää itsevarmuutta hillityn, ei niinkään massiivisen kokonaisuuden kautta.
- Inter Variable — korvaava: Inter · ääriviivat 400, 420, 450, 550 · Toissijainen fonttityyppi, jota käytetään navigointirajapinnan elementeissä, pienissä muistiinpanoissa, sarkainsäätimissä ja alatunnisteiden mikrotekstissä. Sen hieman suuremmat pienet kirjaimet ja vakiomuotoisempi kirjainväli tekevät siitä helpommin luettavan pienikokoisissa teksteissä. Se sopii myös tilanteisiin, joissa 420-painoinen fontti täyttää aukon tavallisen ja keskikokoisen fontin välillä.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | keskimäärin |
| Perusvaihe | 12px |
| Painikkeen säde | 9999px |
| Kortin säde | 12px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 80px |
| Sivun leveys | 1280px |
Tekoäly rakentaa verkkosivustosi Shopify -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- Retool — Lämmin obsidiaanista tehty työpaja - tarkkuustyökalujen pinta, kytevien hiilien valaisemana, jossa kaikki luodaan
- Elektron — Laitteen ohjauspaneeli keskiyöllä on lähes musta kangas, jossa tuotekuvat loistavat käyttöliittymän pysyessä käytännössä näkymättömänä.
- REKKI — Lennon ohjauspaneeli valokuvalaboratoriossa
- OFFFICE : — monoliittiseen fonttiin upotettu noir-galleria
- Clyde — Yhden kohdevalonheittimensä ansiosta näyttelytila on lähes pimeä galleria, jossa ainoa väri on lämmin liukuvärjäykkä pallo.
- Channel Studio — Studiovalokuvauslaboratorio, jossa on yksi korallinvärinen lampunvarjostin
- Electronic Materials Office — Hehkuva hiili galleriassa, joka on koristeltu hiilellä
- ORYZO AI — Valokuvaessee pimiöstä. Yksinäinen esine leijuu lämpimässä pimeydessä, kermanvärinen fontti ainoana koristeena.
- Factory — "Sotahuoneen" terminaali keskiyöllä. "Tehdas" on karun musta ohjauspaneeli, johon yksi valkoinen kortti laskeutuu kuin taskulampun valaisema lähetys – huoneen ainoa esine on itse työ.
- Hungry Tiger — Kurkumanväristä graffitia tandoorin seinällä. Yhtenäinen kultaisen ja ruosteenruskean sävyjen paletti, jossa fontti on niin suuri, että se näyttää enemmän maustetorin kyltiltä kuin verkkosivustolta.
- Bibliothèque — Musta kuutionmuotoinen galleria kohdevalon alla – yksinäinen valaistu lautanen valtavassa, pimeässä salissa
- Apple (España) — musta teatteri valaistuilla kalusteilla