Substack
oranža tinte uz galda redakcijas birojā
Substack izskatās pēc novalkāta ziņu telpas informācijas paneļa — balts audekls, silts, gandrīz melns teksts un viens spilgti oranžs akcents, kas iezīmē katru satura veidošanas posmu. Vizuālā hierarhija ir veidota uz blīvuma, nevis dekorativitātes pamata: plānas pelēkas līnijas atdala plūsmas elementus, avatari ir mazi, metadati ir izslēgti, un lasītāja acs ir pieradināta koncentrēties uz oranžo aicinājumu uz darbību, oranžo logotipu, oranžo saiti “Abonēt” un oranžo pogu “Izveidot”. Virsmas ir plakanas un nepiespiestas — nav karšu ēnu, nav hroma paneļa elementu —, ļaujot tipogrāfijai (kompakts hroma sistēmas lietotāja interfeisa elements, kas savienots ar pielāgotu serif virsraksta fontu) nest redakcionālā svara nastu. Raksturīgais stils ir atturīgi hroma elementi un spilgti, vienkrāsaini izcēlumi: lasīšanas lietotne, kas šķiet kā publicēšanas rīks.
Trīs kolonnu darbvirsmas izkārtojums: fiksēta kreisā sānjosla (~200 pikseļi, navigācija ar ikonām un etiķetēm, fiksēta), centrālā plūsma (maksimālais platums ~600 pikseļi, vertikāli ritināms ierakstu saraksts) un fiksēta labā sānjosla (~300 pikseļi, meklēšana + ieteikumi + reģistrācija). Centrālā plūsma ir redakcijas kodols — nav kartīšu, tikai ieraksti, kas sakrauti viens virs otra ar plānām atdalītājām un 32 pikseļu atstarpēm starp sadaļām. Galvenais baneris atrodas plūsmas augšdaļā kā viena pilna platuma kartīte. Kreisajā sānjoslā ir zīmola logotips (oranža zīme ar pārklājošām līnijām), seši navigācijas vienumi un pilna platuma oranža poga “Izveidot” apakšā. Labajā sānjoslā ir meklēšanas lauks, reģistrācijas kartīte un saraksts “Nākamie” lasīšanai. Navigācija ir minimāla — nav augšējās joslas, nav navigācijas navigācijas; sānjosla IR navigācija. Satura blīvums ir augsts: ierakstos tiek izmantoti 12–13 pikseļu metadati un 15–19 pikseļu pamatteksts, radot avīzei līdzīgu ritmu, nevis tirgus kartīšu režģa sajūtu.
Fotoattēli ir lietotāju ģenerēts saturs (autoru avatari, ierakstu sīktēli, ierakstu attēli) — Substack nenodrošina savus dekoratīvos fotoattēlus. Galvenajā kartītē tiek izmantots tirkīza līdz zaļam gradients ar abstraktiem ilustratīviem elementiem (ģeometriskām formām, stilizētiem objektiem, piemēram, pildspalvām un piezīmēm) kā fonu. Ierakstu sīktēli labajā sānjoslā ir mazi (64 pikseļi), ievietoti 8 pikseļu rādiusā un darbojas kā lasīšanas saraksta priekšskatījums. Kopējā vizuālā valoda ir balstīta uz tekstu: saskarne ir lasīšanas audekls, un attēli kalpo kā mazi vizuāli enkuri, nevis atmosfēras radīšana.
Palete
Zīmols
- Signal Orange
#ff6719— Oranža krāsa tiek izmantota kā sekundārs akcents dekoratīvām detaļām un retu norāžu izcelšanai. To nevajadzētu izmantot kā galveno krāsu aicinājumiem uz darbību.
Neitrāls
- Ink
#363737— Pamatteksts — galvenais teksts, virsraksti, ierakstu nosaukumi, laika zīmogi un autoru vārdi; silta, gandrīz melna krāsa tīra #000 vietā, lai būtu vieglāk lasīt. - Paper
#ffffff— Lapas audekls, karšu virsmas, ievades lauki un navigācijas fons ir dominējošās virsmas, kas aizņem lielāko daļu saskarnes. - Charcoal
#232525— Papildu teksta un saišu ar augstu atlases līmeni novietošanas stāvoklī; dziļāks nekā tintes režīms koda blokiem un atlases blokiem. - Stone
#777777— Neitrāla krāsa tiek atbalstīta sekundārajiem lietotāja interfeisa elementiem, atdalītājiem un klusinātām etiķetēm. To nevajadzētu izmantot kā galveno krāsu aicinājumiem uz darbību. - Ash
#b6b6b6— Plānas apmales līnijas, pogu kontūras, ikonu kontūras, apmales uz atspējotām vadīklām. - Mist
#c8c8c8— Sadalošās līnijas, neuzkrītošs fons ikonām, tukšu šūnu aizpildīšana skeleta formā.
Tipogrāfija
no 12 līdz 32 pikseļiem · 5 soļi
- system-ui — nomaiņa: -apple-system · kontūras 400, 500, 600 · Lietotāja saskarnes un pamatteksta primārais fonts tiek izmantots navigācijas etiķetēm, pogām, ziņojumu tekstam, metadatiem, ievades laukiem un visiem saskarnes elementiem. Kompakts metadatu izmērs — 12–13 pikseļi un pamatteksta izmērs — 15–19 pikseļi rada blīvas ziņu plūsmas sajūtu. Pamatteksta svars ir 400, navigācijas elementu un pogu nosaukumu — 500, bet izcelto ziņojumu virsrakstu un sadaļu virsrakstu — 600.
- Cahuenga — nomaiņa: Charter · kontūras 500 · Raksturīgs dekoratīvs serif fonts produktu līmeņa virsrakstiem (sānjoslas virsrakstiem, reģistrācijas karšu virsrakstiem, galvenajam tekstam). Tā vidējais biezums un nelielais līnijas augstums piešķir tam izcilu izskatu, neradot apjomīguma sajūtu; tas ir vienīgais fonts, kas bez oranžās krāsas signalizē par Substack identitāti.
- Spectral — nomaiņa: Charter · kontūras 400 · Serif fonts gariem ierakstiem — tiek izmantots lasītavās un ziņu plūsmas saturā, lai uzlabotu redakcionālo materiālu lasāmību. Nedaudz blīvāka rindu atstarpe (1,20) nodrošina ērtu rindkopu lasīšanu, vienlaikus saglabājot ziņu telpām raksturīgo kompaktumu.
Intervāli un forma
| Mērķis | Nozīme |
|---|---|
| Blīvums | blīvs |
| Pamata solis | 8px |
| Pogas rādiuss | 9999px |
| Kartes rādiuss | 12px |
| Ēnas | nē — robežas ēnu vietā |
| Starp sekcijām | 32px |
| Lapas platums | 1200px |
Mākslīgais intelekts izveidos jūsu vietni Substack stilā un aizpildīs to
- Aizpildiet ar produktiem un ierakstiem, izmantojot saiti — Instagram, TikTok, Facebook.
- Pārsūtiet saturu no savas vecās vietnes — vienkārši norādiet adresi.
- Moderns dizains uz labākā dzinēja: React ( Next.js) ar servera renderēšanu un SEO optimizāciju uzreiz pēc instalēšanas.
- Pilnībā automatizēta SEO optimizācija meklēšanas rezultātiem un neironu tīkla ieteikumiem.
Līdzīgi stili
- ElevenLabs — Foto eseja siltos krēmkrāsas toņos ar neuzkrītošiem virsrakstiem. Bauhaus stila piezīmju grāmatiņa — olu čaumalas krāsas papīrs, melna tinte un viens violets un oranžs akcents produktu izvietošanai.
- Awesomic — Redakcijas cinka siets ar oranžām pieturzīmēm, kas atgādina konfeti
- Monad — redakcijas tehniskais žurnāls uz silta pergamenta
- Dub — Link matēta rīspapīra vadības panelis
- Seline Analytics — Kluss analītisks galds uz silta papīra
- Notion — Silta papīra piezīmju grāmatiņa pusdienas saulē
- Anthropic — Zinātnisks lauka žurnāls uz silta pergamenta — mierīgas ziloņkaula virsmas, serifi raksta virsraksti un viens māla akcents, kas parādās tikai tad, kad nepieciešama rīcība.
- Calendly — Tumši zila tinte uz auksta marmora
- Augen Pro — Apple baltajā prezentācijā vienkrāsainā telpā kā vienīgais akcents ir klīnisks, viegls, elektriski zils tonis.
- Antimetal — Redakcijas hronika uz krēmkrāsas papīra — kluss rīts zinātniskā žurnālā, kur atturība pauž pārliecību un serifi veic smago darbu.
- Perk — Elektriskais laims uz silta pergamenta papīra
- Ditto — Saules apspīdēta darbnīca, kurā tiek radīti savvaļas ziedu paraugi. Silti krēmkrāsas virsmas, spilgti dzeltena pamatkrāsa, dziļi tumši zilas tintes, organiskas krāsu formas, kas plaukst aiz darba.