Substack
tinta laranja erredakzioko mahaian
Substack-ek erredakzio-panela zaharkitu baten itxura du: mihise zuri bat, testu epel ia beltza, eta laranja koloreko azentu distiratsu bakarra edukia sortzeko etapa bakoitza markatzen duena. Hierarkia bisuala dentsitatean oinarritzen da, apaingarrietan baino gehiago: lerro gris meheek jario-elementuak bereizten dituzte, avatarrak txikiak dira, metadatuak isilduta daude, eta irakurlearen begia ekintzarako dei laranjan, logotipo laranjan, "Harpidetu" esteka laranjan eta "Sortu" botoian zentratzeko trebatuta dago. Gainazalak lauak eta mugarik gabe mantentzen dira: ez txartel-itzalik, ez kromo-panel elementurik, eta tipografiak (kromo sistemako UI elementu trinkoa, izenburu-letra-tipo pertsonalizatu batekin parekatuta) pisu editorialaren zama eramaten du. Estilo bereizgarria kromo elementu neurtuak eta kolore bakarreko ukitu biziak dira: argitalpen-tresna baten itxura duen irakurketa-aplikazio bat.
Hiru zutabeko mahaigaineko diseinua: ezkerreko alboko barra finko bat (~200px, ikono eta etiketekin nabigazioa, itsaskorra), erdiko jario bat (gehienezko zabalera ~600px, argitalpenen zerrenda bertikalki mugitzen dena) eta eskuineko alboko barra finko bat (~300px, bilaketa + gomendioak + erregistroa). Erdiko jarioa erredakzio-nukleoa da: ez dago txartelik, argitalpenak bata bestearen gainean pilatuta, banatzaile meheekin eta atalen artean 32px-ko tarteekin. Banner nagusia jarioaren goialdean dago, zabalera osoko txartel bakar gisa. Ezkerreko alboko barrak markaren logotipoa dauka (gainjarritako lerroekin laranja koloreko seinalea), sei nabigazio-elementu eta beheko aldean zabalera osoko "Sortu" botoia. Eskuineko alboko barrak bilaketa-eremu bat, erregistro-txartel bat eta irakurtzeko "Hurrengoa" zerrenda bat ditu. Nabigazioa minimoa da: ez goiko barrarik, ez ogi-apurrik; alboko barra nabigazioa DA. Eduki-dentsitatea handia da: argitalpenek 12-13px-ko metadatuak eta 15-19px-ko gorputz-testua erabiltzen dituzte, egunkari baten antzeko erritmoa sortuz, merkatu bateko txartel-sareta baten sentsazioa baino.
Argazkiak erabiltzaileek sortutako edukia dira (egileen avatarrak, argitalpenen miniaturak, argitalpenen irudiak) — Substack-ek ez ditu bere argazki apaingarririk eskaintzen. Txartel nagusiak turkesatik berdera doan gradiente bat erabiltzen du, elementu ilustratibo abstraktuekin (forma geometrikoak, boligrafoak eta oharrak bezalako objektu estilizatuak) atzeko plano gisa. Eskuineko alboko barran dauden argitalpenen miniaturak txikiak dira (64px), 8px-ko erradio batean sartuta daude eta irakurketa-zerrendaren aurrebista gisa funtzionatzen dute. Hizkuntza bisual orokorra testuan oinarrituta dago: interfazea irakurketa-mihise bat da, eta irudiek giroa sortu beharrean aingura bisual txiki gisa balio dute.
Paleta
Marka
- Signal Orange
#ff6719— Laranja bigarren mailako azentu gisa erabiltzen da xehetasun apaingarrietarako eta ohikoak ez diren seinaleak nabarmentzeko. Ez da erabili behar ekintzarako deietarako kolore nagusi gisa.
Neutroa
- Ink
#363737— Gorputz-testua —testu nagusia, goiburuak, argitalpenen izenburuak, denbora-zigiluak eta egileen izenak; #000 hutsaren ordez kolore bero eta ia beltza, irakurketa errazteko. - Paper
#ffffff— Orrialdearen mihisea, txartelen gainazalak, sarrera-eremuak eta nabigazio-atzeko planoa dira interfazearen gehiengo zabala hartzen duten gainazal nagusiak. - Charcoal
#232525— Testu gehigarria eta hautapen-maila altuko estekak ikusteko, jarri gainetik pasatzean; kode-bloke eta hautapen-blokeetarako tinta-modua baino sakonagoa. - Stone
#777777— Kolore neutroa onartzen da bigarren mailako UI elementuetarako, banatzaileetarako eta etiketa isilduetarako. Ez da erabili behar ekintzarako deietarako kolore nagusi gisa. - Ash
#b6b6b6— Ertz-lerro meheak, botoien eskemak, ikonoen eskemak, desgaitutako kontrolen ertzak. - Mist
#c8c8c8— Lerro banatzaileak, ikonoentzako atzeko plano diskretua, eskeleto moduan zelula hutsak betez.
Tipografia
12tik 32px-ra · 5 urrats
- system-ui — ordezkapena: -apple-system · eskemak 400, 500, 600 · Erabiltzaile-interfazearen eta gorputz-testuaren letra-tipo nagusia nabigazio-etiketetarako, botoietarako, mezu-testuetarako, metadatuetarako, sarrera-eremuetarako eta interfazearen elementu guztietarako erabiltzen da. 12-13px-ko tamaina trinkoek metadatuetarako eta 15-19px-ko gorputz-testurako albiste-jario trinko baten sentsazioa sortzen dute. Pisua 400 da gorputz-testurako, 500 nabigazio-elementuetarako eta botoi-etiketetarako, eta 600 nabarmendutako mezu-izenburuetarako eta atal-izenburuetarako.
- Cahuenga — ordezkapena: Charter · eskemak 500 · Produktu mailako izenburuetarako (alboko barrako izenburuak, erregistro-txartelen izenburuak, testu nagusia) serifa apaingarri bereizgarria duen letra-tipoa. Bere pisu ertainak eta lerro-altuera txikiak itxura bereizgarria ematen diote, handiegia sentitu gabe; laranja koloreaz gain, Substack-en nortasuna adierazten duen letra-tipo bakarra da.
- Spectral — ordezkapena: Charter · eskemak 400 · Argitalpen luzeetarako serif letra-tipoa —irakurgeletan eta albiste-jarioetan erabiltzen da, erredakzio-materialen irakurgarritasuna hobetzeko. Lerro arteko tartea apur bat estuago batek (1,20) paragrafoen irakurketa erosoa bermatzen du, erredakzio-geletan ohikoa den trinkotasuna mantenduz.
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | trinko |
| Oinarrizko urratsa | 8px |
| Botoiaren erradioa | 9999px |
| Txartelaren erradioa | 12px |
| Itzalak | ez - itzalen ordez ertzak |
| Atalen artean | 32px |
| Orriaren zabalera | 1200px |
Adimen artifizialak zure webgunea Substack estiloan eraikiko du eta beteko du
- Bete produktu eta argitalpenekin estekaren bidez - Instagram, TikTok, Facebook.
- Transferitu edukia zure gune zaharretik: zehaztu helbidea.
- Diseinu modernoa motor onenean: React ( Next.js) zerbitzariaren errendatzearekin eta SEO optimizazioarekin hasieratik.
- Bilaketa-emaitzetarako eta sare neuronalen gomendioetarako SEO optimizazio guztiz automatizatua.
Estilo antzekoak
- ElevenLabs — Krema koloreko tonu beroetako argazki-saiakera, izenburu sotilekin. Bauhaus estiloko koadernoa: arrautza-oskolaren koloreko papera, tinta beltza eta produktua erakusteko more eta laranja koloreko azentu bakarra.
- Awesomic — Konfetiaren antzeko puntuazio-markak laranja koloreko zink sare editoriala
- Monad — pergamino beroan argitaratutako aldizkari tekniko editoriala
- Dub — Link-en arroz-paper matearen kontrol-panela
- Seline Analytics — Paper epelaren gaineko taula analitiko lasaia
- Notion — Eguerdiko eguzkitan paperezko koaderno epel bat
- Anthropic — Pergamino epelaren gaineko aldizkari zientifikoa: boli koloreko gainazal lasaiak, serifadun editorial-izenburuak eta ekintza beharrezkoa denean bakarrik agertzen den buztinezko azentu bakarra.
- Calendly — Tinta urdin iluna marmol hotzean
- Augen Pro — Appleren aurkezpen zuriak urdin elektriko, kliniko eta arin bat du azentu bakar gisa espazio monokromo batean.
- Antimetal — Krema koloreko paperean argitaratutako kronika editoriala —goiz lasai bat aldizkari zientifiko batean, non neurritasunak konfiantza ematen duen eta serifek lan astuna egiten duten
- Perk — Limoi elektrikoa pergamino-paper epelaren gainean
- Ditto — Eguzki argitan dagoen tailer bat lore basatien laginak sortzen. Krema koloreko gainazal epelak, oinarrizko kolore hori bizia, itsas urdin ilunaren tintak, piezaren atzean loratzen diren kolore organikoen formak.