FRANKY'S
Retropelikioski skeittikaupan tiskillä
Frankyn visuaalinen kieli on yhdistelmä retropelihallia ja skeittilautakauppaa: lämpimän kermanvärinen kangas (#f3e5df), jota reunustavat jäykät pikselireunat, kaikkialla läsnä oleva mustavalkoinen shakkilauta ja yhden pikselin fontti, Arcade, jota käytetään jokaisessa verkkosivuston sanassa. Paletti on tarkoituksella niukka – jäljellä on vain kaksi kromaattista väriä (signaalioranssi #faa21f kyltille ja syvän vihreä #128e44 ostopainikkeelle), ja koko hierarkia ilmaistaan lisäämällä Arcade-fontin painoa 400:sta 700:aan ja käyttämällä mustaa kermanväristä taustaa vasten. Pinnat pysyvät tasaisina ja monoliittisina; syvyyttä saavutetaan vain painikkeisiin lisätyn 1 pikselin kermanvärisen viivan ja shakkilaudan sävyleikin avulla. Komponentit muistuttavat 1990-luvun myymälän spritejä: paksut mustat reunukset, tiukat 6–12 pikselin reunakäteet, kompakti 4–8 pikselin täyte ja 3D/AR-kytkimet, jotka näyttävät pikselöidyiltä kuvakkeilta kromielementtien sijaan. Uusien sivujen on tarkoitus säilyttää pelihallimainen tunnelma: ei muita liukuvärejä kuin oranssi vierivä teksti, ei pehmeitä varjoja, ei koristeellista typografiaa – vain kermanväristä paperia, mustia pikselöityjä viivoja ja yksi lämmin oranssi väri.
Työpöytäversiossa tuotesivu näkyy täysleveänä, keskitettynä asetteluna, jonka enimmäisleveys on 1200 pikseliä. Ylhäältä alas -rytmi on seuraava: oranssi vierivä teksti → kermanvärinen otsikko mustalla viivalla → kahden sarakkeen jako (55 % shakkiruutukuvio etusivulla / 45 % kahden sarakkeen ruudukko tuotekorteissa) → kermanvärinen raita alatunnisteessa. Mobiiliversiossa etusivu kutistuu täysleveäksi shakkiruuduksi ja ruudukosta tulee yksisarakkeinen asettelu. Kortit on jaettu tasaisesti kahden sarakkeen ruudukkoon, jonka välissä on harmaat pikselit (#e5e7eb). Osioiden välinen etäisyys on minimaalinen (43–61 pikseliä), eikä käyttöliittymässä koskaan käytetä tummia raitoja, jotka ulottuvat koko sivun leveydelle – kermanvärinen pohja näkyy keskeytyksettä.
Valokuva lippiksistä puhdasta kermanväristä taustaa vasten, keskitettynä ja tiiviisti rajattuna, ja sen alla pehmeä, hiilenmusta varjo. Ei elämäntapaa, ei malleja, ei kontekstia – lippis on tähti. Pääelementin takana oleva ruutukuvio toimii graafisena pintana. Ei kuvituksia, ei 3D-renderöintejä lukuun ottamatta lisätyn todellisuuden kytkintä, ei koristeellisia kuvakkeita lukuun ottamatta logon pikselöityä ristiä.
Paletti
Merkki
- Marquee Orange
#faa21f— Ilmoituspalkki näytön yläreunassa, korostuselementit, brändäys. - Buy Green
#128e44— "LISÄÄ OSTOSKORIIN" -painike on täytetty - ainoa ostotoiminto merkitty vihreällä.
Neutraali
- Arcade Cream
#f3e5df— Sivun tausta, tuotekorttien pinnat, nappien lisäykset. - Ink Black
#000000— Pääteksti, shakkiruutukuvio, kaikki käyttöliittymän reunat, kortin ääriviivat, kuvakkeiden reunat. - Pixel Gray
#e5e7eb— Ohuet reunat, korttien väliset rivit, rakennesäännöt ruudukon solujen välillä. - Charcoal
#333333— Toissijainen pintasävy, shakkiruudukkoiset varjoneliöt, varjon väri - Carbon
#151515— Rikkaat neutraalit sävyt täyttäviin kuvituksiin ja tiheimpiin ruutukuvioihin. - Muted Gray
#737373— Painikkeiden ja leipätekstin mykistetty/pois käytöstä poistettu teksti
Typografia
10:stä 18 pikseliin · 4 vaihetta
- Arcade — korvaava: VT323 · ääriviivat 400, 700 · Koko käyttöliittymässä käytetään yhtä fonttia – kaikki otsikot, selitteet, hinnat, painikkeet, leipäteksti ja kuvakkeet ovat Arcade-tyylisiä. Siirtymä 400:sta 700:aan on ainoa työkalu hierarkian luomiseen; toisen fontin käyttö pilaisi kioski-illuusion.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | tiheä |
| Perusvaihe | 4-8px |
| Painikkeen säde | 6px |
| Kortin säde | 12px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 43-61px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi FRANKY'S -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ä
- 099 SUPPLY — Mustavalkoisilla esineillä täytetty gallerian seinä
- teenage engineering — Teollisuuskuvasto studiovalaistuksessa - tuote on sivun ainoa merkittävä kohde, ja kaikkea muuta käsitellään sen ympärillä
- Custo — Metallinvärinen galleria, jossa on monoliittinen fontti. Vaimennettujen harmaanvihreän sävyjen näyttelytila, jossa yksi tumma esine ja 57px:n fontti puhuvat puolestaan.
- Walden — Metsänpohjan hiljaisuus - jokainen tuote on kivi, jokainen pikseli on sammalta ja hiljaisuutta
- Fiverr — Digitaalisen basaarin keskipisteenä on eloisa vihreä syke tummia teatterilavoja vasten. Yksi neonvihreä piste toimii logon ankkurina; muu osa on yksiväristä ja suunniteltu korostamaan tarjottujen palveluiden houkuttelevuutta.
- Peloton — Punainen majakka pikimustalla näytöllä. Kuntosalin esittelytila, jossa yksi kirkkaanpunainen CTA-kyltti halkoo valtavan, pimeän näyttelytilan ja johtaa puhtaisiin, valkoisiin tuotehuoneisiin.
- HOUSEPLANT — kirjakauppa, jossa on pähkinöitä pellavapaperilla
- Adam Lippes — Yksivärinen toimituksellinen studio kermanväriselle paperille – Vogue-aukeama, jossa ainoa koriste on taittoruudukko, ei väripaletti.
- 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ä.
- Sigmaphoto — Tarkkuusinstrumenttien yksivärinen galleria on hiljainen valkoinen huone, jossa ainoa tärkeä väri on se, joka kutsuu sinua toimintaan.
- Channel Studio — Studiovalokuvauslaboratorio, jossa on yksi korallinvärinen lampunvarjostin
- Specht Studio — Hienovaraista uteliaisuutta täynnä oleva gallerian seinä. Studion oma kromipinta on valkoinen pinta ja mustat kirjaimet; visuaalinen ilotulitus keskittyy kokonaan projektin laatoitukseen.