
Calendly
အေးစက်သော စကျင်ကျောက်ပေါ်တွင် နက်ပြာရောင်မင်
Calendly ဟာ တည်ငြိမ်ပြီး ယုံကြည်မှုရှိတဲ့ စီမံကိန်းရေးဆွဲတဲ့ အလုပ်ခွင်တစ်ခုလို ခံစားရပါတယ်- အသက်ရှူဖို့ နေရာအလုံအလောက်ရှိတဲ့ အဖြူရောင်နီးပါး ပတ္တူတစ်ခု၊ အေးမြတဲ့ မီးခိုးရောင်နောက်ခံမှာ ကြည်လင်တဲ့ အဖြူရောင် ထုတ်ကုန်ကတ်တွေ ပေါလောမျောနေပြီး စာလုံးပုံစံအားလုံးကို စစ်မှန်တဲ့ အနက်ရောင်အစား မှောင်ပြာရောင်မင်နဲ့ ပုံဖော်ထားပါတယ်။ အဓိကအချက်ကတော့ နက်ပြာရောင် (#0b3558) ဖြစ်ပြီး စာသားပေါ်လာတဲ့နေရာတိုင်းမှာ အသုံးပြုပါတယ် - ခေါင်းစဉ်တွေ၊ ခလုတ်တွေ၊ အိုင်ကွန်တွေ၊ လင့်ခ်တွေ - ဒါက interface တစ်ခုလုံးကို နူးညံ့စေပြီး ပုံမှန် SaaS landing page ထက် ပိုနွေးထွေးပြီး ပိုစတိုင်ကျစေပါတယ်။ တောက်ပတဲ့ အပြာရောင်တစ်ခုတည်း (#006bff) ကို အဓိကလုပ်ဆောင်ချက်အားလုံးအတွက် အသုံးပြုထားပြီး ထုတ်ကုန်အပြင်အဆင်တွေထက် ကျော်လွန်တဲ့ အလှဆင်ပန်းရောင်နဲ့ အပြာရောင် splash တွေက ရှုပ်ပွမနေဘဲ နွေးထွေးမှုကို ပေးစွမ်းပါတယ်။ အစိတ်အပိုင်းတွေကို လျော့တွက်ထားပါတယ်- ပါးလွှာတဲ့ 1px ဘောင်တွေ၊ သိမ်မွေ့တဲ့ အပြာရောင်အရိပ်တွေ၊ ကြီးမားတဲ့ 24px ကတ်အချင်းဝက်နဲ့ 8px ခလုတ်ထောင့်တွေက ပေါ့ပေါ့တန်တန်မဟုတ်ဘဲ ရည်ရွယ်ချက်ရှိရှိ ခံစားရစေပါတယ်။
အများဆုံးအကျယ် 1200px၊ အလယ်ဗဟိုတွင်ရှိပြီး ဒက်စ်တော့တွင် အနားသတ်ကျယ်သည်။ အဓိကစခရင်ကို ကော်လံနှစ်ခုခွဲထားသည်- ဘယ်ဘက်ကော်လံတွင် 80px header + body text + stacked login buttons များပါဝင်ပြီး ညာဘက်ကော်လံတွင် နောက်ခံတွင် အလှဆင်ပစ္စည်းများပါရှိသော booking widget card ပါရှိသည်။ အဓိကစခရင်အောက်တွင် Trust logo ပါရှိသော တစ်ခုတည်းသော၊ full-width stripe ရှိသည်။ နောက်ပိုင်းအပိုင်းများသည် အလယ်ဗဟို header blocks (H2 + subtext + optional call to action) အကြား အလှည့်ကျပြောင်းလဲပြီး ထို့နောက် ထုတ်ကုန်ပုံတစ်ပုံစီ၏နောက်တွင် အလှဆင်ပစ္စည်းများပါရှိသော features များကိုဖော်ပြသည့် column နှစ်ခုပါ blocks (text left/product right သို့မဟုတ် product left/text right) တို့ဖြင့် လှည့်ပတ်ပြသသည်။ ကတ် grid များကို ရှားရှားပါးပါးသာအသုံးပြုသည်—layout သည် multi-column grid များအစား paired sections များကို ဘေးချင်းယှဉ်ထားရန် ဦးစားပေးသည်။ အပိုင်းများအကြား အကွာအဝေးမှာ 48 မှ 64px အထိရှိသည်။ navigation သည် ဘယ်ဘက်တွင် logo၊ အလယ်ဗဟိုတွင် menu နှင့် ညာဘက်တွင် call to action အုပ်စုပါရှိသော 64px fixed top bar ဖြစ်သည်။
အဓိက မြင်သာထင်ရှားသော အစိတ်အပိုင်းမှာ ထုတ်ကုန် ဖန်သားပြင်ဓာတ်ပုံများ—ဘွတ်ကင်ပြက္ခဒိန် အသုံးပြုသူ မျက်နှာပြင်၏ ရိုးရှင်းသော ပုံစံငယ်များ—ကျယ်ပြန့်ပြီး လုံးဝန်းသော ထောင့်များပါသည့် ကြည်လင်ပြတ်သားသော အဖြူရောင်ကတ်များပေါ်တွင် ပြသထားသည်။ အလှဆင်ဒီဇိုင်း- ထုတ်ကုန်ကတ်တစ်ခုစီကို သန္တာခရမ်းရောင် (#e55cff) သို့မဟုတ် အပြာရောင် (#0099ff) ၏ နူးညံ့သောအစက်အပြောက်တစ်ခုဖြင့် ဝန်းရံထားပြီး အနည်းငယ် ချိန်ညှိပြီး မှုန်ဝါးနေကာ ပြားချပ်ချပ် ဖန်သားပြင်ဓာတ်ပုံထက် ကော်လာ့ဂျ်အကျိုးသက်ရောက်မှုကို ဖန်တီးပေးသည်။ ဓာတ်ပုံများ မရှိ၊ လူနေမှုပုံစံပုံများ မရှိ—အမြင်အာရုံ အစိတ်အပိုင်းအားလုံးသည် ထုတ်ကုန် အသုံးပြုသူ မျက်နှာပြင်၊ စိတ္တဇ ထင်ရှားသော အသွင်အပြင်ပုံသဏ္ဌာန်များ သို့မဟုတ် ယုံကြည်မှုဘားပေါ်ရှိ အဖြူအမည်း မိတ်ဖက်လိုဂိုများကို ကိုယ်စားပြုသည်။ အိုင်ကွန်များသည် 1.5–2px မျဉ်းအကျယ်ရှိသော မျဉ်းဖြောင့်ဖြစ်ပြီး အဖြူအမည်း၊ မှောင်သောပြာ (Ink Navy) သို့မဟုတ် အပြာရောင် (Signal Blue) ဖြင့် ဖြစ်သည်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Ink Navy
#0b3558— အဓိကစာသား၊ ခေါင်းစဉ်များ၊ အိုင်ကွန်များ၊ လုပ်ဆောင်ရန် လှုံ့ဆော်မှုများအတွက် မှောင်မိုက်သောနောက်ခံ၊ လမ်းညွှန်လင့်ခ်များ။ - Signal Blue
#006bff— အဓိကလုပ်ဆောင်ချက်အတွက် တောင်းဆိုချက် (CTA)၊ တက်ကြွသော လမ်းညွှန်မှု၊ လင့်ခ်အလေးပေးမှု၊ ရွေးချယ်ထားသော အခြေအနေများ
ကြားနေ
- Carbon
#0a0a0a— စာသားကို သန့်စင်သောအနက်ရောင် (fallback) ဖြင့်၊ လိုဂို glyph၊ အိုင်ကွန်ဖြည့်ပါ။ - Slate Gray
#476788— နောက်ထပ် အဓိကစာသား၊ အထောက်အကူပြုစာသား၊ အသံတိတ်ထားသော အညွှန်းများ။ - Mist Gray
#a6bbd1— ပိတ်ထားသော စာသား၊ အလုပ်မလုပ်သော လုပ်ဆောင်ချက် အညွှန်းများ၊ အလင်းအိုင်ကွန် မျဉ်းကြောင်းများ - Cloud
#f8f9fb— စာမျက်နှာကင်းဗတ်စ်၊ အောက်ခြေနောက်ခံ၊ အပိုမျက်နှာပြင် - Paper
#ffffff— ကတ်မျက်နှာပြင်များ၊ မြှင့်တင်ထားသော အကန့်များ၊ မှောင်မိုက်သောနောက်ခံပေါ်ရှိ ခလုတ်စာသား။ - Pebble
#f0f3f8— အိုင်ကွန်များအတွက် နောက်ခံပုံများ၊ ထည့်သွင်းမှုအကွက် shading၊ သိမ်မွေ့သော separator များ၊ hover effect များ။
စာလုံးပုံစံ
၁၂ မှ ၈၀ px အထိ · ၁၀ ဆင့်
- Gilroy — အစားထိုးခြင်း: Manrope · မျဉ်းကြောင်းများ 400, 500, 600, 700 · interface စာသားအားလုံး။ Gilroy သည် ကျယ်ပြန့်သော apertures နှင့် uniform stroke contrast ရှိသော geometric humanist sans-serif တစ်ခုဖြစ်သည်။ ၎င်း၏ bold weights (700) ကို heading များအတွက် အသုံးပြုပြီး 500–600 ကို button များနှင့် subheading များအတွက် အသုံးပြုသည်။ Manrope သို့မဟုတ် Inter ဖြင့် အစားထိုးပါ။
- Gilroy — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400 · ကိုယ်ထည်စာသားနှင့် အထွေထွေရည်ရွယ်ချက် UI အညွှန်းများ - ၄၀၀-ပွိုင့်ဖောင့်အလေးချိန်ကြောင့် စာသားရှည်များကို လေးလံသည်ဟုမခံစားရဘဲ ဖတ်ရလွယ်ကူစေသည်။
- Gilroy — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 500 · ဒုတိယခေါင်းစဉ်များနှင့် အသားပေးဖော်ပြထားသော စာသား - 14/500 ဖောင့်သည် ကတ်ခေါင်းစဉ်များနှင့် inline label များအတွက် အဓိကကိရိယာဖြစ်သည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 8-16px |
| ခလုတ်အချင်းဝက် | 8px |
| ကတ်အချင်းဝက် | 24px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 48-64px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Calendly ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- ElevenLabs — ခေါင်းစဉ်ငယ်များပါရှိသော နွေးထွေးသောခရင်မ်ရောင်ဖြင့် ဓာတ်ပုံစာစီစာကုံးတစ်ပုဒ်။ Bauhaus ပုံစံ မှတ်စုစာအုပ်တစ်အုပ်—ဥခွံရောင်စက္ကူ၊ မင်အနက်ရောင်နှင့် ထုတ်ကုန်ပြသရန်အတွက် ခရမ်းရောင်နှင့် လိမ္မော်ရောင်တစ်ခုတည်းသာ ပါဝင်သည်။
- Awesomic — စက္ကူစများနှင့် ဆင်တူသော လိမ္မော်ရောင် ပုဒ်ဖြတ်အမှတ်အသားများပါသည့် အယ်ဒီတာ့အာဘော် သွပ်ကွက်
- Monad — နွေးထွေးသော စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် နည်းပညာဂျာနယ်
- Dub — Link ရဲ့ မက်တီဆန်စက္ကူ ထိန်းချုပ်ကန့်
- Seline Analytics — ပူနွေးသောစက္ကူပေါ်တွင် တိတ်ဆိတ်ငြိမ်သက်သော ခွဲခြမ်းစိတ်ဖြာရေးစားပွဲ
- Notion — နေ့လည်ခင်းနေရောင်အောက်က နွေးထွေးတဲ့ စက္ကူမှတ်စုစာအုပ်တစ်အုပ်
- Anthropic — နွေးထွေးသော သားရေစက္ကူပေါ်တွင် ရေးသားထားသော သိပ္ပံနည်းကျ လယ်ကွင်းဂျာနယ်တစ်စောင်—တည်ငြိမ်သော ဆင်စွယ်မျက်နှာပြင်များ၊ ခြစ်ရာပါ အယ်ဒီတာ့အာဘော် ခေါင်းစဉ်များနှင့် အရေးယူဆောင်ရွက်မှု လိုအပ်သည့်အခါတွင်သာ ပေါ်လာသည့် တစ်ခုတည်းသော ရွှံ့စေးအနှစ်သာရ။
- Augen Pro — Apple ရဲ့ အဖြူရောင်တင်ဆက်မှုမှာ ဆေးပညာဆန်ပြီး အလေးချိန်မရှိတဲ့ လျှပ်စစ်အပြာရောင်ကို တစ်မူထူးခြားတဲ့အရောင်အဖြစ် အသုံးပြုထားပါတယ်။
- Antimetal — ခရင်မ်စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် မှတ်တမ်းတစ်ခု—သိပ္ပံဂျာနယ်တစ်စောင်တွင် တိတ်ဆိတ်ငြိမ်သက်သော မနက်ခင်းတစ်ခု၊ ထိန်းချုပ်နိုင်စွမ်းက ယုံကြည်မှုကို ဖော်ဆောင်ပေးပြီး serif များက လေးလံသောဝန်ကို လုပ်ဆောင်ပေးသည်။
- Perk — ပူနွေးသော စက္ကူပေါ်တွင် လျှပ်စစ်ထုံး
- Ditto — နေရောင်အောက်က တောပန်းနမူနာတွေကို ဖန်တီးနေတဲ့ အလုပ်ရုံ။ နွေးထွေးတဲ့ ခရင်မ်မျက်နှာပြင်တွေ၊ တက်ကြွတဲ့ အဝါရောင်အောက်ခံအရောင်၊ နက်ရှိုင်းတဲ့ အပြာရောင်မင်တွေ၊ လက်ရာရဲ့နောက်ကွယ်မှာ ပွင့်လန်းနေတဲ့ အော်ဂဲနစ်အရောင်ပုံစံတွေ။
- Officevibe — နွေးထွေးသော ခရင်မ်ရောင်စက္ကူပေါ်တွင် ရေးသားထားသော အယ်ဒီတာ့အာဘော် မဂ္ဂဇင်းတစ်စောင်။ HR စီမံခန့်ခွဲမှုဆိုင်ရာ အတွေးအမြင်ရှိသော ဆောင်းပါးတစ်ပုဒ်ကို ထုတ်ကုန်တစ်ခုအဖြစ် တင်ပြထားသည်—ခေတ်မီ အပြာရောင် မျက်နှာပြင်မှတစ်ဆင့် တိုးတိုးလေး ရေးသားထားသော လက်ရေးဆက် serif ဖောင့်တစ်ခု။