Letters
ပြင်ပဆေးခန်းတစ်ခုတွင် မနက်ခင်းချိန်းဆိုမှုတစ်ခု—နူးညံ့သော အပြာရောင်မျက်နှာကြက်အောက်ရှိ ပိုးသတ်ထားသော အဖြူရောင်စားပွဲတစ်ခု၊ အပြာရောင်ခွဲစိတ်ကိရိယာများဖြင့် ပြန့်ကျဲနေသည်
Letters သည် ဆေးဘက်ဆိုင်ရာ စာရေးသားသည့်ကိရိယာတစ်ခုဖြစ်ပြီး တည်ငြိမ်ပြီး ဆေးခန်းဆန်သောလေထုကို ဖန်တီးပေးသည့် gradient open-sky header—နူးညံ့ပြီး လေထုဆန်သော အပြာရောင်အစင်း—ဖြင့်စတင်ကာ သန့်ရှင်းသော အဖြူရောင်အလုပ်ခွင်သို့ ကူးပြောင်းသည်။ စနစ်ကို monochrome ပုံစံဖြင့် ဒီဇိုင်းထုတ်ထားသည်- သန့်ရှင်းသော အဖြူရောင်ကင်းဗတ်စ်၊ အနက်ရောင်နီးပါးစာသား (#070709)၊ မှောင်မိုက်သော ဆေးပြားပုံသဏ္ဍာန် လှုပ်ရှားမှုတောင်းဆိုချက်များနှင့် အသိမ်မွေ့ဆုံးအရိပ်များပေါ်တွင် ပေါလောမျောနေသော လုံးဝိုင်းသောကတ်များ။ တောက်ပသော အပြာရောင်တစ်ခုတည်း (#2597d0) ကို လုပ်ဆောင်နိုင်သော ပုဒ်ဖြတ်ပုဒ်ရပ်များ—အိုင်ကွန်များ၊ မိုက်ခရိုဂရပ်ဖစ်များ၊ လှိုင်းပုံစံကစားသမားများ—အတွက် သီးသန့်ထားရှိပြီး ခလုတ်များ သို့မဟုတ် ကြီးမားသောဖြည့်မှုများအတွက် ဘယ်သောအခါမှ အသုံးမပြုပါ။ typography သည် မျက်နှာပြင်အရွယ်အစားကြီးများတွင် ရန်လိုသော အနုတ်လက္ခဏာစာလုံးအကွာအဝေး (-0.04em at 80px) ရှိသော geometric humanist sans-serif တစ်ခုဖြစ်သည့် Open Runde ကို အသုံးပြုထားပြီး ခေါင်းစီးများကို ယုံကြည်မှုရှိသော ဘလောက်များအဖြစ် ချုံ့ထားသည်။ အစိတ်အပိုင်းများသည် ဆေးဘက်ဆိုင်ရာကိရိယာတစ်ခုကဲ့သို့ ပေါ့ပါးသည်ဟု ခံစားရသည်- ပါးလွှာသော bezels၊ ကျယ်ဝန်းသောကတ်အကွာအဝေး၊ ဆေးပြားပုံသဏ္ဍာန်ခလုတ်များနှင့် ကောင်းကင်ပုံသဏ္ဍာန်ခေါင်းစီးသည် စိတ်ခံစားမှုဆိုင်ရာအလုပ်ကို လုပ်ဆောင်နိုင်စေမည့် elevation ကို လျှို့ဝှက်စွာအသုံးပြုထားသည်။
ကောင်းကင်ပြာရောင် gradient ပင်မစာမျက်နှာသည် စာမျက်နှာ၏ အကျယ်တစ်ခုလုံးကို ဖုံးလွှမ်းထားပြီး အလယ်ဗဟိုတွင် ခေါင်းစဉ်နှင့် စာသားအောက်ခံတစ်ခုပါရှိပြီး အောက်တွင် call-to-action ခလုတ်တစ်ခုပါရှိသည်။ ၎င်းသည် အပိုင်းများအကြား ကျယ်ဝန်းသော အကွာအဝေး (80-120px) ရှိသော အဖြူရောင် အကြောင်းအရာဧရိယာသို့ ချောမွေ့စွာ ကူးပြောင်းသည်။ Feature အပိုင်းများသည် အချိုးအစားတူညီသော ကြီးမားသော၊ လုံးဝန်းသော ကတ်များ (18-32px အချင်းဝက်) ပါဝင်သော ကော်လံနှစ်ခုပါ grid ကို အသုံးပြုသည်။ အပိုင်းခေါင်းစဉ်များကို ကတ် grid အထက်ရှိ ကော်လံတစ်ခုတည်းတွင် အမြဲတမ်း အလယ်ဗဟိုတွင် ထားရှိသည်။ Navigation သည် အလယ်ဗဟိုတွင် လင့်ခ်များနှင့် ညာဘက်ချိန်ညှိထားသော login လုပ်ဆောင်ချက်များပါရှိသော ပုံသေအဖြူရောင် အပေါ်ဘားတစ်ခုဖြစ်သည်။ အလုံးစုံစည်းချက်သည် တစ်ခုတည်းသော၊ လေထုဆန်သော အဓိကအစင်းဖြစ်ပြီး အဖြူရောင်နှင့် #f5f5f5 အပိုင်းများကို ဒေါင်လိုက် အသက်ရှူရန်နေရာဖြင့် အပြန်အလှန်ပြောင်းလဲနေသည်။ ဘေးဘား၊ mega-menu၊ asymmetrical layout များ မရှိပါ။ စာမျက်နှာသည် တည်ငြိမ်ပြီး symmetrical column ကဲ့သို့ ခံစားရသည်။
အမြင်အာရုံဒီဇိုင်းသည် ထုတ်ကုန်၏ user interface ပေါ်တွင် လုံးဝနီးပါး အာရုံစိုက်ထားသည် - လူနေမှုပုံစံဓာတ်ပုံများ၊ abstract 3D render များ မပါဝင်ပါ။ အမြင်အာရုံဘာသာစကားကို အက်ပ်၏ မူရင်း interface ကိုပြသသည့် ထုတ်ကုန်ကတ်များပေါ်တွင် အခြေခံ၍ တည်ဆောက်ထားသည်- စာရွက်စာတမ်းများ၏ "Before" နှင့် "After" နှိုင်းယှဉ်ချက်၊ အစက်ချထားသော ဘောင်ပါသည့် loading area နှင့် waveform ပုံစံရှိ audio player တို့ဖြစ်သည်။ တစ်ခုတည်းသော လေထုအမြင်အာရုံဒြပ်စင်မှာ အဓိကပုံရှိ ကောင်းကင် gradient ဖြစ်သည်။ အိုင်ကွန်များသည် ပြားချပ်ချပ်၊ တစ်ရောင်တည်း #2597d0 မျဉ်းအိုင်ကွန်များ (စာအိတ်၊ မိုက်ခရိုဖုန်း၊ အမှန်ခြစ်အမှတ်အသား) ဖြစ်ပြီး ဖြည့်စွက်ထားသော ကွဲပြားမှုများမပါဝင်ပါ။ သရုပ်ဖော်ပုံစံကို ကန့်သတ်ထားသည်- ထုတ်ကုန် mockup များကို အဖြူရောင်နောက်ခံတွင် ပြသထားပြီး၊ အနက်ကိုဖန်တီးရန် အနည်းငယ်လှည့်ထားပြီး ဘယ်တော့မှ စောင်းမနေပါ။ လက်ရေးဖောင့် (The Doctor) သည် "Before" ကတ်ပေါ်ရှိ ဆေးခန်းလက်ရေးကို နှိုးဆွရန်သာ အသုံးပြုသည့် တစ်ခုတည်းသော အော်ဂဲနစ်/လက်မှုဒြပ်စင်ဖြစ်သည်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Surgical Blue
#2597d0— အိုင်ကွန်များ၊ မိုက်ခရိုဖုန်းအိုင်ကွန်၊ အသံလှိုင်းဖွင့်စက်နှင့် လုပ်ဆောင်ချက်အသေးစား အသားပေးဖော်ပြချက်များသည် interface တစ်လျှောက်တွင် တစ်ခုတည်းသော chromatic note ကို ဖန်တီးပေးသည်။
ကြားနေ
- Obsidian
#070709— ကိုယ်ထည်မိတ္တူ၊ ဖြည့်ထားသော call-to-action ခလုတ်များနှင့် မှောင်မိုက်သော UI အစိတ်အပိုင်းများ—အဖြူရောင်နောက်ခံနှင့် ဆန့်ကျင်ဘက်ကို ပျော့ပျောင်းစေရန်အတွက် သန့်စင်သော #၀၀၀ အစား အနက်ရောင်နီးပါးကို ရွေးချယ်ထားသည်။ - Paper White
#ffffff— စာမျက်နှာနောက်ခံ၊ ကတ်မျက်နှာပြင်များနှင့် ခလုတ်စာသားများသည် အဓိကဒြပ်စင်အောက်ရှိ အပိုင်းအားလုံးအတွက် အဓိကကင်းဗတ်စ်ဖြစ်သည်။ - Cloud Gray
#f5f5f5— အပိုကတ်မျက်နှာပြင်များနှင့် အပိုင်းနောက်ခံများသည် လုပ်ဆောင်နိုင်သော ဘလောက်များကို အဓိကကင်းဗတ်မှ ခွဲထုတ်ထားသည်။ - Sky Tint
#d7e6f5— ကတ်ထူပြားဘောင်ရဲ့အရိပ်နဲ့ မျက်နှာပြင်ရဲ့ မသိသာတဲ့ အပြာရောင်က မီးခိုးရောင်အစား လေထုခံစားချက်ကို ဖန်တီးပေးပါတယ်။ - Charcoal
#60606c— အဓိကစာသား၊ ဒုတိယစာသားနှင့် မှုန်ဝါးနေသော ဘောင်များ - ခေါင်းစဉ်မဟုတ်သော အကြောင်းအရာအတွက် အဓိကကြားနေအရောင်။ - Slate
#8b8b8b— စာသားအနည်းငယ်နှင့် အသက်မဝင်သော နယ်နိမိတ်အခြေအနေများ - မသန်စွမ်းသူများအတွက် တည်နေရာများကို ညွှန်ပြရန်နှင့် လက်လှမ်းမီမှုကို သေချာစေရန် အသုံးပြုသည်။
စာလုံးပုံစံ
၁၂ မှ ၈၀ px အထိ · အဆင့် ၈ ဆင့်
- sans-serif — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 700 · sans-serif - ထုတ်ယူထားသောဒေတာတွင်တွေ့ရှိရသော်လည်း AI မှဖော်ပြမထားပါ။
- Open Runde — အစားထိုးခြင်း: Inter Tight · မျဉ်းကြောင်းများ 400, 500, 600, 700, 900 · ခေါင်းစဉ်များနှင့် လမ်းညွှန်မှုအတွက် အဓိကဖောင့်မှာ ဂျီဩမေတြီလူသားဝါဒဖြစ်ပြီး စာလုံးအရွယ်အစားကြီးများတွင် အကွာအဝေးကျဉ်းမြောင်းသည်။ -0.04em သည် 80px တွင် ခေါင်းစဉ်ကို တစ်ခုတည်းသော၊ ယုံကြည်မှုရှိသော ဘလောက်အဖြစ် ချုံ့ပေးသည်။ ခေါင်းစဉ်များ၊ လမ်းညွှန်မှုနှင့် စာသားကြီးများအားလုံးအတွက် အသုံးပြုပါ။
- Inter — အစားထိုးခြင်း: system-ui · မျဉ်းကြောင်းများ 400, 500 · ဒုတိယစာကိုယ်ထည်နှင့် UI စာသား – ခေါင်းစဉ်ငယ်များ၊ လမ်းညွှန်ဒြပ်စင်များနှင့် ပိုမိုကြားနေဖတ်ရှုမှုစည်းချက်လိုချင်သည့် inline လင့်ခ်များအတွက် အသုံးပြုသည်။ အဆင့်ဆင့်ဆန့်ကျင်ဘက်ဖြစ်အောင် ဖန်တီးရန် Open Runde နှင့် တွဲဖက်အသုံးပြုသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 12-16px |
| ခလုတ်အချင်းဝက် | 100px |
| ကတ်အချင်းဝက် | 18px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 80-120px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Letters ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Integrated Biosciences — သန်းခေါင်ယံတွင် ဇီဝအလင်းဓာတ်ခွဲခန်း
- Mintlify — ဖန်စားပွဲပေါ်က တိမ်ဥယျာဉ်။ လက်ဖြင့်ရေးဆွဲထားသော ကောင်းကင်နှင့် မှတ်တမ်းရုပ်ရှင်ကို အတူတကွ ဘောင်ခတ်ထားသည် - စာမျက်နှာသည် ဘုန်းကြီးကျောင်း၏ အဖြူရောင်အဖြစ် မှေးမှိန်မသွားမီ အရောင်နှင့် အယူအဆတို့ ထိပ်တိုက်တွေ့သည့် တစ်ခုတည်းသောနေရာ။
- Gleap — ဂရပ်ဖိုက်အသားပေးများဖြင့် နွေးထွေးသောခရင်မ်ရောင်များဖြင့် အလှဆင်ထားသော အလုပ်ခွင်တစ်ခု—ပိတ်ချောထည်ဗိသုကာလက်ရာပေါ်တွင် မှိန်ဖျော့ဖျော့အနက်ရောင်မင်စက်များ ပေါလောမျောနေသယောင်ရှိသည့် စတူဒီယိုတစ်ခု။
- Render — ဒီဇိုင်းကို brushed aluminum ဖြင့် ပြုလုပ်ထားသည်။ interface သည် သန့်ရှင်းသပ်ရပ်သော geometric အင်ဂျင်နီယာစာရွက်စာတမ်းတစ်ခုကဲ့သို့ ခံစားရသည် - အဖြူရောင်နေရာလွတ်၊ ပါးလွှာသောမျဉ်းကြောင်းများနှင့် လုပ်ဆောင်ချက်ကို အာရုံစိုက်စေသော ခရမ်းရောင်မျဉ်းကြောင်းတစ်ခု။
- Grafbase — အေးသောစကျင်ကျောက်ပေါ်တွင် အင်ဂျင်နီယာပုံဆွဲခြင်း
- Slash — ရွှေချထားသော စာရင်းဇယားများပါသည့် သန်းခေါင်ယံ သေတ္တာ
- Modal — မှောင်မိုက်နေသော ဆာဗာအခန်းရှိ ဖော့စဖောရက်စ် တာမီနယ်တစ်ခု - တစ်ခုတည်းသော အလင်းရောင်ရင်းမြစ်မှာ တောက်ပသော အစိမ်းရောင်ဖြစ်သည်
- Whimsical — လာဗင်ဒါနောက်ခံပေါ်တွင် ကြွယ်ဝသော ပလမ်မင်—နည်းပညာပိုင်းဆိုင်ရာ အဖြူရောင်ဘုတ်အဖြစ်လည်း အသုံးပြုနိုင်သော ဖန်တီးမှုစတူဒီယိုမှတ်စုစာအုပ်။
- AgentQL — ညအချိန်တွင် ဆိပ်ကမ်းပေါ်ရှိ မြောက်ပိုင်းအလင်းရောင်များ
- Alveos One — မြစ်ကျောက်တုံးများဖြင့် ပြုလုပ်ထားသော သက်တောင့်သက်သာရှိသော ခိုလှုံရာနေရာတစ်ခု - တိတ်ဆိတ်ငြိမ်သက်ပြီး ခရင်မ်ရောင်ဖြင့် အလင်းရောင်ရှိသော တရားထိုင်ခန်းတစ်ခုဖြစ်ပြီး နူးညံ့သော ပယင်းရောင်တွင် ဂရပ်ဖိုက်အရာဝတ္ထုတစ်ခု ရှိနေသည်။
- GitHub — ဇီဝအလင်းပြန်နိုင်သော ထိန်းချုပ်မှတ်များပါရှိသော အာကာသ အမိန့်ပေးခုံတစ်ခု—အစိမ်းရောင်အလင်းတစ်ခုတည်းက ရှေ့သို့လမ်းညွှန်ပြသည့် မှောင်မိုက်ပြီး လေထုဆန်သော အလုပ်ခွင်တစ်ခု။
- Buddy — ဂရပ်စက္ကူပေါ်ရှိ အင်ဂျင်နီယာပုံ။ အဖြူရောင်ပုံဆွဲမျက်နှာပြင်ကို မမြင်သာသောဇယားကွက်ဖြင့် မှတ်သားထားပြီး အနက်ရောင်မင်ဖြင့် ရေးဆွဲထားပြီး၊ ဖလိုရိုဆင့်ထုံးအစိမ်းရောင် အမှတ်အသားများနှင့် ရောင်စုံရောင်ပြေး မျဉ်းကြောင်းများဖြင့် ဖော်ပြထားသည်။