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
- Mollie — Një banak kashmiri, një libër llogarie i errët. Lini hapësirë të bollshme të bardhë për dizajn editorial rreth tekstit të zi, pastaj përforconi pikat që lidhen me produktin me krem të ngrohtë, kafe kafe ekspres dhe foto prekëse të metodave aktuale të pagesës.
- Kagi — Një dhomë leximi e veçantë. Krijoni një hapësirë të bardhë të hapur rreth tekstit të theksuar me grafit, duke përdorur thekse delikate vjollce dhe sipërfaqe të ngrohta pastel për të thyer qetësinë.
- Milanote — Milanote është një studio krijuese e dedikuar. Krijoni faqe në stilin e galerive editoriale duke përdorur tabela vizuale lundruese: mure me kornizë të errët, hapësirë të bardhë shfaqjeje dhe pamje të ekranit që duken si objekte të vërteta me një thellësi të butë.
- Co2 — Një atlas klimatik në dritën e dimrit. Krijoni faqe si një peizazh dokumenti ajror, ku titujt serif, të dhënat e koduara sipas kategorive dhe imazhet e akullta nxjerrin në pah kufijtë e gjerë të bardhë.
- GitButler — Ngjyrë bruz në fund të tekstit. Një kombinim titujsh serif me kontrast të lartë me rrjeta teknike delikate, sipërfaqe grafiti të ngrohta dhe një theks diskret bruz.
- 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.