FRANKY'S
'n Retro-speelkiosk op die toonbank van 'n skaatswinkel
Franky se visuele taal is 'n kombinasie van retro-arkade en skaatsplankwinkel: 'n warm roomkleurige doek (#f3e5df) omraam deur rigiede pixelgrense, 'n alomteenwoordige swart-en-wit skaakbord, en 'n enkele pixel-lettertipe, Arcade, wat vir elke woord op die webwerf gebruik word. Die palet is doelbewus yl - slegs twee chromatiese kleure bly oor (seinoranje #faa21f vir die teken en ryk groen #128e44 vir die koopknoppie), met die hele hiërargie uitgedruk deur die Arcade-lettertipegewig van 400 tot 700 te verhoog en deur swart teen die roomkleurige agtergrond te gebruik. Oppervlaktes bly plat en monolities; diepte word slegs bereik deur die ingevoegde 1px-roomkleurige lyn op die knoppies en die tonale spel van die skaakbord. Die komponente herinner aan 1990's-winkelvenstersprites: dik swart grense, stywe 6-12px-randradius, kompakte 4-8px-opvulling, en 3D/AR-skakelaars wat lyk soos gepikseleerde ikone eerder as chroomelemente. Die nuwe bladsye is bedoel om die arkade-agtige atmosfeer te handhaaf: geen gradiënte behalwe 'n oranje blaaiteks, geen sagte skaduwees, geen dekoratiewe tipografie nie—slegs roomkleurige papier, swart gepikseleerde lyne en 'n enkele warm oranje kleur.
Op die rekenaar vertoon die produkbladsy 'n volwydte, gesentreerde uitleg met 'n maksimum breedte van 1200px. Die bo-na-onder ritme is: oranje blaaiteks → roomkleurige koptekst met 'n swart lyn → tweekolomverdeling (55% skaakbord op die tuisblad / 45% tweekolomrooster van produkkaarte) → roomkleurige streep in die voetskrif. Op selfone vou die tuisblad in 'n volwydte skaakbord in, en die rooster word 'n enkelkolomuitleg. Kaarte word eweredig versprei in 'n tweekolomrooster met grys Pixel (#e5e7eb) verdelers tussen hulle. Die spasiëring tussen afdelings is minimaal (43–61px), en die koppelvlak gebruik nooit donker strepe wat die hele breedte van die bladsy oorspan nie – die roomkleurige doek word sonder onderbreking vertoon.
'n Foto van pette teen 'n skoon roomkleurige agtergrond, gesentreer en dig gesny, met 'n sagte, houtskoolswart skaduwee daaronder. Geen leefstyl, geen modelle, geen konteks nie—die pet is die ster. 'n Skaakbordpatroon agter die hoofelement dien as die grafiese oppervlak. Geen illustrasies, geen 3D-weergawes behalwe vir die toegevoegde realiteit-skakelaar, geen dekoratiewe ikone behalwe vir die gepikseleerde kruis in die logo nie.
Palet
Handelsmerk
- Marquee Orange
#faa21f— Kennisgewingbalk bo-aan die skerm, aksentelemente, handelsmerk. - Buy Green
#128e44— Die "VOEG BY MANDJIE"-knoppie is ingevul - die enigste aankoopaksie is groen gemerk.
Neutraal
- Arcade Cream
#f3e5df— Bladsyagtergrond, produkkaartoppervlaktes, knoppie-insetsels. - Ink Black
#000000— Hoofteks, skaakborduitleg, alle UI-grense, kaartomlyne, ikoongrense. - Pixel Gray
#e5e7eb— Dun grense, kaartverdelers, strukturele reëls tussen roosterselle. - Charcoal
#333333— Sekondêre oppervlaktoon, skaakbordskaduvierkante, skadukleur - Carbon
#151515— Ryk neutrale kleure vir die vul van illustrasies en die digste skaakbordteëls. - Muted Gray
#737373— Gedeaktiveerde/gedempte teks op knoppies en in liggaamsteks
Tipografie
van 10 tot 18px · 4 stappe
- Arcade — vervanging: VT323 · buitelyne 400, 700 · 'n Enkele lettertipe word dwarsdeur die koppelvlak gebruik—alle opskrifte, etikette, pryse, knoppies, liggaamsteks en ikone is in Arcade. Die oorgang van 400 na 700 is die enigste instrument om hiërargie te skep; die gebruik van 'n tweede lettertipe sou die kiosk-illusie ruïneer.
Intervalle en vorm
| Doel | Betekenis |
|---|---|
| Digtheid | dig |
| Basiese stap | 4-8px |
| Knoppieradius | 6px |
| Kaartradius | 12px |
| Skaduwees | geen grense in plaas van skaduwees |
| Tussen afdelings | 43-61px |
| Bladsybreedte | 1200px |
KI sal jou webwerf in FRANKY'S -styl bou en dit vul
- Vul met produkte en plasings via die skakel - Instagram, TikTok, Facebook.
- Dra inhoud van jou ou webwerf oor – spesifiseer net die adres.
- Moderne ontwerp op die beste enjin: React ( Next.js) met bedienerweergawe en SEO-optimalisering reg uit die boks.
- Volledig outomatiese SEO-optimering vir soekresultate en neurale netwerkaanbevelings.
Soortgelyke style
- 099 SUPPLY — 'n Galerymuur gevul met swart en wit voorwerpe
- teenage engineering — Industriële katalogus in ateljeebeligting - die produk is die enigste belangrike voorwerp op die bladsy, en alles anders word daaromheen bespreek.
- Custo — ’n Metaalkleurige galery met ’n monolitiese lettertipe. ’n Uitstalruimte in gedempte grysgroen kleure, waar ’n enkele donker voorwerp en ’n 57px-lettertipe vir hulself spreek.
- Walden — Die stilte van die woudvloer - elke produk is 'n klip, elke pixel is mos en stilte
- Fiverr — Die digitale basaar se fokuspunt is 'n heldergroen pols teen donker teaterverhoë. 'n Enkele neongroen kolletjie dien as 'n anker vir die logo; die res is monochroom, ontwerp om die aantrekkingskrag van die dienste wat aangebied word, te beklemtoon.
- Peloton — ’n Rooi baken op ’n pikswart aanloopbaan. ’n Fiksheidsuitstalruimte waar ’n enkele helderrooi CTA-teken deur die ontsaglike, donker uitstallingsruimte sny en na skoon, wit produkkamers lei.
- HOUSEPLANT — 'n boekwinkel met neute op linnepapier
- Adam Lippes — ’n Monochroom redaksionele ateljee op roomkleurige papier – ’n Vogue-uitleg waar die enigste versiering die uitlegrooster is, nie die kleurpalet nie.
- Elektron — Die toerusting se beheerpaneel om middernag is 'n byna swart doek, waar produkfoto's skitter terwyl die koppelvlak feitlik onsigbaar bly.
- Sigmaphoto — Die Monochroom Galery van Presisie-instrumente is 'n stil wit kamer waar die enigste kleur wat saak maak, die een is wat jou tot aksie roep.
- Channel Studio — 'n Ateljeefotolaboratorium met een koraal lampskerm
- Specht Studio — 'n Galerymuur gevul met diskrete nuuskierigheid. Die ateljee se eie chroomafwerking is 'n wit oppervlak en swart letters; die visuele vuurwerke is geheel en al gekonsentreer binne die projek se teëlwerk.