Substack
အယ်ဒီတာ့အာဘော်ရုံးခန်းထဲက စားပွဲပေါ်မှာ လိမ္မော်ရောင်မင်ရေးထားတယ်
Substack သည် ကောင်းမွန်စွာဝတ်ဆင်ထားသော သတင်းခန်း dashboard တစ်ခုကဲ့သို့ဖြစ်သည်—အဖြူရောင်ကင်းဗတ်စ်၊ နွေးထွေးသော၊ အနက်ရောင်နီးပါးစာသားနှင့် အကြောင်းအရာဖန်တီးမှု၏ အဆင့်တိုင်းကို အမှတ်အသားပြုထားသော တောက်ပသောလိမ္မော်ရောင်တစ်ခုတည်းဖြင့် အမှတ်အသားပြုထားသည်။ အမြင်အာရုံအဆင့်ဆင့်ကို အလှဆင်ခြင်းထက် သိပ်သည်းဆပေါ်တွင် တည်ဆောက်ထားသည်- မီးခိုးရောင်မျဉ်းပါးများသည် feed element များကို ခွဲခြားထားသည်၊ avatar များသည် သေးငယ်သည်၊ metadata ကို တိတ်ဆိတ်ထားသည်၊ စာဖတ်သူ၏မျက်လုံးကို လိမ္မော်ရောင် call to action၊ လိမ္မော်ရောင် logo၊ လိမ္မော်ရောင် "Subscribe" link နှင့် လိမ္မော်ရောင် "Create" button တို့ကို အာရုံစိုက်ရန် လေ့ကျင့်ထားသည်။ မျက်နှာပြင်များကို ပြားချပ်ချပ်ထားပြီး ကန့်သတ်ချက်မရှိ—ကတ်အရိပ်များ၊ chrome panel element များမရှိ—စာလုံးပုံစံ (custom serif headline font နှင့် တွဲဖက်ထားသော ကျစ်လစ်သော chrome system UI element) သည် အယ်ဒီတာ့အာဘော်၏ အလေးချိန်ကို သယ်ဆောင်စေသည်။ ထူးခြားသောစတိုင်မှာ ကန့်သတ်ထားသော chrome element များနှင့် တက်ကြွသော၊ တစ်ခုတည်းသောအရောင် pop များဖြစ်သည်- ထုတ်ဝေရေးကိရိယာတစ်ခုကဲ့သို့ ခံစားရသော စာဖတ်အက်ပ်တစ်ခုဖြစ်သည်။
ကော်လံသုံးခုပါ desktop layout- fixed left sidebar (~200px၊ icon များနှင့် label များပါသော navigation၊ sticky)၊ center feed (max width ~600px၊ vertical scrolling list of posts) နှင့် fixed right sidebar (~300px၊ search + recommendations + registration)။ center feed သည် အယ်ဒီတာ့အာဘော်၏ အဓိကအချက်ဖြစ်သည်- ကတ်များမပါဘဲ၊ ပို့စ်များကို တစ်ခုနှင့်တစ်ခု အထပ်လိုက်စီထားပြီး အပိုင်းငယ်များကြားတွင် 32px ကွာဟချက်များရှိသည်။ အဓိက banner သည် feed ၏ထိပ်တွင် full-width card တစ်ခုတည်းအဖြစ် တည်ရှိသည်။ ဘယ်ဘက် sidebar တွင် brand logo (overlayed lines များပါသော လိမ္မော်ရောင်ဆိုင်းဘုတ်)၊ navigation item ခြောက်ခုနှင့် အောက်ခြေတွင် full-width လိမ္မော်ရောင် "Create" ခလုတ်တစ်ခု ပါရှိသည်။ ညာဘက် sidebar တွင် search field၊ registration card နှင့် ဖတ်ရှုရန်အတွက် "Up Next" list" ပါရှိသည်။ Navigation သည် အနည်းဆုံးဖြစ်သည်- top bar မရှိ၊ breadcrumbs မရှိပါ။ sidebar သည် navigation ဖြစ်သည်။ Content density မြင့်မားသည်- posts များသည် 12-13px metadata နှင့် 15-19px body text ကိုအသုံးပြုထားပြီး marketplace ၏ card grid ၏ခံစားချက်ထက် သတင်းစာကဲ့သို့သော rhythm ကိုဖန်တီးပေးသည်။
ဓာတ်ပုံများသည် အသုံးပြုသူထုတ်လုပ်ထားသော အကြောင်းအရာဖြစ်သည် (စာရေးသူ avatar များ၊ ပို့စ် thumbnail များ၊ ပို့စ်ပုံများ)—Substack သည် ၎င်း၏ကိုယ်ပိုင်အလှဆင်ဓာတ်ပုံများကို မပေးထားပါ။ အဓိကကတ်သည် နောက်ခံအဖြစ် နောက်ခံအဖြစ် abstract illustrative element များ (ဂျီဩမေတြီပုံသဏ္ဌာန်များ၊ ဘောပင်များနှင့် မှတ်စုများကဲ့သို့သော stylized object များ) ပါရှိသော turquoise မှ အစိမ်းရောင် gradient ကို အသုံးပြုသည်။ ညာဘက် sidebar ရှိ ပို့စ် thumbnail များသည် သေးငယ်သည် (64px)၊ 8px radius တွင် ပိတ်ထားပြီး reading list ၏ preview အဖြစ် လုပ်ဆောင်သည်။ အလုံးစုံ visual language သည် စာသားကိုအခြေခံသည်- interface သည် reading canvas တစ်ခုဖြစ်ပြီး ပုံများသည် atmosphere ဖန်တီးမည့်အစား visual anchors ငယ်များအဖြစ် ဆောင်ရွက်သည်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Signal Orange
#ff6719— လိမ္မော်ရောင်ကို အလှဆင်အသေးစိတ်အချက်အလက်များအတွက် ဒုတိယအရောင်အဖြစ်နှင့် ရှားရှားပါးပါး အချက်ပြမှုများကို မီးမောင်းထိုးပြရန်အတွက် အသုံးပြုသည်။ ၎င်းကို လုပ်ဆောင်ရန် လှုံ့ဆော်မှုများအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။
ကြားနေ
- Ink
#363737— ကိုယ်ထည်စာသား—အဓိကစာသား၊ ခေါင်းစဉ်များ၊ ပို့စ်ခေါင်းစဉ်များ၊ အချိန်တံဆိပ်များနှင့် စာရေးသူအမည်များ၊ ပိုမိုလွယ်ကူစွာဖတ်ရှုနိုင်ရန်အတွက် #၀၀၀ အစား နွေးထွေးပြီး အနက်ရောင်နီးပါးဖြစ်သည်။ - Paper
#ffffff— စာမျက်နှာကင်းဗတ်စ်၊ ကတ်မျက်နှာပြင်များ၊ အဝင်အကွက်များနှင့် လမ်းညွှန်နောက်ခံတို့သည် အင်တာဖေ့စ်၏ အများစုကို နေရာယူထားသော အဓိကမျက်နှာပြင်များဖြစ်သည်။ - Charcoal
#232525— ရွေးချယ်မှုအဆင့်မြင့်မားသော နောက်ထပ်စာသားနှင့် လင့်ခ်များအတွက် မောက်စ်တင်ပါ။ ကုဒ်ဘလောက်များနှင့် ရွေးချယ်မှုဘလောက်များအတွက် Ink မုဒ်ထက် ပိုနက်ရှိုင်းသည်။ - Stone
#777777— ဒုတိယ UI အစိတ်အပိုင်းများ၊ ပိုင်းခြားကိရိယာများနှင့် အသံတိတ်အညွှန်းများအတွက် ကြားနေအရောင်ကို ပံ့ပိုးပေးပါသည်။ ၎င်းကို လုပ်ဆောင်ချက်တောင်းဆိုမှုများအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။ - Ash
#b6b6b6— အနားသတ်မျဉ်းပါးများ၊ ခလုတ်များ၏ အနားသတ်များ၊ အိုင်ကွန်များ၏ အနားသတ်များ၊ ပိတ်ထားသော ထိန်းချုပ်မှုများပေါ်ရှိ အနားသတ်များ။ - Mist
#c8c8c8— ပိုင်းခြားထားသောမျဉ်းများ၊ အိုင်ကွန်များအတွက် မမြင်သာသောနောက်ခံ၊ အရိုးစုပုံစံဖြင့် ဗလာဆဲလ်များကို ဖြည့်ခြင်း။
စာလုံးပုံစံ
၁၂ မှ ၃၂px အထိ · အဆင့် ၅ ဆင့်
- system-ui — အစားထိုးခြင်း: -apple-system · မျဉ်းကြောင်းများ 400, 500, 600 · အသုံးပြုသူမျက်နှာပြင်နှင့် body text အတွက် အဓိကဖောင့်ကို navigation labels၊ ခလုတ်များ၊ မက်ဆေ့ချ်စာသား၊ metadata၊ input fields နှင့် interface element အားလုံးအတွက် အသုံးပြုသည်။ metadata အတွက် 12-13px နှင့် body text အတွက် 15-19px ရှိသော ကျစ်လျစ်သော အရွယ်အစားများသည် သိပ်သည်းသော news feed ၏ ခံစားချက်ကို ဖန်တီးပေးသည်။ body text အတွက် အလေးချိန်မှာ 400၊ navigation element များနှင့် button labels အတွက် 500 နှင့် highlight လုပ်ထားသော မက်ဆေ့ချ်ခေါင်းစဉ်များနှင့် section headings အတွက် 600 ဖြစ်သည်။
- Cahuenga — အစားထိုးခြင်း: Charter · မျဉ်းကြောင်းများ 500 · ထုတ်ကုန်အဆင့် ခေါင်းစဉ်များ (ဘေးဘား ခေါင်းစဉ်များ၊ မှတ်ပုံတင်ကတ် ခေါင်းစဉ်များ၊ အဓိက စာသား) အတွက် ထူးခြားသော အလှဆင် serif ဖောင့်။ ၎င်း၏ အလယ်အလတ် အလေးချိန်နှင့် အနည်းငယ် မျဉ်းအမြင့်ကြောင့် လေးလံသည်ဟု မခံစားရဘဲ ထူးခြားသော အသွင်အပြင်ကို ပေးစွမ်းသည်။ လိမ္မော်ရောင်အပြင် Substack ၏ လက္ခဏာကို ညွှန်ပြသည့် တစ်ခုတည်းသော ဖောင့်ဖြစ်သည်။
- Spectral — အစားထိုးခြင်း: Charter · မျဉ်းကြောင်းများ 400 · ရှည်လျားသော ပို့စ်များအတွက် serif ဖောင့်တစ်ခု—စာဖတ်ခန်းများနှင့် သတင်းဖိဒ်အကြောင်းအရာများ၏ ဖတ်ရှုရလွယ်ကူမှုကို မြှင့်တင်ရန်အတွက် အသုံးပြုသည်။ အနည်းငယ်ကျဉ်းမြောင်းသော စာကြောင်းအကွာအဝေး (1.20) သည် သတင်းခန်းများ၏ ပုံမှန်ကျစ်လစ်မှုကို ထိန်းသိမ်းထားစဉ်တွင် စာပိုဒ်ဖတ်ရှုခြင်းကို သက်တောင့်သက်သာရှိစေသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 9999px |
| ကတ်အချင်းဝက် | 12px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 32px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Substack ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- ElevenLabs — ခေါင်းစဉ်ငယ်များပါရှိသော နွေးထွေးသောခရင်မ်ရောင်ဖြင့် ဓာတ်ပုံစာစီစာကုံးတစ်ပုဒ်။ Bauhaus ပုံစံ မှတ်စုစာအုပ်တစ်အုပ်—ဥခွံရောင်စက္ကူ၊ မင်အနက်ရောင်နှင့် ထုတ်ကုန်ပြသရန်အတွက် ခရမ်းရောင်နှင့် လိမ္မော်ရောင်တစ်ခုတည်းသာ ပါဝင်သည်။
- Awesomic — စက္ကူစများနှင့် ဆင်တူသော လိမ္မော်ရောင် ပုဒ်ဖြတ်အမှတ်အသားများပါသည့် အယ်ဒီတာ့အာဘော် သွပ်ကွက်
- Monad — နွေးထွေးသော စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် နည်းပညာဂျာနယ်
- Dub — Link ရဲ့ မက်တီဆန်စက္ကူ ထိန်းချုပ်ကန့်
- Seline Analytics — ပူနွေးသောစက္ကူပေါ်တွင် တိတ်ဆိတ်ငြိမ်သက်သော ခွဲခြမ်းစိတ်ဖြာရေးစားပွဲ
- Notion — နေ့လည်ခင်းနေရောင်အောက်က နွေးထွေးတဲ့ စက္ကူမှတ်စုစာအုပ်တစ်အုပ်
- Anthropic — နွေးထွေးသော သားရေစက္ကူပေါ်တွင် ရေးသားထားသော သိပ္ပံနည်းကျ လယ်ကွင်းဂျာနယ်တစ်စောင်—တည်ငြိမ်သော ဆင်စွယ်မျက်နှာပြင်များ၊ ခြစ်ရာပါ အယ်ဒီတာ့အာဘော် ခေါင်းစဉ်များနှင့် အရေးယူဆောင်ရွက်မှု လိုအပ်သည့်အခါတွင်သာ ပေါ်လာသည့် တစ်ခုတည်းသော ရွှံ့စေးအနှစ်သာရ။
- Calendly — အေးစက်သော စကျင်ကျောက်ပေါ်တွင် နက်ပြာရောင်မင်
- Augen Pro — Apple ရဲ့ အဖြူရောင်တင်ဆက်မှုမှာ ဆေးပညာဆန်ပြီး အလေးချိန်မရှိတဲ့ လျှပ်စစ်အပြာရောင်ကို တစ်မူထူးခြားတဲ့အရောင်အဖြစ် အသုံးပြုထားပါတယ်။
- Antimetal — ခရင်မ်စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် မှတ်တမ်းတစ်ခု—သိပ္ပံဂျာနယ်တစ်စောင်တွင် တိတ်ဆိတ်ငြိမ်သက်သော မနက်ခင်းတစ်ခု၊ ထိန်းချုပ်နိုင်စွမ်းက ယုံကြည်မှုကို ဖော်ဆောင်ပေးပြီး serif များက လေးလံသောဝန်ကို လုပ်ဆောင်ပေးသည်။
- Perk — ပူနွေးသော စက္ကူပေါ်တွင် လျှပ်စစ်ထုံး
- Ditto — နေရောင်အောက်က တောပန်းနမူနာတွေကို ဖန်တီးနေတဲ့ အလုပ်ရုံ။ နွေးထွေးတဲ့ ခရင်မ်မျက်နှာပြင်တွေ၊ တက်ကြွတဲ့ အဝါရောင်အောက်ခံအရောင်၊ နက်ရှိုင်းတဲ့ အပြာရောင်မင်တွေ၊ လက်ရာရဲ့နောက်ကွယ်မှာ ပွင့်လန်းနေတဲ့ အော်ဂဲနစ်အရောင်ပုံစံတွေ။