Subframe
Un disegno grafico su pergamena calda. Carta di design, dove ogni tratto è di grafite o di gomma, mai di pittura: la profondità è ottenuta attraverso lo spessore delle linee e i caratteri radicati.
Subframe è uno spazio di lavoro monocromatico per designer: una tela calda e cremosa, inchiostro nero grafite e una completa assenza di accenti cromatici. L'intera interfaccia è percepita come un unico materiale – carta, matita e ombra – con un audace tocco tipografico: un raffinato serif (Instrument Serif) contrapposto a un sans-serif sistematico (Inter), che conferisce autorevolezza editoriale ai titoli. Le superfici sono piatte e incorniciate anziché in rilievo; la profondità è ottenuta tramite sottili divisori in #e5e7eb e inserti luminosi sui controlli scuri anziché ombreggiature. La densità è generosa: un ampio ritmo verticale (48-64px di spaziatura tra le sezioni), layout centrati a tutta larghezza e un generoso spazio bianco intorno al testo. L'unico colore è il contrasto tra il quasi bianco e il quasi nero, che rende il pulsante scuro l'elemento più evidente di ogni pagina, e la striscia di loghi dei marchi partner in tonalità di grigio l'unico elemento visivo decorativo.
Layout centrati a tutta larghezza (1200px) con un generoso ritmo verticale. L'elemento principale è un singolo blocco centrato: un controllo segmentato scuro nella parte superiore, un grande titolo "Inter", un sottotitolo su una sola riga e due pulsanti adiacenti (pieni + traslucidi) – nessuna immagine laterale, nessuna interruzione di layout. Sotto l'elemento principale si trova una striscia con il logo in scala di grigi, centrata. Ogni sezione successiva segue lo stesso schema: un blocco di titolo e sottotitolo allineato a sinistra, quindi una cornice a tutta larghezza per la presentazione del prodotto con uno spazio di 48-64px tra le sezioni. La navigazione è minimale: una barra superiore con link centrati e azioni allineate a destra, nessuna barra laterale, nessun mega-menu. La pagina si legge dall'alto verso il basso come una serie di affermazioni centrate, ognuna con ampio spazio a disposizione: il layout ricorda più un portfolio editoriale che una pagina prodotto ricca di elementi.
Il design visivo è minimalista e funzionale. Il sistema utilizza due modalità visive: (1) screenshot del prodotto e mockup dell'interfaccia utente racchiusi in cornici con raggio di 24 pixel: mostrano i componenti effettivi dell'interfaccia (tabelle, pulsanti, moduli) renderizzati nella stessa palette monocromatica, in modo che gli screenshot appaiano perfettamente integrati nella pagina; (2) una singola striscia di loghi dei partner in scala di grigi funge da prova sociale, renderizzata in modo piatto, senza colore o contenitori. Non ci sono foto di lifestyle, sfumature astratte o rendering 3D. L'unico elemento illustrativo è una "riquadro" scura del prodotto, centrata su uno sfondo grigio caldo con l'icona del marchio: è percepita come una dimostrazione del prodotto, non come una decorazione. Tutte le immagini occupano un layout basato sul testo, dove il peso visivo è sostenuto dal testo stesso.
Tavolozza
Neutro
- Page Canvas
#fafafa— Lo sfondo della pagina, la cartolina su tela, il testo chiaro su superfici scure: un bianco caldo che fa da sfondo all'intero sistema monocromatico. - Hairline Border
#e5e7eb— Divisori, bordi delle schede, cornici per immagini, contorni delle icone: il tipo di contorno più utilizzato nel sistema, definisce la struttura spaziale. - Card Surface
#ededed— Lo sfondo in rilievo per le carte, una superficie aggiuntiva, è posizionato un gradino sopra la tela, creando un raggruppamento senza ombre. - Divider Mid
#dadada— Divisori e transizioni di tono medio tra le sezioni - Graphite
#242424— Riempimento neutro ad alto contrasto per i pulsanti principali su superfici chiare. - Ink Black
#171717— Testo del corpo, titoli, contorni delle icone: un po' più freddo del Graphite, usato per la tipografia piuttosto che per le superfici.
Tipografia
da 12 a 128 pixel · 7 passaggi
- Inter — sostituzione: Inter (Google Fonts) · contorni 500, 600, 700 · Un'interfaccia di sistema sans-serif: navigazione, testo del corpo, pulsanti, sottotitoli e intestazioni di sezione. Peso: 500 per il testo del corpo e i controlli, 600 per sottotitoli e elementi di navigazione e 700 per le intestazioni di sezione. La forte spaziatura negativa tra le lettere comprime le forme geometriche a qualsiasi dimensione, conferendo all'interfaccia un aspetto condensato e tecnico.
- Instrument Serif — sostituzione: Playfair Display · contorni 400 · Un carattere serif progettato esclusivamente per titoli e contenuti editoriali. Il suo peso 400 e la spaziatura tra le lettere di -0,025em creano un aspetto elegante e corsivo che contrasta con la geometria industriale di Inter, una tecnica distintiva: una singola parola o frase serif all'interno di una pagina sans-serif, che funge da punteggiatura visiva piuttosto che da stile di titolo.
- Fragment Mono — sostituzione: JetBrains Mono · contorni 400 · Accent mono per elementi inline simili al codice, etichette di tag e note tecniche. Utilizzato con parsimonia, compare negli elenchi di funzioni e nelle annotazioni inline quando lo strumento di progettazione vuole indicare "questo è output macchina".
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | media |
| Passo base | 8px |
| Raggio del pulsante | 16px |
| Raggio della carta | 24px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 64px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Subframe 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
- monopo saigon — Un bagliore liquido e iridescente dietro il silenzio editoriale: una galleria editoriale monocromatica che fluttua su una luce fusa.
- Hyer Aviation — Il crepuscolo nella cabina di pilotaggio su pergamena. Il pallido cielo dell'alba incontra il logo serif grande quanto la fusoliera, e un singolo accento color argilla calda rompe la sobrietà monocromatica.
- OFF+BRAND. — Sfera iridescente su pergamena calda
- Seed — un organismo vivente sotto un vetrino da laboratorio
- Eindhoven Design District — Il brutalismo editoriale su carta bianca è un manifesto di design urbano, realizzato con caratteri di grandi dimensioni, fotografie ridotte al minimo e assoluta sobrietà.
- Miranda — Caratteri classici di grande formato su uno sfondo color crema chiaro: un editoriale giornalistico per l'era digitale.
- Monocle — Un quotidiano di alta qualità, in grande formato, stampato su carta color crema. Un editoriale curato nei minimi dettagli, dove ogni colonna merita il suo spazio e un solo colore significativo compare sulla pagina.
- Agencja brandingowa — Una galleria editoriale sui toni del bianco con tipografia realizzata in inchiostro nero.
- Websmith Studio — Luce mattutina su carta color crema
- Aspelin Reitan — Archivio di architettura a lume di candela - La pagina si presenta come un portfolio di spazi costruiti, appuntati su una calda parete color crema, con una singola riga di testo bianco che fluttua sopra ogni immagine per tutta la larghezza della pagina.
- Public — Un editoriale monocromatico su marmo freddo, quasi una tela monocromatica, con un carattere serif da 300 punti e un singolo accento viola che fa tutto il lavoro di colore.
- Motto — Un monolite tipografico su carta: una voce unica e sicura che si afferma su carta bianca come la neve.