Superhuman
panel editoriale dell'ora d'oro
Superhuman si colloca a cavallo tra la fotografia editoriale e l'interfaccia utente di un software: una tela calda, simile alla pergamena (mai di un bianco puro), incornicia elementi del marchio color bordeaux e vivaci accenti viola. I titoli, composti con un font di 460 punti, sussurrano anziché urlare, lasciando che la fotografia cinematografica a pagina intera sia la protagonista, mentre le schede trasparenti dell'interfaccia utente del prodotto fluttuano come vetro sopra le immagini. La palette rimane calma e di stampo editoriale per la maggior parte del tempo: superfici color crema, testo color antracite, sottili bordi grigio caldo e un'ampia spaziatura tra gli elementi, con il colore riservato a precisi dettagli del marchio: una singola call-to-action bordeaux, link viola, un pulsante aggiuntivo color lilla chiaro. Il sistema evita deliberatamente ombre e sfumature marcate sulle superfici dell'interfaccia utente; la profondità è ottenuta attraverso la sovrapposizione di fotografie e una leggera sfocatura dello sfondo nel titolo, piuttosto che tramite un effetto di sovrapposizione.
L'elemento principale è una fotografia a tutta larghezza con un titolo centrato (48-64px/460) e una singola call to action riempita con l'immagine di un vino, con schede UI di prodotto trasparenti e fluttuanti sovrapposte ai bordi sinistro e destro. Sotto l'elemento principale si trova una striscia bianca con il logo (6 celle per riga, larghezza massima limitata), seguita da una sezione a schede con superfici bianche su sfondo pergamena. Una striscia turchese scuro interrompe il ritmo a circa due terzi della pagina: a tutta larghezza, su due colonne (immagine a sinistra, testo a destra), creando l'unico contrasto tonale durante lo scorrimento. Segue una striscia atmosferica sfumata. La spaziatura verticale tra le sezioni è di 64-96px. La larghezza massima del contenuto è di circa 1200px centrato, con l'elemento principale e la striscia scura che si estendono per tutta la larghezza della viewport. La navigazione è costituita da un'unica intestazione fissa con sfondo sfocato; nessuna barra laterale, nessun mega menu. Il piè di pagina è una pagina bordeaux a tutta larghezza con un layout a più colonne di link. Il ritmo generale è: cornice principale → contenuto bianco/crema tenue → striscia scura con l'immagine principale → sfumatura suggestiva → piè di pagina bordeaux, con strisce chiare e scure alternate per creare un ritmo editoriale.
L'elemento visivo principale è la fotografia cinematografica: un ritratto a tutta larghezza contro un cielo aperto funge da punto focale, con una seconda striscia atmosferica posizionata più in basso nella pagina. L'immagine ha una tonalità calda, leggermente smorzata ed è scattata di profilo, a ricordare l'ora d'oro, creando un'atmosfera più editoriale che aziendale. Una striscia scura con rettangoli geometrici traslucidi e iscrizioni manoscritte è sovrapposta alla fotografia di un uomo assorto nei suoi pensieri: un collage di superfici piuttosto che un'unica immagine. L'interfaccia utente è presentata come schede di vetro fluttuanti sovrapposte direttamente alla fotografia, anziché come schermate separate. Non ci sono illustrazioni di repertorio, rendering 3D o forme decorative astratte, ad eccezione della striscia atmosferica sfumata. Le icone sono minimaliste, monocromatiche, di circa 16-20 pixel di larghezza, con un'unica larghezza corrispondente al peso del testo di 460 punti.
Tavolozza
Marca
- Midnight Wine
#421d24— I pulsanti principali, il banner pubblicitario e il piè di pagina sono di un bordeaux caldo, quasi nero, che ricorda più l'inchiostro che il rosso, ancorando la palette di colori senza risultare eccessivo. - Royal Violet
#714cb6— Il viola si usa per evidenziare link, tag e frasi brevi. Non dovrebbe essere usato come colore principale per le call to action.
Neutro
- Lilac Mist
#d4c7ff— Il riempimento secondario della superficie, le icone luminose e gli sfondi dei pulsanti trasparenti presentano tutti una tonalità di viola tenue che richiama lo stile del marchio senza attirare eccessivamente l'attenzione su di sé. - Deep Lagoon
#0c4243— Lo sfondo scuro della striscia, utilizzato come elemento narrativo principale, è l'unica superficie scura del sistema, combinata con un motivo geometrico sovrapposto. - Warm Parchment
#f2f0eb— La superficie di lavoro della pagina è l'elemento dominante; un caldo color crema sostituisce il bianco come base, conferendo all'intero sistema un calore editoriale. - Soft Mist
#e3e3e2— Bordi sottili, contorni di cartoncino, linee divisorie: un grigio caldo e chiaro che si fonde con la pergamena ma definisce chiaramente i bordi. - Ink Charcoal
#292827— Testo del corpo, titoli, contorni delle icone: un colore caldo, quasi nero, con abbastanza marrone da sembrare inchiostro su carta, mai freddo #000 - Stone Gray
#666666— Testo secondario, testi di supporto, descrizioni discrete: un unico grigio medio, usato con parsimonia in modo da non entrare mai in competizione con il testo principale.
Tipografia
da 12 a 64 pixel · 8 passaggi
- Super Sans VF — sostituzione: Inter (closest open equivalent for variable weight range) · contorni 460, 500, 540, 600, 700 · Un unico font per l'intero sistema. Le variabili dell'asse coprono un intervallo da 460 (un font distintivo, leggermente troncato per tutti i titoli di grandi dimensioni) a 540 (testo del corpo in evidenza) e 700 (didascalie piccole e in grassetto). Un VF appositamente progettato fa sì che i titoli con peso 460 appaiano più ricercati che casuali: con dimensioni di 48-64 pixel e spaziatura tra le lettere ridotta, l'effetto "leggermente troncato" viene percepito come autorevole piuttosto che sottile.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | denso |
| Passo base | 8px |
| Raggio del pulsante | 16px |
| Raggio della carta | 16px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 64-96px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Superhuman 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
- AI for Business — Sala espositiva in stile brutalista dai toni caldi del grigio.
- Jeton — Un editoriale sul fintech su marmo caldo
- Airtable — Un seminario accogliente con capitoli contrassegnati da colori diversi.
- Osmo — Il museo degli sviluppatori sul cemento grigio
- Linktr — I poster editoriali sono ammucchiati come caramelle. Il sito web è progettato con blocchi di colore, con titoli verde brillante su sfondi blu cobalto ed elementi di navigazione bianchi a forma di pillola che fluttuano su campi bordeaux.
- Outsource Consultants — Un foglio architettonico di grande formato su carta color osso. Un'estetica monografica, dove un'unica macchia di indaco brillante interrompe la griglia altrimenti calda e tipograficamente massimalista.
- Streamtime — Tavolo tattile per moodboard creativo - Tavolo da scrapbooking di design
- Switch-Lit — Griglia editoriale stampata a inchiostro su carta color crema
- HubSpot — Una calda tonalità crema con un unico accento arancione. HubSpot ricorda una rivista di design stampata su carta pesante: titoli con grazie, pagine color crema caldo e un unico accento arancione acceso che evidenzia solo i punti più importanti.
- Granola — Appunti su calda pergamena: Granola ricorda un taccuino Moleskine ben usato, aperto su una scrivania illuminata dal sole. I titoli con grazie conferiscono un senso di solidità, gli accenti verdi organici ricordano l'inchiostro vegetale e le linee sottili ai margini delle carte richiamano appunti scritti a mano.
- Secure — Una conversazione in un caffè europeo immerso nella luce soffusa del giorno è un'interpretazione calda ed elegante della videochiamata, dove i titoli con grazie sembrano più un articolo di una rivista ben strutturata che la pagina di un prodotto tecnologico.
- Mockups made easy — Studio di progettazione editoriale su carta bianca