Stripe
အေးခဲထားသောဖန်ပေါ်တွင် အင်ဒီဂိုမင်ဖြင့်ရေးသားထားသော အကောင့်စာအုပ်တစ်အုပ်
Stripe ငွေကြေးဆိုင်ရာတူရိယာတွေအတွက် monochrome ဘာသာစကားကို အသုံးပြုထားပါတယ်- နူးညံ့ပြီး အေးမြတဲ့ အဖြူရောင် ပတ္တူ၊ အပြာရင့်ရောင် ခေါင်းစဉ်တွေ၊ အလှဆင်ထားတဲ့ chrome အစိတ်အပိုင်းတွေ မရှိသလောက်ပါပဲ၊ ပြီးတော့ button၊ link ဒါမှမဟုတ် icon outline အဖြစ် အသုံးပြုနိုင်တဲ့ တောက်ပတဲ့ indigo (#533afd) တစ်ခုတည်းပါ။ စာလုံးပုံစံက အလွန်ပါးလွှာပြီး 300-point weight—56px မှာတောင်—ရှိတာကြောင့် corporate ဆန်တာမျိုးထက် ယုံကြည်မှုရှိရှိ understated ဖြစ်နေပါတယ်။ စာလုံးအကွာအဝေးက အရွယ်အစားတိုးလာတာနဲ့အမျှ သိသိသာသာ လျော့ကျသွားပါတယ်။ ခလုတ်တွေက သေးငယ်ပြီး စတုရန်းပုံစံ (4px) ဖြစ်ပြီး ခရမ်းရောင် fill တွေ ဒါမှမဟုတ် အပါးဆုံး ခရမ်းရောင် outline တွေကို အသုံးပြုထားပါတယ်။ စနစ်က အရိပ်တွေကို လုံးဝရှောင်ရှားပါတယ်။ အတိမ်အနက်ကို elevation ထက် background hues (အဖြူရောင် → #f8fafd → #e5edf5 → ခရမ်းရောင် hues) ပြောင်းလဲခြင်းအားဖြင့် ရရှိပါတယ်။ interface တစ်ခုလုံးက accounting ledger ဒါမှမဟုတ် terminal လိုမျိုး လုပ်ဆောင်ပါတယ်- သိပ်သည်းတဲ့ အချက်အလက်၊ ရှင်းလင်းတဲ့ မျဉ်းကြောင်းတွေ၊ အပိုင်းတွေကြားက ကျယ်ဝန်းတဲ့ နေရာလွတ်နဲ့ အရောင်တွေက လုပ်ဆောင်ချက်တစ်ခု လိုအပ်တဲ့အခါမှသာ ပေါ်လာပါတယ်။
အဖြူရောင်ကင်းဗတ်စ်ပေါ်ရှိ အလယ်ဗဟိုရှိ အကြောင်းအရာကော်လံအတွက် အများဆုံးအကျယ်မှာ ~1320px ဖြစ်သည်။ ဟီးရိုးသည် အရွယ်အစားအပြည့် (56px) တွင် ဘယ်ဘက်ညှိထားသော စာသားဘလောက်တစ်ခုဖြစ်ပြီး အောက်တွင် လုပ်ဆောင်ချက်တောင်းဆိုမှုနှစ်ခုပါရှိပြီး ဟီးရိုးပုံမပါဝင်ပါ။ စာလုံးပုံစံသည် ဟီးရိုးဖြစ်သည်။ အပိုင်းများကို တူညီသော 96px gutters နှင့် 1px #e5edf5 ပိုင်းခြားများဖြင့် ဒေါင်လိုက်စီစဉ်ထားသည်။ အလှည့်ကျ မှောင်/ဖျော့သော အစင်းများ မရှိပါ။ အပိုင်းတစ်ခုစီတွင် ထပ်ခါတလဲလဲပုံစံကို လိုက်နာသည်- စာလုံးကြီးအားလုံးပါသော အပိုင်းငယ်ခေါင်းစဉ် (မီးခိုးရောင်၊ 12px)၊ ထို့နောက် 32-48px ခေါင်းစဉ်၊ ထို့နောက် 22px စာပိုဒ်၊ ထို့နောက် ထုတ်ကုန်ကတ်များ၏ grid (desktop တွင် ကော်လံ ၃ ခု) သို့မဟုတ် visual art ပါသော ကော်လံ ၂ ခုပါ စာသားဘလောက်။ client လိုဂိုများသည် ကျဉ်းမြောင်းသော ဒေါင်လိုက်အစင်းတွင် ဘယ်ဘက်ညှိထားသည်။ footer သည် လင့်ခ်များ၏ ကော်လံများစွာပါသော ကျယ်ပြန့်သော #f8fafd အစင်းတစ်ခုဖြစ်ပြီး ကော်လံများစွာပါသော လင့်ခ်စာရင်းများပါရှိသည်။ အလုံးစုံစည်းချက်သည် နှေးကွေးပြီး တိုင်းတာထားပြီး အဓိကအားဖြင့် စာသားဖြစ်သည်—scroll အရှည်ရှည်သော်လည်း အချက်အလက်သိပ်သည်းဆမှာ နည်းပါးသည်။
ပုံရိပ်များသည် ကန့်သတ်ထားပြီး မှတ်တမ်းရုပ်ရှင်ပုံစံဖြစ်သည်။ စာမျက်နှာအပြည့်ပါ ဓာတ်ပုံများသည် ဖြစ်ရပ်လေ့လာမှုများ (ဥပမာ Hertz အတွက် လေကြောင်းအသွားအလာ ဓာတ်ပုံရိုက်ကူးခြင်း) ပါဝင်သော အပိုင်းများတွင်သာ ပေါ်လာပြီး အပေါ်မှ သို့မဟုတ် သိသာထင်ရှားသောထောင့်များဖြင့် သဘာဝအရောင်များကို အသုံးပြု၍ ရိုက်ကူးထားသည်—duotone သို့မဟုတ် color processing များ မရှိပါ။ ထုတ်ကုန်၏ user interface ၏ screenshot များကို feature card များအတွင်း အသုံးပြုထားပြီး၊ ထောင့်ချွန်များနှင့် ရှင်းလင်းသော နယ်နိမိတ်များဖြင့် ပုံဖော်ထားပြီး device frame များမပါဘဲ ပြသထားသည်။ ပါတနာလိုဂိုများကို ၎င်းတို့၏ကိုယ်ပိုင်အရောင်များဖြင့် ပြသထားပြီး မည်သည့်ကွန်တိန်နာမှ မရှိပါ။ သရုပ်ဖော်ပုံများ၊ 3D render များ သို့မဟုတ် အလှဆင်ထားသော abstract graphic element များ မရှိပါ။ အိုင်ကွန်များသည် တစ်ပြေးညီဖြစ်သည်- အဖြူရောင်နောက်ခံတွင် လိုင်းအလေးချိန် ၁၊ လိုင်းအလေးချိန် ၂၊ ဂျီဩမေတြီမျဉ်းကြောင်းပန်းချီ (chevrons၊ မြားများ၊ checkmarks၊ စာရွက်စာတမ်းသင်္ကေတများ) ပါရှိသည်။ စာမျက်နှာတွင် အဓိကအားဖြင့် စာသားနှင့် အဖြူရောင်နေရာလွတ်များ ပါဝင်ပြီး ရုပ်ပုံများသည် စုစုပေါင်းအမြင်အာရုံဧရိယာ၏ ၃% အောက်သာ နေရာယူထားသည်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Indigo Ink
#533afd— ခရမ်းရောင်ကို ဖြည့်ထားသော ခလုတ်များ၊ ရွေးချယ်ထားသော လမ်းညွှန်အခြေအနေများနှင့် အာရုံစိုက်မှုအခြေပြု ပြောင်းလဲခြင်း အခိုက်အတန့်များအတွက် အသုံးပြုသည်။ - Indigo Hover
#7389ff— ခရမ်းရောင်ကို လင့်ခ်များ၊ တဂ်များနှင့် အတိုကောက်စကားစုများကို မီးမောင်းထိုးပြရန်အတွက် အသုံးပြုသည်။ ၎င်းကို လုပ်ဆောင်ချက်တောင်းဆိုမှုများအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။
ကြားနေ
- Midnight Ink
#061b31— ခေါင်းစဉ်နှင့် ကိုယ်ထည်စာသားသည် အေးမြသော အပြာရောင်ပါသည့် နက်ရှိုင်းသော အနက်ရောင်နီးပါးဖြစ်ပြီး ၎င်းသည် ဖောင့်စနစ်တစ်ခုလုံး၏ အခြေခံအဖြစ် ဆောင်ရွက်ပါသည်။ - Slate
#64748d— မီးခိုးရောင်စာသားသည် လင့်ခ်များ၊ တဂ်များနှင့် အတိုချုံးစကားစုများကို မီးမောင်းထိုးပြသည်။ - Steel
#50617a— နောက်ထပ်စာသားနှင့် အထောက်အကူပြုပစ္စည်းများကို လိုင်စင်ခွဲများတွင်အသုံးပြုသော ကျောက်ပြားနှင့် ခရမ်းရောင်ဖျော့ဖျော့ကြားတွင် ထားရှိသည်။ - Smoke
#839bc8— အလှဆင်ထားသော ခေါင်းစဉ်ကြီးများနှင့် ပူးတွဲပါစာသားများအတွက်၊ ခရမ်းရောင်ဖျော့ဖျော့ကို အသုံးပြုသည် - စာပိုဒ်များတွင် ဘယ်သောအခါမှ မပါဝင်ပါ။ - Pure White
#ffffff— စာမျက်နှာပတ္တူနှင့် ကတ်များ၏ မြင့်တက်နေသော မျက်နှာပြင်များ၊ ကျန်အရာအားလုံးကို တိုင်းတာသည့် မူရင်းနောက်ခံ။ - Mist
#f8fafd— အောက်ခြေနောက်ခံနှင့် အပိုင်းခွဲထားသော အစိတ်အပိုင်းသည် မြင်သာသော နယ်နိမိတ်မရှိသော နေရာများကို ပိုင်းခြားပေးသည့် သိမ်မွေ့သော အေးမြသော အရိပ်တစ်ခုဖြစ်သည်။
စာလုံးပုံစံ
၁၂ မှ ၅၆px အထိ · အဆင့် ၉ ဆင့်
- sohne-var — အစားထိုးခြင်း: Inter Tight (variable · မျဉ်းကြောင်းများ 300, 400 · အင်တာဖေ့စ်တစ်ခုလုံးတွင် အသုံးပြုထားသော ဖောင့်တစ်ခုတည်းမှာ ခေါင်းစဉ်များ၊ ကိုယ်ထည်စာသား၊ လမ်းညွှန်ချက်၊ ခလုတ်များနှင့် အညွှန်းများအတွက်ဖြစ်သည်။ 300 အလေးချိန်သည် မျက်နှာပြင်အရွယ်အစား 56px တွင်ပင် လွှမ်းမိုးထားပြီး ၎င်းသည် ထူးခြားသောအင်္ဂါရပ်တစ်ခုဖြစ်သည်- ခေါင်းစဉ်များသည် အော်ဟစ်မည့်အစား တိုးတိုးလေးဖြစ်ပြီး အသံအတိုးအကျယ်ထက် ထိန်းချုပ်ခြင်းဖြင့် အခွင့်အာဏာကို ထူထောင်သည်။ 400 အလေးချိန်သည် လမ်းညွှန်ချက်နှင့် ခလုတ်စာသားအတွက် 14-16px တွင်သာ ပေါ်လာပြီး အရွယ်အစားသေးငယ်သောနေရာများတွင် ဖတ်ရလွယ်ကူစေရန်အတွက် အပိုဆွဲချက်တစ်ခု လိုအပ်ပါသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ကျယ်ဝန်းသော |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 4px |
| ကတ်အချင်းဝက် | 4px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 96px |
| စာမျက်နှာအကျယ် | 1320px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Stripe ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Ui — မက်တီစက္ကူပေါ်တွင် လက်တွေ့အစီအစဉ်
- monopo saigon — အယ်ဒီတာ့အာဘော် တိတ်ဆိတ်မှုနောက်ကွယ်မှ အရည်နှင့် တောက်ပသော အလင်းရောင်တစ်ခု—အရည်ပျော်နေသော အလင်းရောင်ပေါ်တွင် ပေါလောမျောနေသော တစ်ရောင်တည်းသော အယ်ဒီတာ့အာဘော်ပြခန်း
- Ventriloc — ပူနွေးသောစက္ကူပေါ်ရှိဒေတာ၏ အယ်ဒီတာ့အာဘော်စောင့်ကြည့်ရေးဌာန - တစ်ရောင်တည်းသောတိကျမှုကို မီးမောင်းထိုးပြသည့် လိမ္မော်ရောင်မီးခဲတစ်လုံး
- Hyer Aviation — လေယာဉ်မောင်းခန်းထဲက မှောင်ရီပျိုးစ အချိန်။ ဖျော့ဖျော့ မိုးသောက်ချိန် ကောင်းကင်နဲ့ လေယာဉ်ကိုယ်ထည်အရွယ်အစားရှိတဲ့ serif လိုဂိုတို့ ဆုံတွေ့နေပြီး နွေးထွေးတဲ့ ရွှံ့စေးအရောင် တစ်ခုတည်းက monochrome စတိုင်ကို ဖြိုခွင်းလိုက်ပါတယ်။
- Family — ခရင်မ်စက္ကူပေါ်တွင် နတ်သမီးပုံပြင်မှ ပျံ့နှံ့နေသော စာရွက်တစ်ရွက်
- OFF+BRAND. — ပူနွေးသော စက္ကူပေါ်တွင် တောက်ပသော ဘောလုံးပုံ
- Geniestudio — အနားသတ်ကျယ်ပြီး ဘောပင်ထူထူတစ်ချက်တည်းနဲ့ နူးညံ့တဲ့ နေ့အလင်းရောင်မှတ်စုစာအုပ်တစ်အုပ်
- xAI — ဆေးပြားအနက်ရောင်ပါသော နွေးထွေးသော ခရင်မ်ဓာတ်ခွဲခန်း
- Seed — ဓာတ်ခွဲခန်းဖန်ခွက်အောက်ရှိ သက်ရှိသတ္တဝါ
- Cosmos — ပိတ်ချောထည်များဖြင့် စီတန်းထားပြီး ပိုလာရွိုက်များဖြင့် ချိတ်ဆွဲထားသော ပြခန်းနံရံ
- Cal — မိုနိုခရုမ်းလက်တွေ့ကျမှု၊ လူသားဆန်သောချဉ်းကပ်မှု။ တိကျသော အဖြူအမည်း palette မှတစ်ဆင့် ရှင်းလင်းပြတ်သားမှုနှင့် လုပ်ဆောင်နိုင်စွမ်းကို ဦးစားပေးသော်လည်း ဖော်ရွေသော စာလုံးပုံစံနှင့် လုံးဝန်းသောပုံသဏ္ဍာန်များဖြင့် နူးညံ့စေသော စနစ်။
- T1 Energy — နွေးထွေးသော သားရေစက္ကူပေါ်တွင် ထုတ်လုပ်ရေးစက်ရုံတစ်ခု၏ ပုံဆွဲခြင်းသည် တိတ်ဆိတ်ငြိမ်သက်သော၊ တစ်မူထူးခြားသော မြင်ကွင်းတစ်ခုဖြစ်ပြီး စက်မှုလုပ်ငန်းအတိုင်းအတာနှင့် သိမ်မွေ့သော စာလုံးပုံစံသည် အမှတ်တံဆိပ်တစ်ခုလုံးကို ကိုယ်စားပြုသည်။