Substack
inchiostru aranciu nantu à u scrivania in l'uffiziu editoriale
Substack s'assumiglia à un dashboard di redazione ben usuratu - una tela bianca, un testu caldu, guasi neru, è un unicu accentu aranciu brillanti chì marca ogni tappa di a creazione di cuntenutu. A ghjerarchia visuale hè custruita nantu à a densità piuttostu chè nantu à a decorazione: linee grigie sottili separanu l'elementi di u feed, l'avatar sò chjuchi, i metadati sò silenziati, è l'ochju di u lettore hè furmatu per fucalizà si nantu à a chjama à l'azione aranciu, u logu aranciu, u ligame "Abbonati" aranciu è u buttone aranciu "Crea". E superfici sò mantenute piatte è senza vincoli - senza ombre di carte, senza elementi di pannelli cromati - lascendu chì a tipografia (un elementu UI di sistema cromatu compactu assuciatu à un carattere di titulu serif persunalizatu) porti u pesu di u pesu editoriale. U stile di firma hè elementi cromati cuntenuti è tocchi vibranti è monocolori: un'app di lettura chì si sente cum'è un strumentu di pubblicazione.
Un layout di desktop à trè colonne: una barra laterale sinistra fissa (~200px, navigazione cù icone è etichette, fissa), un feed centrale (larghezza massima ~600px, lista di publicazioni à scorrimentu verticale) è una barra laterale destra fissa (~300px, ricerca + raccomandazioni + registrazione). U feed centrale hè u core editoriale - nisuna carta, solu publicazioni impilate una sopra l'altra cù divisori fini è spazii di 32px trà e sezioni. U banner principale si trova in cima à u feed cum'è una sola carta à larghezza piena. A barra laterale sinistra cuntene u logu di a marca (un segnu aranciu cù linee sovrapposte), sei elementi di navigazione è un buttone aranciu "Crea" à larghezza piena in fondu. A barra laterale destra cuntene un campu di ricerca, una carta di registrazione è una lista "Up Next" per a lettura. A navigazione hè minima - nisuna barra superiore, nisuna briciola di pane; a barra laterale È a navigazione. A densità di cuntenutu hè alta: e publicazioni utilizanu metadati di 12-13px è testu di corpu di 15-19px, creendu un ritmu simile à un ghjurnale piuttostu chè a sensazione di a griglia di carte di un marketplace.
E foto sò cuntenutu generatu da l'utilizatori (avatar di l'autori, miniature di publicazioni, imagine di publicazioni) - Substack ùn furnisce micca e so propie foto decorative. A carta principale usa un gradiente turchese à verde cù elementi illustrativi astratti (forme geometriche, oggetti stilizzati cum'è penne è note) cum'è sfondate. E miniature di publicazioni in a barra laterale destra sò chjuche (64px), racchiuse in un raghju di 8px, è funzionanu cum'è un'anteprima di a lista di lettura. U linguaghju visuale generale hè basatu annantu à u testu: l'interfaccia hè una tela di lettura, è l'imagine servenu cum'è piccule ancore visuali piuttostu chè creà atmosfera.
Paletta
Marca
- Signal Orange
#ff6719— L'aranciu hè adupratu cum'è accentu secundariu per i dettagli decorativi è per mette in risaltu i segni pocu frequenti. Ùn deve esse adupratu cum'è culore primariu per e chjame à l'azzione.
Neutru
- Ink
#363737— Testu di u corpu - u testu principale, i tituli, i tituli di i posti, i timestamp è i nomi di l'autori; un culore caldu, guasi neru invece di u #000 puru per una lettura più faciule. - Paper
#ffffff— A tela di a pagina, e superfici di e carte, i campi di input è u sfondate di navigazione sò e superfici dominanti chì occupanu a grande maggioranza di l'interfaccia. - Charcoal
#232525— Statu di passaghju nantu à u mouse per testu supplementariu è ligami cù livelli di selezzione alti; più prufondu chè a modalità Inchiostru per i blocchi di codice è i blocchi di selezzione. - Stone
#777777— Un culore neutru hè supportatu per l'elementi secundarii di l'interfaccia utente, i divisori è l'etichette silenziate. Ùn deve esse adupratu cum'è culore primariu per e chjame à l'azzione. - Ash
#b6b6b6— Linee di bordu fine, contorni di buttoni, contorni di icone, bordi nantu à i cuntrolli disattivati. - Mist
#c8c8c8— Linee divisorie, sfondate discrete per icone, riempiendu cellule viote in forma di scheletru.
Tipografia
da 12 à 32px · 5 passi
- system-ui — rimpiazzamentu: -apple-system · contorni 400, 500, 600 · U caratteru principale per l'interfaccia utente è u testu di u corpu hè adupratu per l'etichette di navigazione, i buttoni, u testu di i missaghji, i metadati, i campi di input è tutti l'elementi di l'interfaccia. Dimensioni compatte di 12-13px per i metadati è 15-19px per u testu di u corpu creanu a sensazione di un feed di notizie densu. U pesu hè 400 per u testu di u corpu, 500 per l'elementi di navigazione è l'etichette di i buttoni, è 600 per i tituli di i missaghji evidenziati è l'intestazioni di sezione.
- Cahuenga — rimpiazzamentu: Charter · contorni 500 · Un carattere serif decorativu di firma per i tituli à livellu di produttu (tituli di barra laterale, tituli di carta di registrazione, testu principale). U so pesu mediu è a so ligera altezza di linea li danu un aspettu distintu senza dà l'impressione di esse ingombrante; hè l'unicu carattere chì, oltre à u culore aranciu, segnala l'identità di Substack.
- Spectral — rimpiazzamentu: Charter · contorni 400 · Un carattere serif per i posti longhi - utilizatu in e sale di lettura è in u cuntenutu di i feed di notizie per migliurà a leggibilità di i materiali editoriali. Una spaziatura di linea ligeramente più stretta (1.20) assicura una lettura comoda di i paragrafi mantenendu a cumpattezza tipica di e sale di redazione.
Intervalli è forma
| Scopu | Significatu |
|---|---|
| Densità | densu |
| Passu basicu | 8px |
| Raggiu di u buttone | 9999px |
| Raggiu di a carta | 12px |
| Ombre | nò - bordi invece di ombre |
| Trà e sezioni | 32px |
| Larghezza di a pagina | 1200px |
L'IA custruisce u vostru situ web in stile Substack è 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
- ElevenLabs — Un saggio fotograficu in toni caldi di crema cù tituli suttili. Un quaderno in stile Bauhaus - carta culurata cum'è un gusciu d'ovu, inchiostru neru è un unicu accentu viola è aranciu per a presentazione di u pruduttu.
- Awesomic — Maglia di zincu editoriale cù segni di punteggiatura aranciu chì ricordanu i confetti
- Monad — rivista tecnica editoriale nantu à pergamena calda
- Dub — U pannellu di cuntrollu di carta di risu opaca di Link
- Seline Analytics — Una tavula analitica tranquilla nantu à carta calda
- Notion — Un quaderno di carta calda à u sole di meziornu
- Anthropic — Una rivista scientifica di campu nantu à pergamena calda - superfici d'avorio calme, tituli editoriali serifati è un unicu accentu d'argilla chì appare solu quandu hè necessaria un'azione.
- Calendly — Inchiostru turchinu scuru nantu à u marmaru fretu
- Augen Pro — A presentazione bianca d'Apple presenta un turchinu elettricu clinicu, senza pesu cum'è unicu accentu in un spaziu monocromu.
- Antimetal — Una cronaca editoriale nantu à carta crema - una matina tranquilla in una rivista scientifica, induve a moderazione trasmette fiducia è i serif facenu u travagliu pesante.
- Perk — Calce elettrica nantu à carta pergamena calda
- Ditto — Un attellu illuminatu da u sole chì crea campioni di fiori salvatichi. Superfici crema calde, un culore di basa giallu vibrante, inchiostri blu marinu scuru, forme di culore organiche chì fiuriscenu daretu à l'opera.