Substack
oranžinis rašalas ant stalo redakcijos biure
„Substack“ atrodo kaip nudėvėtas naujienų skyriaus prietaisų skydelis – balta drobė, šiltas, beveik juodas tekstas ir vienas ryškiai oranžinis akcentas, žymintis kiekvieną turinio kūrimo etapą. Vizualinė hierarchija paremta tankumu, o ne dekoru: plonos pilkos linijos skiria sklaidos kanalo elementus, avatarai maži, metaduomenys nutildyti, o skaitytojo akis įpratinta sutelkti dėmesį į oranžinį raginimą veikti, oranžinį logotipą, oranžinę nuorodą „Prenumeruoti“ ir oranžinį mygtuką „Sukurti“. Paviršiai lygūs ir neriboti – nėra kortelių šešėlių, nėra chromuotų skydelio elementų – leidžiant tipografijai (kompaktiškam chromo sistemos vartotojo sąsajos elementui, suporuotam su pasirinktiniu serifiniu antraštės šriftu) atlikti redakcinio svorio naštą. Firminis stilius – santūrūs chromo elementai ir ryškūs, vienspalviai iššokantys elementai: skaitymo programėlė, kuri atrodo kaip leidybos įrankis.
Trijų stulpelių darbalaukio išdėstymas: fiksuota kairioji šoninė juosta (~200 pikselių, naršymas su piktogramomis ir etiketėmis, fiksuota), centrinis sklaidos kanalas (maksimalus plotis ~600 pikselių, vertikaliai slenkantis įrašų sąrašas) ir fiksuota dešinioji šoninė juosta (~300 pikselių, paieška + rekomendacijos + registracija). Centrinis sklaidos kanalas yra redakcijos pagrindas – jokių kortelių, tik įrašai, sudėti vienas ant kito su plonomis pertvaromis ir 32 pikselių tarpais tarp sekcijų. Pagrindinė reklaminė juosta yra sklaidos kanalo viršuje kaip viena viso pločio kortelė. Kairiojoje šoninėje juostoje yra prekės ženklo logotipas (oranžinis ženklas su persidengiančiomis linijomis), šeši naršymo elementai ir viso pločio oranžinis mygtukas „Sukurti“ apačioje. Dešiniojoje šoninėje juostoje yra paieškos laukas, registracijos kortelė ir sąrašas „Toliau“ skaitymui. Navigacija minimali – nėra viršutinės juostos, nėra navigacijos kelių; šoninė juosta YRA navigacija. Turinio tankis didelis: įrašuose naudojami 12–13 pikselių metaduomenys ir 15–19 pikselių pagrindinis tekstas, sukuriantis laikraščio ritmą, o ne prekyvietės kortelių tinklelio pojūtį.
Nuotraukos yra vartotojų sukurtas turinys (autorių avatarai, įrašų miniatiūros, įrašų vaizdai) – „Substack“ neteikia savo dekoratyvinių nuotraukų. Pagrindinėje kortelėje naudojamas turkio spalvos gradientas su abstrakčiais iliustraciniais elementais (geometrinėmis figūromis, stilizuotais objektais, tokiais kaip rašikliai ir užrašai) kaip fonas. Įrašų miniatiūros dešinėje šoninėje juostoje yra mažos (64 pikseliai), išdėstytos 8 pikselių spinduliu ir veikia kaip skaitymo sąrašo peržiūra. Bendra vizualinė kalba yra paremta tekstu: sąsaja yra skaitymo drobė, o vaizdai tarnauja kaip maži vizualiniai inkarai, o ne kuria atmosferą.
Paletė
Prekės ženklas
- Signal Orange
#ff6719— Oranžinė spalva naudojama kaip antrinis akcentas dekoratyvinėms detalėms ir retų užuominų paryškinimui. Ji neturėtų būti naudojama kaip pagrindinė spalva raginimams veikti.
Neutralus
- Ink
#363737— Pagrindinis tekstas – tai pagrindinis tekstas, antraštės, įrašų pavadinimai, laiko žymos ir autorių vardai; šilta, beveik juoda spalva vietoj gryno #000, kad būtų lengviau skaityti. - Paper
#ffffff— Puslapio drobė, kortelės paviršiai, įvesties laukai ir naršymo fonas yra dominuojantys paviršiai, užimantys didžiąją dalį sąsajos. - Charcoal
#232525— Papildomo teksto ir nuorodų su aukštu pasirinkimo lygiu užvedimo būsena; kodo blokams ir pasirinkimo blokams – gilesnis nei rašalo režimas. - Stone
#777777— Antriniams vartotojo sąsajos elementams, skirtukams ir prislopintoms etiketėms palaikoma neutrali spalva. Ji neturėtų būti naudojama kaip pagrindinė spalva raginimams veikti. - Ash
#b6b6b6— Plonos kraštinės, mygtukų kontūrai, piktogramų kontūrai, išjungtų valdiklių rėmeliai. - Mist
#c8c8c8— Skiriamosios linijos, neįkyrus piktogramų fonas, tuščių langelių užpildymas skeleto pavidalu.
Tipografija
nuo 12 iki 32 pikselių · 5 žingsniai
- system-ui — pakeitimas: -apple-system · kontūrai 400, 500, 600 · Pagrindinis vartotojo sąsajos ir pagrindinio teksto šriftas naudojamas naršymo etiketėms, mygtukams, pranešimų tekstui, metaduomenims, įvesties laukams ir visiems sąsajos elementams. Kompaktiški 12–13 pikselių dydžiai metaduomenims ir 15–19 pikselių pagrindiniam tekstui sukuria tankaus naujienų srauto įspūdį. Pagrindinio teksto storis yra 400, naršymo elementų ir mygtukų etikečių – 500, o paryškintų pranešimų pavadinimų ir skyrių antraštių – 600.
- Cahuenga — pakeitimas: Charter · kontūrai 500 · Firminis dekoratyvinis serifinis šriftas produktų lygio antraštėms (šoninių juostų antraštėms, registracijos kortelių antraštėms, pagrindiniam tekstui). Vidutinis storis ir nedidelis eilutės aukštis suteikia jam išskirtinę išvaizdą, tačiau nejaučia didelio masyvumo; tai vienintelis šriftas, kuris, be oranžinės spalvos, nurodo „Substack“ tapatybę.
- Spectral — pakeitimas: Charter · kontūrai 400 · Serifinis šriftas ilgiems įrašams – naudojamas skaityklose ir naujienų srautų turinyje, siekiant pagerinti redakcinės medžiagos skaitomumą. Šiek tiek tankesnis eilučių tarpas (1,20) užtikrina patogų pastraipų skaitymą, išlaikant naujienų dienoraščiams būdingą kompaktiškumą.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | tankus |
| Pagrindinis žingsnis | 8px |
| Mygtuko spindulys | 9999px |
| Kortelės spindulys | 12px |
| Šešėliai | ne – rėmeliai vietoj šešėlių |
| Tarp sekcijų | 32px |
| Puslapio plotis | 1200px |
Dirbtinis intelektas sukurs jūsų svetainę Substack stiliumi ir ją užpildys
- Užpildykite produktais ir įrašais per nuorodą – Instagram, TikTok, Facebook.
- Perkelkite turinį iš senos svetainės – tiesiog nurodykite adresą.
- Modernus dizainas geriausiame variklyje: React ( Next.js) su serverio atvaizdavimu ir SEO optimizavimu iš karto.
- Visiškai automatizuotas SEO optimizavimas paieškos rezultatams ir neuroninių tinklų rekomendacijoms.
Panašūs stiliai
- ElevenLabs — Šiltų kreminių atspalvių fotoreportažas su subtiliomis antraštėmis. Bauhaus stiliaus užrašų knygelė – kiaušinio lukšto spalvos popierius, juodas rašalas ir vienas violetinis bei oranžinis akcentas gaminiui eksponuoti.
- Awesomic — Redakcijos cinko tinklelis su oranžiniais skyrybos ženklais, primenančiais konfeti
- Monad — redakcinis techninis žurnalas ant šilto pergamento
- Dub — „Link“ matinio ryžinio popieriaus valdymo skydelis
- Seline Analytics — Ramus analitinis stalas ant šilto popieriaus
- Notion — Šiltas popierinis užrašų knygutės formos laikraštis vidurdienio saulėje
- Anthropic — Mokslinis lauko žurnalas ant šilto pergamento – ramūs dramblio kaulo paviršiai, serifuotos redakcinės antraštės ir vienas molinis akcentas, atsirandantis tik tada, kai reikia imtis veiksmų.
- Calendly — Tamsiai mėlynas rašalas ant šalto marmuro
- Augen Pro — „Apple“ baltoje prezentacijoje monochrominėje erdvėje vienintelis akcentas – klinikinė, nesvari, elektrinė mėlyna spalva.
- Antimetal — Redakcijos kronika ant kreminio popieriaus – ramus rytas moksliniame žurnale, kur santūrumas perteikia pasitikėjimą, o serifai atlieka sunkų darbą.
- Perk — Elektrinė citrina ant šilto pergamentinio popieriaus
- Ditto — Saulės apšviestos dirbtuvės, kuriose kuriami laukinių gėlių pavyzdžiai. Šilti kreminiai paviršiai, ryški geltona pagrindinė spalva, tamsiai mėlyni dažai, organinės spalvų formos, žydinčios už kūrinio.