Superhuman
pannellu editoriale di l'ora d'oru
Superhuman si trova à l'intersezione di a fotografia editoriale è di l'interfaccia utente di u software - una tela calda, simile à una pergamena (mai bianca pura) incornicia elementi di branding marrone è accenti viola vibranti. I tituli, disposti in caratteri 460, sussurranu piuttostu chè gridà, permettendu à a fotografia cinematografica à pagina piena di fà u travagliu pesante, mentre chì e carte UI di u produttu traslucide fluttuanu cum'è vetru sopra l'imaghjini. A paleta ferma calma è editoriale a maiò parte di u tempu: superfici crema, testu carbone, bordi suttili grisgi caldi è spaziatura generosa trà l'elementi, cù u culore riservatu per a punteggiatura deliberata di a marca - una sola chjama à l'azione marrone, ligami viola, un buttone add-on lilla chjaru. U sistema evita deliberatamente ombre è gradienti forti nantu à e superfici di l'interfaccia utente; A prufundità hè ottenuta attraversu a fotografia stratificata è una sfocatura di u fondu suttile in u titulu, piuttostu chè attraversu un effettu di impilamentu.
L'elementu principale hè una fotografia à larghezza piena cù un titulu centratu (48-64px/460) è una sola chjama à l'azzione piena d'imagine di vinu, cù carte UI di u produttu traslucide flottanti sovrapposte à i bordi sinistro è destro. Sottu à l'elementu principale ci hè una striscia di logò à strisce bianche (6 celle per riga, larghezza massima limitata), poi una sezione di tabulazione cù superfici di carte bianche nantu à una tela pergamena. Una striscia turchese scura rompe u ritmu à circa dui terzi di a pagina - larghezza piena, duie colonne (imagine à manca, testu à diritta) - creendu l'unicu cuntrastu tonale mentre scorri. Segue una striscia atmosferica sfumata. A spaziatura verticale trà e sezioni hè 64-96px. A larghezza massima di u cuntenutu hè di ~1200px centrata, cù l'elementu principale è a striscia scura chì si estende per tutta a larghezza di u viewport. A navigazione hè una sola intestazione fissa cù un sfondate sfocatu; senza barra laterale, senza mega menu. U piè di pagina hè una pagina bordeaux à larghezza piena cù un layout di ligami à più colonne. U ritmu generale hè: quadru principale → cuntenutu biancu/crema calmu → striscia scura cù l'imagine principale → gradiente atmosfericu → pede di pagina bordeaux, alternendu strisce chjare è scure per creà un ritmu editoriale.
L'elementu visuale primariu hè a fotografia cinematografica: un ritrattu à larghezza piena contr'à un celu apertu serve cum'è puntu focale, cù una seconda striscia atmosferica situata più in ghjò in a pagina. L'imagine hè dai toni caldi, sutilmente attenuata, è scattata di prufilu, chì ricorda un'ora d'oru, creendu un aspettu più editoriale chè corporativu. Una striscia scura cù rettanguli geometrichi traslucidi è iscrizioni scritte à manu hè sovrapposta à una fotografia di un omu persu in i so pinsamenti - un collage di superfici piuttostu chè una sola maghjina. L'interfaccia utente hè presentata cum'è carte di vetru flottanti sovrapposte direttamente à a fotografia, piuttostu chè cum'è screenshots separati. Ùn ci sò illustrazioni di stock, nè rendering 3D, nè forme decorative astratte, eccettu per a striscia atmosferica sfumata. L'icone sò icone di linea monocromatiche minimaliste, larghe ~16-20px, cù una sola larghezza currispondente à u pesu di u testu di 460 punti.
Paletta
Marca
- Midnight Wine
#421d24— I principali buttoni d'azione, u banner publicitariu è u piè di pagina sò un bordeaux caldu, guasi neru, chì si sente più cum'è inchiostru chè rossu, ancorandu a paleta di culori senza esse eccessiva. - Royal Violet
#714cb6— U viulettu hè adupratu per mette in risaltu i ligami, i tag è e frasi corte. Ùn deve esse adupratu cum'è culore primariu per e chjame à l'azzione.
Neutru
- Lilac Mist
#d4c7ff— U riempimentu di a superficia secundaria, l'icone di luce è i sfondi di i buttoni fantasma presentanu tutti un culore viola tenue chì allude à u stile di a marca senza attirà eccessivamente l'attenzione. - Deep Lagoon
#0c4243— U fondu scuru di a striscia, adupratu cum'è elementu narrativu principale, hè l'unica superficia scura di u sistema, cumminata cù un mudellu geometricu sovrappostu. - Warm Parchment
#f2f0eb— A superficia di travagliu di a pagina hè l'elementu dominante; un culore crema caldu rimpiazza u biancu cum'è basa, dendu à tuttu u sistema un calore editoriale. - Soft Mist
#e3e3e2— Bordi fini, contorni di carte, linee di divisione - un grisgiu caldu è chjaru chì si mischia cù a pergamena ma definisce chjaramente i bordi. - Ink Charcoal
#292827— Testu di u corpu, tituli, contorni di l'icone - un culore caldu, guasi neru cù abbastanza marrone per dà a sensazione di inchiostru nantu à a carta, mai fretu #000 - Stone Gray
#666666— Testu secundariu di u corpu, testi di sustegnu, descrizzioni discrete - un unicu grisgiu mediu, adupratu cù parsimonia per ùn cumpete mai cù u testu principale.
Tipografia
da 12 à 64px · 8 passi
- Super Sans VF — rimpiazzamentu: Inter (closest open equivalent for variable weight range) · contorni 460, 500, 540, 600, 700 · Un unicu carattere in tuttu u sistema. E variabili di l'asse coprenu l'intervallu da 460 (un carattere di firma, ligeramente ritagliatu per tuttu u testu di l'intestazione grande) à 540 (testu di u corpu enfatizatu) è 700 (didascalie chjuche è in neru). Un VF appositamente cuncipitu face chì l'intestazione di pesu 460 pare più deliberata chè casuale - à 48-64px cù una spaziatura stretta di e lettere, l'effettu "ligeramente ritagliatu" hè percepitu cum'è sicuru piuttostu chè magre.
Intervalli è forma
| Scopu | Significatu |
|---|---|
| Densità | densu |
| Passu basicu | 8px |
| Raggiu di u buttone | 16px |
| Raggiu di a carta | 16px |
| Ombre | nò - bordi invece di ombre |
| Trà e sezioni | 64-96px |
| Larghezza di a pagina | 1200px |
L'IA custruisce u vostru situ web in stile Superhuman è u riempirà
- Riempite cù prudutti è publicazioni via u ligame - Instagram, TikTok, Facebook.
- Trasferisce u cuntenutu da u vostru vechju situ - basta à specificà l'indirizzu.
- Design mudernu nant'à u megliu mutore: React ( Next.js) cù rendering di u servitore è ottimizazione SEO pronta per l'usu.
- Ottimizazione SEO cumpletamente automatizata per i risultati di ricerca è e raccomandazioni di rete neurale.
Stili simili
- AI for Business — Showroom editoriale brutalista in toni caldi di grisgiu
- Jeton — Un editoriale nantu à a fintech nantu à u marmaru caldu
- Airtable — Un seminariu accogliente cù capituli marcati in diversi culori
- Osmo — U Museu di i Sviluppatori nantu à u Cementu Grisgiu
- Linktr — I manifesti editoriali sò impilati cum'è caramelle. U situ web hè cuncipitu in blocchi di culore, cù tituli verdi brillanti disposti contr'à i muri blu cobaltu, è elementi di navigazione bianchi in forma di pillola chì flottanu sopra i campi bordeaux.
- Outsource Consultants — Un fogliu architettonicu di grande furmatu annantu à carta d'ossu. Un'estetica monografica, induve una sola macchia luminosa d'indaco interrompe a griglia altrimenti calda è tipograficamente massimalista.
- Streamtime — Tavola di umore creativa tattile - Tavola di scrapbooking di design
- Switch-Lit — Griglia editoriale stampata in inchiostru nantu à carta crema
- HubSpot — Un culore di carta crema calda cù un unicu accentu aranciu. HubSpot s'assumiglia à una rivista di designer stampata nantu à carta pesante - tituli serif, pagine crema calde è un unicu accentu aranciu focu chì mette in risaltu solu i punti i più impurtanti.
- Granola — Note di campu nantu à carta pergamena calda - Granola si legge cum'è un quaderno Moleskine ben usuratu apertu nantu à una scrivania illuminata da u sole: i tituli serif danu un sensu di solidità, accenti verdi organici cum'è inchiostru vegetale è linee fini in i margini di e carte chì s'assumiglianu à note scritte à manu.
- Secure — Una cunversazione in un caffè europeu in piena luce di ghjornu hè una versione calda è elegante di e videochiamate, induve i tituli serif si leghjenu cum'è un articulu di rivista riflessivu piuttostu chè una pagina di pruduttu tecnologicu.
- Mockups made easy — Studio di design editoriale nantu à carta bianca