Substack
narancssárga tinta az asztalon a szerkesztőségben
A Substack egy megszokott hírszerkesztőségi irányítópultra hasonlít – fehér vászon, meleg, szinte fekete szöveg és egyetlen élénk narancssárga díszítés, amely a tartalomkészítés minden egyes szakaszát jelöli. A vizuális hierarchia inkább a sűrűségre, mint a díszítésre épül: vékony szürke vonalak választják el a hírfolyam elemeit, az avatarok kicsik, a metaadatok elnémítottak, és az olvasó szeme a narancssárga cselekvésre ösztönzésre, a narancssárga logóra, a narancssárga „Feliratkozás” linkre és a narancssárga „Létrehozás” gombra koncentrál. A felületek síkak és lazák – nincsenek kártyaárnyékok, nincsenek króm panelelemek –, így a tipográfia (egy kompakt króm rendszer felhasználói felület elem, egyedi talpas címsor betűtípussal párosítva) viseli a szerkesztői súly nagy részét. Az egyedi stílust visszafogott króm elemek és élénk, egyszínű kiemelések alkotják: egy olvasóalkalmazás, amely egy kiadói eszköznek tűnik.
Három oszlopos asztali elrendezés: fix bal oldalsáv (~200 képpont, navigáció ikonokkal és címkékkel, ragadós), középső hírfolyam (maximális szélesség ~600 képpont, függőlegesen görgethető bejegyzéslista) és fix jobb oldalsáv (~300 képpont, keresés + ajánlások + regisztráció). A középső hírfolyam a szerkesztői mag – nincsenek kártyák, csak egymásra halmozott bejegyzések vékony elválasztókkal és 32 képpontos résekkel a részek között. A fő banner a hírfolyam tetején található egyetlen teljes szélességű kártyaként. A bal oldalsáv tartalmazza a márkalogót (egy narancssárga jel átfedésben lévő vonalakkal), hat navigációs elemet és egy teljes szélességű narancssárga "Létrehozás" gombot alul. A jobb oldalsáv egy keresőmezőt, egy regisztrációs kártyát és egy "Következő" listát tartalmaz olvasáshoz. A navigáció minimális – nincs felső sáv, nincsenek navigációs útvonalak; az oldalsáv maga a navigáció. A tartalom sűrűsége magas: a bejegyzések 12-13 képpontos metaadatokat és 15-19 képpontos szövegtörzset használnak, ami újságszerű ritmust hoz létre, nem pedig egy piactér kártyarácsának érzetét.
A fotók felhasználók által generált tartalmak (szerzői avatarok, bejegyzésbélyegképek, bejegyzésképek) – A Substack nem biztosít saját dekoratív fotókat. A fő kártya türkizkéktől zöldig terjedő színátmenetet használ, absztrakt illusztratív elemekkel (geometrikus formák, stilizált tárgyak, például tollak és jegyzetek) háttérként. A jobb oldalsávban található bejegyzésbélyegképek kicsik (64 képpont), 8 képpontos sugarú körben helyezkednek el, és az olvasási lista előnézeteként szolgálnak. Az általános vizuális nyelv szövegalapú: a felület egy olvasóvászon, a képek pedig apró vizuális horgonyokként szolgálnak, ahelyett, hogy hangulatot teremtenének.
Paletta
Márka
- Signal Orange
#ff6719— A narancssárga másodlagos hangsúlyként szolgál dekoratív részleteknél és ritka jelzések kiemelésére. Nem szabad elsődleges színként használni cselekvésre ösztönzésekhez.
Semleges
- Ink
#363737— Törzsszöveg – a fő szöveg, címsorok, bejegyzéscímek, időbélyegek és szerzők nevei; meleg, szinte fekete szín a sima #000 helyett a könnyebb olvashatóság érdekében. - Paper
#ffffff— Az oldalvászon, a kártyafelületek, a beviteli mezők és a navigációs háttér a domináns felületek, amelyek a felület túlnyomó részét elfoglalják. - Charcoal
#232525— Magas kijelölési szintű további szövegek és hivatkozások esetén egérrel való kiemelés; kódblokkok és kijelölési blokkok esetén mélyebb, mint a tinta mód. - Stone
#777777— A semleges szín támogatott a másodlagos felhasználói felület elemeihez, elválasztókhoz és elnémított címkékhez. Nem szabad elsődleges színként használni a cselekvésre ösztönzésekhez. - Ash
#b6b6b6— Vékony szegélyvonalak, gombok körvonalai, ikonok körvonalai, szegélyek a letiltott vezérlőkön. - Mist
#c8c8c8— Elválasztó vonalak, diszkrét háttér az ikonoknak, üres cellák kitöltése csontváz formájában.
Tipográfia
12-ről 32 képpontra · 5 lépésben
- system-ui — csere: -apple-system · körvonalak 400, 500, 600 · A felhasználói felület és a törzsszöveg elsődleges betűtípusát használják a navigációs címkékhez, gombokhoz, üzenetszöveghez, metaadatokhoz, beviteli mezőkhöz és az összes felületelemhez. A metaadatok 12-13 képpontos, a törzsszöveg 15-19 képpontos méretben jelennek meg, ami sűrű hírfolyam érzetét kelti. A törzsszöveg 400-as, a navigációs elemek és a gombfeliratok 500-as, a kiemelt üzenetcímek és szakaszcímek pedig 600-as betűtípust használnak.
- Cahuenga — csere: Charter · körvonalak 500 · Egy jellegzetes dekoratív, talpas betűtípus termékszintű címsorokhoz (oldalsáv-címsorok, regisztrációs kártyák címsorai, fő szöveg). Közepes vastagsága és enyhe sormagassága előkelő megjelenést kölcsönöz neki anélkül, hogy terjedelmesnek tűnne; ez az egyetlen betűtípus a narancssárga szín mellett, amely jelzi a Substack identitását.
- Spectral — csere: Charter · körvonalak 400 · Hosszú bejegyzésekhez használt, talpas betűtípus – olvasótermekben és hírfolyamokban használják a szerkesztőségi anyagok olvashatóságának javítására. A kissé szűkebb sorköz (1,20) kényelmes bekezdésolvasást biztosít, miközben megőrzi a szerkesztőségekre jellemző tömörséget.
Intervallumok és forma
| Cél | Jelentés |
|---|---|
| Sűrűség | sűrű |
| Alapvető lépés | 8px |
| Gomb sugara | 9999px |
| Kártya sugara | 12px |
| Árnyékok | nincs - szegélyek árnyékok helyett |
| Szakaszok között | 32px |
| Oldal szélessége | 1200px |
A mesterséges intelligencia Substack stílusban fogja elkészíteni a weboldaladat, és kitölti azt.
- Töltsd fel termékeidet és posztjaidat a linkeken keresztül - Instagram, TikTok, Facebook.
- Tartalom átvitele régi webhelyéről – csak adja meg a címet.
- Modern dizájn a legjobb keresőmotoron: React ( Next.js) szerveralapú rendereléssel és SEO optimalizálással, azonnal használható formában.
- Teljesen automatizált SEO optimalizálás a keresési eredményekhez és a neurális hálózati ajánlásokhoz.
Hasonló stílusok
- ElevenLabs — Meleg krémszínű fotóesszé visszafogott címekkel. Bauhaus stílusú jegyzetfüzet – tojáshéjszínű papír, fekete tinta és egyetlen lila és narancssárga díszítőelem a termékek bemutatásához.
- Awesomic — Szerkesztői cinkháló narancssárga írásjelekkel, konfettire emlékeztetve
- Monad — szerkesztőségi műszaki folyóirat meleg pergamenen
- Dub — Link matt rizspapír kezelőpanelje
- Seline Analytics — Egy csendes elemző asztal meleg papíron
- Notion — Egy meleg papírfüzet a déli napsütésben
- Anthropic — Tudományos terepnapló meleg pergamenen – nyugodt elefántcsont felületek, csíkos szerkesztői címsorok és egyetlen agyagdísz, amely csak akkor jelenik meg, ha cselekvésre van szükség.
- Calendly — Sötétkék tinta hideg márványon
- Augen Pro — Az Apple fehér prezentációjában a klinikai, súlytalan, elektromos kék szín az egyetlen hangsúly a monokróm térben.
- Antimetal — Krémszínű papíron szerkesztett krónika – egy csendes reggel egy tudományos folyóiratban, ahol a visszafogottság magabiztosságot sugall, és a betűsarok végzi a nehéz munkát.
- Perk — Elektromos lime meleg pergamenpapíron
- Ditto — Egy napsütötte műhely, ahol vadvirágmintákat készítenek. Meleg krémszínű felületek, élénk sárga alapszín, mély sötétkék tinták, organikus színformák virágoznak a darab mögött.