FRANKY'S
Un chiosco di videogiochi retrò sul bancone di un negozio di skateboard.
Il linguaggio visivo di Franky è una combinazione di sala giochi retrò e negozio di skateboard: una calda tela color crema (#f3e5df) incorniciata da rigidi bordi pixelati, un'onnipresente scacchiera in bianco e nero e un singolo font pixelato, Arcade, utilizzato per ogni parola del sito web. La palette è volutamente scarna: rimangono solo due colori cromatici (arancione segnale #faa21f per l'insegna e verde intenso #128e44 per il pulsante "acquista"), con l'intera gerarchia espressa aumentando il peso del font Arcade da 400 a 700 e utilizzando il nero su sfondo crema. Le superfici rimangono piatte e monolitiche; la profondità è ottenuta solo attraverso la linea color crema di 1px inserita sui pulsanti e il gioco tonale della scacchiera. I componenti ricordano gli sprite delle vetrine degli anni '90: spessi bordi neri, raggi di curvatura stretti di 6-12px, spaziatura compatta di 4-8px e interruttori 3D/AR che sembrano icone pixelate piuttosto che elementi cromati. Le nuove pagine sono pensate per mantenere l'atmosfera da sala giochi: niente sfumature se non un testo scorrevole arancione, niente ombre morbide, niente tipografia decorativa, solo carta color crema, linee nere pixelate e un unico colore arancione caldo.
Su desktop, la pagina del prodotto mostra un layout centrato a tutta larghezza con una larghezza massima di 1200px. Il ritmo dall'alto verso il basso è: testo scorrevole arancione → intestazione color crema con una linea nera → suddivisione in due colonne (55% a scacchiera nella homepage / 45% griglia a due colonne di schede prodotto) → striscia color crema nel piè di pagina. Su dispositivi mobili, la homepage si riduce a una scacchiera a tutta larghezza e la griglia diventa un layout a colonna singola. Le schede sono distribuite uniformemente in una griglia a due colonne con divisori Pixel grigi (#e5e7eb) tra di esse. La spaziatura tra le sezioni è minima (43–61px) e l'interfaccia non utilizza mai strisce scure che si estendono per tutta la larghezza della pagina: la tela color crema viene visualizzata senza interruzioni.
Una fotografia di cappellini su uno sfondo color crema pulito, centrata e ritagliata strettamente, con una morbida ombra color antracite sottostante. Nessun elemento di lifestyle, nessun modello, nessun contesto: il cappellino è il protagonista. Un motivo a scacchiera dietro l'elemento principale funge da superficie grafica. Nessuna illustrazione, nessun rendering 3D ad eccezione dell'interruttore per la realtà aumentata, nessuna icona decorativa ad eccezione della croce pixelata nel logo.
Tavolozza
Marca
- Marquee Orange
#faa21f— Barra di notifica nella parte superiore dello schermo, elementi decorativi, branding. - Buy Green
#128e44— Il pulsante "AGGIUNGI AL CARRELLO" è compilato: è l'unica azione di acquisto evidenziata in verde.
Neutro
- Arcade Cream
#f3e5df— Sfondo della pagina, superfici delle schede prodotto, inserti dei pulsanti. - Ink Black
#000000— Testo principale, layout a scacchiera, tutti i bordi dell'interfaccia utente, contorni delle schede, bordi delle icone. - Pixel Gray
#e5e7eb— Bordi sottili, divisori per schede, linee strutturali tra le celle della griglia. - Charcoal
#333333— Tonalità di superficie secondaria, quadrati d'ombra a scacchiera, colore dell'ombra - Carbon
#151515— Ricche tonalità neutre per riempire le illustrazioni e le tessere della scacchiera più fitte. - Muted Gray
#737373— Testo disabilitato/silenzioso sui pulsanti e nel corpo del testo
Tipografia
da 10 a 18px · 4 passaggi
- Arcade — sostituzione: VT323 · contorni 400, 700 · Nell'intera interfaccia viene utilizzato un unico carattere: titoli, etichette, prezzi, pulsanti, testo del corpo e icone sono tutti in Arcade. La transizione da 400 a 700 punti è l'unico strumento per creare gerarchia; l'utilizzo di un secondo carattere rovinerebbe l'illusione del chiosco interattivo.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | denso |
| Passo base | 4-8px |
| Raggio del pulsante | 6px |
| Raggio della carta | 12px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 43-61px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile FRANKY'S e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- 099 SUPPLY — Una parete della galleria piena di oggetti in bianco e nero
- teenage engineering — Catalogo industriale di illuminazione da studio: il prodotto è l'unico oggetto significativo della pagina, e tutto il resto ruota attorno ad esso.
- Custo — Una galleria color canna di fucile con un carattere tipografico monolitico. Uno showroom in tenui tonalità grigio-verdi, dove un singolo oggetto scuro e un carattere di 57 pixel parlano da soli.
- Walden — Il silenzio del suolo della foresta: ogni prodotto è una pietra, ogni pixel è muschio e silenzio
- Fiverr — Il punto focale del bazar digitale è un vibrante impulso verde che si staglia sullo sfondo scuro dei palcoscenici teatrali. Un singolo punto verde neon funge da punto di ancoraggio per il logo; il resto è monocromatico, pensato per evidenziare l'attrattiva dei servizi offerti.
- Peloton — Un faro rosso su una pista di atterraggio nera come la pece. Uno showroom di articoli per il fitness dove un'unica insegna rossa brillante della CTA (Chicago Transit Authority) attraversa il vasto e buio spazio espositivo e conduce a stanze dedicate ai prodotti, pulite e bianche.
- HOUSEPLANT — una libreria con noci su carta di lino
- Adam Lippes — Uno studio editoriale monocromatico su carta color crema: un servizio fotografico di Vogue in cui l'unico elemento decorativo è la griglia di impaginazione, non la palette di colori.
- Elektron — A mezzanotte, il pannello di controllo dell'apparecchiatura si presenta come una tela quasi nera, dove le foto dei prodotti risaltano mentre l'interfaccia rimane praticamente invisibile.
- Sigmaphoto — La Galleria Monocromatica di Precision Instruments è una stanza silenziosa e bianca dove l'unico colore che conta è quello che ti spinge all'azione.
- Channel Studio — Un laboratorio fotografico in studio con un paralume color corallo
- Specht Studio — Una parete espositiva pervasa da una discreta curiosità. La finitura cromata, firmata dallo studio, presenta una superficie bianca e scritte nere; il gioco di luci e ombre è interamente concentrato nelle piastrelle del progetto.