Substack
bojë portokalli në tavolinën e redaksisë
Substack duket si një panel kontrolli i një dhome lajmesh të konsumuar shumë - një kanavacë e bardhë, tekst i ngrohtë, pothuajse i zi dhe një theks i vetëm portokalli i ndritshëm që shënon çdo fazë të krijimit të përmbajtjes. Hierarkia vizuale është ndërtuar mbi dendësinë në vend të dekorimit: vija të holla gri ndajnë elementët e burimit, avatarët janë të vegjël, meta të dhënat janë të zbehta dhe syri i lexuesit është i trajnuar të përqendrohet në thirrjen portokalli për veprim, logon portokalli, lidhjen portokalli "Abonohu" dhe butonin portokalli "Krijo". Sipërfaqet mbahen të sheshta dhe të pakufizuara - pa hije kartash, pa elementë të panelit të kromit - duke e lënë tipografinë (një element kompakt i ndërfaqes së përdoruesit të sistemit të kromit i shoqëruar me një font të personalizuar për titullin serif) të mbajë peshën kryesore editoriale. Stili i nënshkrimit është i përmbajtur me elementë të kromit dhe theksime të gjalla me një ngjyrë të vetme: një aplikacion leximi që ndihet si një mjet botimi.
Një paraqitje desktopi me tre kolona: një shirit anësor i majtë i fiksuar (~200px, navigim me ikona dhe etiketa, ngjitës), një burim qendror (gjerësia maksimale ~600px, listë postimesh që lëviz vertikalisht) dhe një shirit anësor i djathtë i fiksuar (~300px, kërkim + rekomandime + regjistrim). Burimi qendror është bërthama editoriale - pa karta, vetëm postime të grumbulluara njëra mbi tjetrën me ndarës të hollë dhe boshllëqe 32px midis seksioneve. Banneri kryesor ndodhet në krye të burimit si një kartë e vetme me gjerësi të plotë. Shiriti anësor i majtë përmban logon e markës (një shenjë portokalli me vija të mbivendosura), gjashtë artikuj navigimi dhe një buton portokalli "Krijo" me gjerësi të plotë në fund. Shiriti anësor i djathtë përmban një fushë kërkimi, një kartë regjistrimi dhe një listë "Tjetër" për lexim. Navigimi është minimal - pa shirit të sipërm, pa thërrime buke; shiriti anësor ËSHTË navigimi. Dendësia e përmbajtjes është e lartë: postimet përdorin meta të dhëna 12-13px dhe tekst trupi 15-19px, duke krijuar një ritëm si gazetë në vend të ndjesisë së rrjetës së kartave të një tregu.
Fotot janë përmbajtje e gjeneruar nga përdoruesit (avatarë të autorëve, miniatura të postimeve, imazhe të postimeve) - Substack nuk ofron fotot e veta dekorative. Karta kryesore përdor një gradient nga bruz në të gjelbër me elementë ilustrues abstraktë (forma gjeometrike, objekte të stilizuara si stilolapsa dhe shënime) si sfond. Miniaturat e postimeve në shiritin anësor të djathtë janë të vogla (64px), të mbyllura në një rreze prej 8px dhe funksionojnë si një pamje paraprake e listës së leximit. Gjuha vizuale e përgjithshme është e bazuar në tekst: ndërfaqja është një kanavacë leximi dhe imazhet shërbejnë si spiranca të vogla vizuale në vend që të krijojnë atmosferë.
Paletë
Markë
- Signal Orange
#ff6719— Portokallia përdoret si një theks dytësor për detajet dekorative dhe për të nxjerrë në pah sinjalet e rralla. Nuk duhet të përdoret si ngjyra kryesore për thirrjet për veprim.
Neutral
- Ink
#363737— Teksti i trupit—teksti kryesor, titujt, titujt e postimeve, vulat kohore dhe emrat e autorëve; një ngjyrë e ngrohtë, pothuajse e zezë në vend të #000 të pastër për lexim më të lehtë. - Paper
#ffffff— Kanavaca e faqes, sipërfaqet e kartave, fushat e hyrjes dhe sfondi i navigimit janë sipërfaqet dominuese që zënë pjesën më të madhe të ndërfaqes. - Charcoal
#232525— Gjendja e mbajtësit të miut për tekst dhe lidhje shtesë me nivele të larta përzgjedhjeje; më e thellë se modaliteti Ink për blloqet e kodit dhe blloqet e përzgjedhjes. - Stone
#777777— Një ngjyrë neutrale mbështetet për elementët dytësorë të ndërfaqes së përdoruesit, ndarësit dhe etiketat e heshtura. Nuk duhet të përdoret si ngjyra kryesore për thirrjet për veprim. - Ash
#b6b6b6— Vija të holla kufitare, konture butonash, konture ikonash, kufij në kontrollet e çaktivizuara. - Mist
#c8c8c8— Vija ndarëse, sfond i padukshëm për ikonat, mbushja e qelizave boshe në formën e një skeleti.
Tipografi
nga 12 në 32px · 5 hapa
- system-ui — zëvendësim: -apple-system · skica 400, 500, 600 · Fonti kryesor për ndërfaqen e përdoruesit dhe tekstin e trupit përdoret për etiketat e navigimit, butonat, tekstin e mesazhit, meta të dhënat, fushat e hyrjes dhe të gjithë elementët e ndërfaqes. Madhësitë kompakte prej 12-13px për meta të dhënat dhe 15-19px për tekstin e trupit krijojnë ndjesinë e një burimi lajmesh të dendur. Pesha është 400 për tekstin e trupit, 500 për elementët e navigimit dhe etiketat e butonave, dhe 600 për titujt e mesazheve të theksuara dhe titujt e seksioneve.
- Cahuenga — zëvendësim: Charter · skica 500 · Një font serif dekorativ karakteristik për titujt në nivel produkti (titujt e shiritit anësor, titujt e kartave të regjistrimit, teksti kryesor). Pesha e tij mesatare dhe lartësia e lehtë e vijës i japin një pamje të dallueshme pa u ndjerë e rëndë; është i vetmi font që, përveç ngjyrës portokalli, sinjalizon identitetin e Substack.
- Spectral — zëvendësim: Charter · skica 400 · Një font serif për postime të gjata—përdoret në dhomat e leximit dhe në përmbajtjen e lajmeve për të përmirësuar lexueshmërinë e materialeve editoriale. Një hapësirë pak më e ngushtë midis rreshtave (1.20) siguron lexim të rehatshëm të paragrafëve, duke ruajtur kompaktësinë tipike të dhomave të lajmeve.
Intervalet dhe forma
| Qëllimi | Kuptimi |
|---|---|
| Dendësia | i dendur |
| Hapi bazë | 8px |
| Rrezja e butonit | 9999px |
| Rrezja e kartës | 12px |
| Hijet | pa kufij në vend të hijeve |
| Midis seksioneve | 32px |
| Gjerësia e faqes | 1200px |
IA do ta ndërtojë faqen tuaj të internetit në stilin Substack dhe do ta mbushë atë
- Plotësoni me produkte dhe postime përmes linkut - Instagram, TikTok, Facebook.
- Transferoni përmbajtje nga faqja juaj e vjetër—thjesht specifikoni adresën.
- Dizajn modern në motorin më të mirë: React ( Next.js) me renderim të serverit dhe optimizim SEO që në fillim.
- Optimizim plotësisht i automatizuar i SEO-s për rezultatet e kërkimit dhe rekomandimet e rrjeteve nervore.
Stile të ngjashme
- ElevenLabs — Një ese me foto në tone të ngrohta krem me tituj delikatë. Një fletore në stilin Bauhaus - letër me ngjyrë lëvozhge veze, bojë e zezë dhe një theks i vetëm vjollcë dhe portokalli për shfaqjen e produktit.
- Awesomic — Rrjetë zinku editoriale me shenja pikësimi portokalli që të kujtojnë konfeti
- Monad — revistë teknike editoriale mbi pergamenë të ngrohtë
- Dub — Paneli i kontrollit të letrës orizi mat të Link
- Seline Analytics — Një tabelë analitike e qetë në letër të ngrohtë
- Notion — Një fletore e ngrohtë letre në diellin e mesditës
- Anthropic — Një revistë shkencore mbi pergamenën e ngrohtë - sipërfaqe të qeta ngjyrë fildishi, tituj editorialë të serifuar dhe një theks i vetëm argjile që shfaqet vetëm kur nevojitet veprim.
- Calendly — Bojë blu e errët mbi mermer të ftohtë
- Augen Pro — Prezantimi i bardhë i Apple paraqet një blu elektrike klinike, pa peshë, si theksin e vetëm në një hapësirë njëngjyrëshe.
- Antimetal — Një kronikë editoriale në letër kremoze—një mëngjes i qetë në një revistë shkencore, ku përmbajtja përcjell vetëbesim dhe serifetet bëjnë punën e rëndë.
- Perk — Limon elektrik në letër pergameni të ngrohtë
- Ditto — Një seminar i ndriçuar nga dielli që krijon mostra lulesh të egra. Sipërfaqe të ngrohta krem, një ngjyrë bazë e verdhë e gjallë, bojëra blu të errët të errët, forma ngjyrash organike që lulëzojnë pas veprës.