Substack
oranž tint toimetuse laual
Substack näeb välja nagu kulunud uudistetoimetuse armatuurlaud – valge lõuend, soe, peaaegu must tekst ja üks ereoranž aktsent, mis tähistab iga sisu loomise etappi. Visuaalne hierarhia on üles ehitatud pigem tihedusele kui kaunistusele: õhukesed hallid jooned eraldavad voo elemente, avatarid on väikesed, metaandmed on summutatud ja lugeja silm on treenitud keskenduma oranžile üleskutsele tegevusele, oranžile logole, oranžile lingile „Telli” ja oranžile nupule „Loo”. Pinnad hoitakse tasased ja sundimatud – kaardivarjud, kroompaneeli elemendid puuduvad –, lastes tüpograafial (kompaktne kroomsüsteemi kasutajaliidese element koos kohandatud serif-pealkirjafondiga) kanda toimetuse raskuse. Allkirjastiiliks on vaoshoitud kroomelemendid ja erksad ühevärvilised hüpikaknad: lugemisrakendus, mis tundub nagu avaldamisvahend.
Kolmeveeruline töölauapaigutus: fikseeritud vasakpoolne külgriba (~200 pikslit, ikoonide ja siltidega navigeerimine, kleepuv), keskmine voog (maksimaalne laius ~600 pikslit, vertikaalselt keritav postituste loend) ja fikseeritud parempoolne külgriba (~300 pikslit, otsing + soovitused + registreerimine). Keskmine voog on toimetuse tuum – kaarte pole, lihtsalt üksteise peale virnastatud postitused õhukeste eraldajatega ja 32 pikslise laiusega vahedega sektsioonide vahel. Põhiribareklaam asub voo ülaosas ühe täislaiuses kaardina. Vasakpoolne külgriba sisaldab brändi logo (oranž märk kattuvate joontega), kuut navigeerimisüksust ja allosas täislaiuses oranži nuppu „Loo“. Parempoolne külgriba sisaldab otsinguvälja, registreerimiskaarti ja lugemiseks loendit „Järgmisena“. Navigeerimine on minimaalne – ülemist riba ega riivsaia pole; külgriba ON navigeerimine. Sisu tihedus on kõrge: postitused kasutavad 12–13 pikslit metaandmeid ja 15–19 pikslit põhiteksti, luues ajalehelaadse rütmi, mitte turuplatsi kaardiruudustiku tunde.
Fotod on kasutajate loodud sisu (autori avatarid, postituste pisipildid, postituste pildid) – Substack ei paku oma dekoratiivseid fotosid. Põhikaart kasutab türkiissinisest roheliseni ulatuvat gradienti, mille taustaks on abstraktsed illustratiivsed elemendid (geomeetrilised kujundid, stiliseeritud objektid nagu pliiatsid ja märkmed). Parempoolses külgribas olevad postituste pisipildid on väikesed (64 pikslit), 8 piksli raadiuses ja toimivad lugemisloendi eelvaatena. Üldine visuaalne keel on tekstipõhine: liides on lugemislõuend ja pildid toimivad pigem väikeste visuaalsete ankrutena kui atmosfääri loomisel.
Palett
Bränd
- Signal Orange
#ff6719— Oranži kasutatakse dekoratiivsete detailide ja harvaesinevate vihjete esiletõstmiseks teisejärgulise aktsendina. Seda ei tohiks kasutada tegevusele kutsuvate tekstide põhivärvina.
Neutraalne
- Ink
#363737— Põhitekst – põhitekst, pealkirjad, postituste pealkirjad, ajatemplid ja autorite nimed; soe, peaaegu must värv puhta #000 asemel hõlpsamaks lugemiseks. - Paper
#ffffff— Lehe lõuend, kaardi pinnad, sisestusväljad ja navigeerimise taust on domineerivad pinnad, mis hõlmavad suurema osa liidesest. - Charcoal
#232525— Kõrge valikutasemega lisateksti ja linkide puhul kursori hõljutusolek; koodiplokkide ja valikuplokkide puhul sügavam kui tindirežiim. - Stone
#777777— Neutraalset värvi toetatakse kasutajaliidese sekundaarsete elementide, eraldajate ja summutatud siltide jaoks. Seda ei tohiks kasutada tegevusele kutsuvate tekstide põhivärvina. - Ash
#b6b6b6— Õhukesed äärisjooned, nuppude kontuurid, ikoonide kontuurid, äärised keelatud juhtelementidel. - Mist
#c8c8c8— Eraldavad jooned, ikoonidele märkamatu taust, tühjade lahtrite täitmine skeleti kujul.
Tüpograafia
12-st 32 pikslini · 5 sammu
- system-ui — asendamine: -apple-system · kontuurid 400, 500, 600 · Kasutajaliidese ja põhiteksti peamist fonti kasutatakse navigeerimissiltide, nuppude, sõnumiteksti, metaandmete, sisestusväljade ja kõigi liideseelementide jaoks. Kompaktsed suurused 12–13 pikslit metaandmete ja 15–19 pikslit põhiteksti jaoks loovad tiheda uudistevoo tunde. Põhiteksti kaal on 400, navigeerimiselementide ja nuppude siltide kaal 500 ning esiletõstetud sõnumite pealkirjade ja jaotiste pealkirjade kaal 600.
- Cahuenga — asendamine: Charter · kontuurid 500 · Tootetaseme pealkirjade (külgriba pealkirjad, registreerimiskaartide pealkirjad, põhitekst) iseloomulik dekoratiivne serif-font. Selle keskmine kaal ja väike rea kõrgus annavad sellele silmapaistva välimuse, ilma et see tunduks mahukas; see on ainus font, mis lisaks oranžile värvile annab märku Substacki identiteedist.
- Spectral — asendamine: Charter · kontuurid 400 · Pikkade postituste jaoks mõeldud serif-font – kasutatakse lugemissaalides ja uudistevoogude sisus toimetuse materjalide loetavuse parandamiseks. Veidi tihedam reavahe (1,20) tagab mugava lõigu lugemise, säilitades samal ajal uudistetoimetustele omase kompaktsuse.
Intervallid ja vorm
| Eesmärk | Tähendus |
|---|---|
| Tihedus | tihe |
| Põhisamm | 8px |
| Nupu raadius | 9999px |
| Kaardi raadius | 12px |
| Varjud | ei - varjude asemel äärised |
| Sektsioonide vahel | 32px |
| Lehe laius | 1200px |
Tehisintellekt loob teie veebisaidi Substack stiilis ja täidab selle
- Täida toodete ja postitustega lingi kaudu - Instagram, TikTok, Facebook.
- Kanna sisu oma vanalt saidilt üle – täpsusta lihtsalt aadress.
- Moodne disain parimal mootoril: React ( Next.js) koos serveri renderdamise ja SEO optimeerimisega koheselt.
- Täisautomaatne SEO optimeerimine otsingutulemuste ja närvivõrgu soovituste jaoks.
Sarnased stiilid
- ElevenLabs — Soojades kreemikates toonides fotoessee peenete pealkirjadega. Bauhausi stiilis märkmik – munakoorekarva paber, must tint ja üks lilla ja oranž aktsent toote väljapanekuks.
- Awesomic — Toimetuse tsinkvõrk oranžide konfetti meenutavate kirjavahemärkidega
- Monad — toimetuse tehniline ajakiri soojal pärgamendil
- Dub — Linki matt riisipaberist juhtpaneel
- Seline Analytics — Vaikne analüütiline laud soojal paberil
- Notion — Soe paberist märkmik keskpäevapäikeses
- Anthropic — Teaduslik väliajakiri soojal pärgamendil – rahulikud elevandiluu pinnad, seriifidega pealkirjad ja üks saviaktsent, mis ilmub ainult siis, kui on vaja tegutseda.
- Calendly — Tumesinine tint külmal marmoril
- Augen Pro — Apple'i valge esitlus kasutab monokroomse ruumi ainsa aktsendina kliinilist, kaalutut ja elektrilist sinist.
- Antimetal — Kreemikas paberil toimetuse kroonika – vaikne hommik teadusajakirjas, kus vaoshoitus annab edasi enesekindlust ja serifid teevad raske töö ära.
- Perk — Elektriline laim soojal pärgamentpaberil
- Ditto — Päikesepaisteline töötuba, kus luuakse metslillede näidiseid. Soojad kreemikad pinnad, erk kollane põhivärv, sügavad tumesinised tindid, teose taga õitsevad orgaanilised värvivormid.