Column
အေးမြတဲ့ မိုးသောက်ချိန်အောက်မှာ မှောင်မိုက်တဲ့ အပြာရောင် စာရင်းဇယားတစ်ခု
Column က အဖြူရောင်နီးပါးနောက်ခံပေါ်မှာ နက်ရှိုင်းပြီး အဖွဲ့အစည်းဆိုင်ရာ ရေတပ်ပြာရောင်ကို အသုံးပြုထားပါတယ်- စာမျက်နှာက ပထမဦးစွာ ခိုင်မာတဲ့ ဘဏ်လုပ်ငန်းထုတ်ကုန်မျက်နှာပြင်လို ခံစားရပြီး ဒုတိယအနေနဲ့ developer ကစားကွင်းလို ခံစားရပါတယ်။ brand အရောင်က တစ်ခုတည်းသောအရောင်မဟုတ်ဘဲ လိုက်ဖက်ညီတဲ့အတွဲတစ်ခုပါ - ရေတပ်ပြာရောင် #111a4a က လေးနက်တဲ့ဖွဲ့စည်းပုံအတွက်၊ mint green #44b48b က data နဲ့ code အတွက် - ပြီးတော့ Brex card လိုမျိုး high-intensity accent surface တွေအတွက် သီးသန့်ထားတဲ့ နွေးထွေးတဲ့လိမ္မော်ရောင်တစ်ခုတည်း (#ec652b) ကို သီးသန့်ထားပါတယ်။ typography ကို SuisseIntl က အဓိကထားပြီး 300 (links) မှ 600 (display) အထိ အလေးချိန်အပိုင်းအခြားတစ်ခုလုံးမှာ အသုံးပြုတဲ့ geometric sans serif တစ်ခုဖြစ်ပြီး system ကို fintech ကုမ္ပဏီအများစုမှာမရှိတဲ့ သပ်ရပ်ပြီး အယ်ဒီတာ့အာဘော်ပုံစံကို ပေးစွမ်းပါတယ်။ ကတ်တွေက ကြီးမားတဲ့ အဖြူရောင်မျက်နှာပြင်တွေပေါ်မှာ သိမ်မွေ့တဲ့၊ အလွှာလိုက်အရိပ်တွေနဲ့ ပေါလောမျောနေပါတယ်။ interface element အများစုက ပြားချပ်ချပ်ဖြစ်ပြီး အနက်က ကတ်က ရုပ်ပိုင်းဆိုင်ရာအရာဝတ္ထုတစ်ခုလို ခံစားရမယ့်နေရာမှာပဲ ပေါ်လာပါတယ် (transaction widgets၊ product mockups)။ ကုဒ်နဲ့ ငွေကြေးဆိုင်ရာဒေတာတွေကို monochrome၊ seafoam အရောင်နဲ့ တင်ပြထားပါတယ် - ဒါက အင်ဂျင်နီယာတွေအတွက် အင်ဂျင်နီယာတွေ တည်ဆောက်ထားတဲ့ ဘဏ်တစ်ခုဖြစ်ကြောင်း အမြင်အာရုံဆိုင်ရာ လက္ခဏာတစ်ခုပါ။
စာမျက်နှာဖွဲ့စည်းပုံသည် အကျယ်အပြည့်ရှိပြီး အလယ်ဗဟိုတွင် ကျယ်ပြန့်သော ဘေးအနားသတ်များပါရှိသည် (ဒက်စ်တော့တွင် ၆၄-၁၅ စင်တီမီတာ)။ အဓိကမျက်နှာပြင်သည် ပိုင်းခြားထားသော အပြင်အဆင်ဖြစ်သည်- ခေါင်းစဉ်နှင့် လုပ်ဆောင်ချက်ခေါ်ဆိုမှုများကို ၂၅ စင်တီမီတာတွင် ဘယ်ဘက်တွင် ချိန်ညှိထားပြီး၊ floating transaction widget ကို ညာဘက်တွင် ၅၅ စင်တီမီတာတွင် halftone မြေပုံနောက်ခံဖြင့် ထားရှိသည်။ အဓိကမျက်နှာပြင်အောက်တွင်၊ အပိုင်းများသည် အဖြူရောင် (၄ စင်တီမီတာ) နှင့် အဖြူရောင်ကင်းဗတ်စ် (၅ စင်တီမီတာ) အကြား ၆ စင်တီမီတာ ဒေါင်လိုက် gutters များဖြင့် တစ်လှည့်စီရှိသည်။ အကြောင်းအရာကို ကော်လံ ၆ ခုပါ grid တစ်ခုဖြင့် စီစဉ်ထားသည်- စာသားဘလောက်များသည် ကော်လံ ၄ ခု (၇ စင်တီမီတာ) တွင် နေရာယူထားပြီး၊ ရုပ်ပုံ/ထုတ်ကုန်ကတ်များသည် ကော်လံ ၅-၆ ခုတွင် နေရာယူထားပြီး grid မှ တမင်တကာ offset ရှိသည်။ အင်္ဂါရပ်များကို ဖော်ပြသော အပိုင်းများသည် ကော်လံ ၂ ခုပါ အပြင်အဆင်ကို အသုံးပြုသည်- ဘယ်ဘက်တွင် စာသား၊ ညာဘက်တွင် ထုတ်ကုန်။ ယုံကြည်မှုစာရင်းအင်းအပိုင်းကို စာမျက်နှာ၏ အကျယ်အပြည့်တစ်လျှောက် ကော်လံ ၄ ခုပါ grid အဖြစ် ပိုင်းခြားထားသည်။ ဖောက်သည်လိုဂိုများကို ၄၈px gutters ပါသော အလယ်ဗဟိုတွင် အတန်းတစ်ခုတည်းတွင် တည်ရှိသည်။ အောက်ခြေတွင် ကျစ်လျစ်သော ကော်လံနှစ်ခုပါ အပြင်အဆင်ရှိသည်။ Navigation က main screen ပေါ်က fixed, 62px အမြင့်ရှိတဲ့ transparent top bar တစ်ခုဖြစ်ပြီး scroll လုပ်လိုက်ရင် အဖြူရောင်အဖြစ် ပြောင်းလဲသွားမယ့် background က မှုန်ဝါးနေပါတယ်။ sidebar ဒါမှမဟုတ် mega-menu မရှိပါဘူး။ dropdown တွေက ရိုးရှင်းတဲ့ arrow-style menu တွေပါ။
အမြင်အာရုံပုံစံက minimalist ဖြစ်ပြီး လုပ်ဆောင်နိုင်စွမ်းရှိပါတယ်—Column က stock photography ကို လုံးဝရှောင်ရှားပါတယ်။ အမြင်အာရုံဘာသာစကားကို အရင်းအမြစ်သုံးခုပေါ်မှာ တည်ဆောက်ထားပါတယ်- (1) SVG data illustrations၊ အထူးသဖြင့် indigo မှ orange မှ turquoise အထိ gradient နဲ့ ဖန်တီးထားတဲ့ dotted halftone ကမ္ဘာ့မြေပုံ၊ အဓိက element နောက်ကွယ်မှာ global scale atmosphere ကို ဖန်တီးပေးပါတယ်။ (2) product card layouts—အကောင့်လက်ကျန်ငွေ၊ transfer details နဲ့ JSON code snippets တွေကို white card တွေမှာ ပြသထားတဲ့ floating widgets၊ (3) chart visualizations—trust/statistics section မှာ အသုံးပြုထားတဲ့ thin connecting lines တွေပါတဲ့ turquoise candlestick ဒါမှမဟုတ် bar charts။ Halftone map က signature visual element တစ်ခုပါ—#d65620 (orange) မှ violet, blue, azure, turquoise နဲ့ yellow အထိ gradient transitions တွေဖြစ်ပြီး brand palette တစ်ခုလုံးကို တစ်ခုတည်းသော decorative surface ပေါ်မှာ ပေါင်းစပ်ထားတဲ့ spectrum တစ်ခုကို ဖန်တီးပေးပါတယ်။ #232730 ဒါမှမဟုတ် #a9acb6 variants တွေမှာ icon တွေရဲ့ outline thickness က 1.5–2px ဖြစ်ပြီး active states တွေအတွက် fill ပါရှိပါတယ်။ လူနေမှုပုံစံဓာတ်ပုံများ မပါဝင်ပါ၊ መልእክት 3D ပုံဖော်မှုများ မပါဝင်ပါ - ထုတ်ကုန်နှင့် အချက်အလက်များအပေါ် အာရုံစိုက်စေရန် ရည်ရွယ်သည့် ကန့်သတ်ချက်ဖြစ်သည်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Indigo Navy
#111a4a— အဓိကအမှတ်တံဆိပ်အရောင်ကို လုပ်ဆောင်ချက်တောင်းဆိုမှုများ၊ တက်ကြွသောလမ်းညွှန်အခြေအနေများ၊ ခေါင်းစီးနှင့် လိုဂိုတို့အတွက် အသုံးပြုသည်။ နက်ရှိုင်းသော ခရမ်းရောင်-အပြာရောင်သည် ဆိုက်ကို ခိုင်မာသော်လည်း ကြွယ်ဝသော အနက်ရောင်အရောင်ကို ပေးစွမ်းသည်။ အဖြူရောင်စာသားနှင့် တွဲဖက်လိုက်သောအခါ ဆိုက်တွင် အထင်ရှားဆုံးခလုတ်ကို ဖန်တီးပေးသည်။ - Seafoam 600
#44b48b— ကုဒ်နှင့်ဒေတာအရောင်သည် ကုဒ်အပိုင်းအစများရှိ JSON သော့များ၊ အမှတ်အသားများနှင့် ငွေကြေးတန်ဖိုးများအတွက် အမှတ်တံဆိပ်အရောင်ဖြစ်သည်။ ၎င်းကိုဇယားများနှင့် ကြီးထွားမှုမြင်ကွင်းများတွင် ဒေတာအမှတ်များအတွက်လည်း အသုံးပြုသည်။ - Seafoam 700
#167e6c— ဒေတာဆက်စပ်မှုအတွင်းရှိ မျဉ်းကြောင်း၊ ဇယားမျဉ်းကြောင်းများနှင့် အိုင်ကွန်အသားပေးများအတွက် ပင်လယ်ရေမြှုပ်၏ ပိုမှောင်သောအရောင်။ ၎င်းသည် ပင်လယ်ရေမြှုပ်စကေးကို ပိုမှောင်သောနောက်ခံနှင့် ချိတ်ဆက်ပေးသည်။ - Seafoam 400
#94efb7— မီးမောင်းထိုးပြထားသော ကုဒ်အပိုင်းအစတွင် ကုဒ်ဘလောက်များအတွင်းရှိ string တန်ဖိုးများ၊ URL များနှင့် API endpoint များ ပါဝင်သည်။ အပေါ့ပါးဆုံး seafoam အရောင်သည် အစိမ်းရောင်ဖောင့်ဖြင့် monospaced ဖောင့်အဖြစ် ဖတ်ရှုရသည်။ - Deep Sea
#023247— ဇယား၏ အလှဆင်ထားသော မျဉ်းကြောင်းနှင့် အသားပေးအရောင်သည် SVG သရုပ်ဖော်ပုံများနှင့် ဒေတာ visualization များတွင် ပင်လယ်ရေမြှုပ်အရောင်စကေးနှင့်အတူ အသုံးပြုသည့် ကြွယ်ဝသော turquoise အရောင်ဖြစ်သည်။
ကြားနေ
- Midnight Ink
#011821— မှောင်သောမျက်နှာပြင်နှင့် အသားပေးဖော်ပြထားသောစာသား – ထုတ်ကုန်ကတ်နောက်ခံ၊ ဆန့်ကျင်ဘက်အရောင်မြင့်မားသော အဓိကစာသား။ အေးမြသော အပြာ-အစိမ်းရောင်အရိပ်ဖြင့် မီးခိုးရောင်နှင့် ပိုမိုနီးစပ်သည်။ အပိုင်းတစ်ခုကို ပြောင်းပြန်လှန်ရန်လိုအပ်သည့်အခါ မှောင်သောမုဒ်အတွက် အခြေခံအဖြစ် အသုံးပြုသည်။ - Slate Ink
#3b3e47— ဒုတိယခေါင်းစဉ်နဲ့ အဓိကစာသားက Midnight Ink ထက် အနည်းငယ်ပိုနွေးပြီး အရောင်ဖျော့ဖျော့ပတ္တူပေါ်မှာ အနက်ရောင်စစ်စစ်က အရမ်းကြမ်းတမ်းလွန်းတယ်လို့ ထင်ရတဲ့နေရာမှာ သုံးပါတယ်။ - Steel
#7c7f88— အဓိကစာသားနှင့် လင့်ခ်စာသားကို အရောင်ဖျော့ဖျော့ဖြင့် လွှမ်းမိုးထားသည် (အဓိကစာသားတွင် ၂၄၅ ကြိမ်အသုံးပြုထားသည်)။ တည်ငြိမ်သော၊ ဘယ်တော့မှ မှိန်ဖျော့သော ရုပ်ပုံအဖြစ် မြင်တွေ့ရသည့် ကြားနေမီးခိုးရောင်-အပြာရောင်။ - Fog
#a9acb6— အိုင်ကွန်ပုံကြမ်းများ၊ တတိယအဆင့် ဘောင်များနှင့် နေရာချထားရန်စာသား။ စာသားနှင့် ယှဉ်ပြိုင်ခြင်းမရှိဘဲ ခွဲခြားပေးသည့် အလတ်စားမီးခိုးရောင်။ - Mist
#cbcccf— အဓိကစာသား—လက်မှတ်များ၊ ငြင်းဆိုချက်များနှင့် စာလုံးသေးသေးလေးများ—ကို အဖြူရောင်နောက်ခံတွင် ဖတ်ရလွယ်ကူသော်လည်း မြင်သာစွာ မသိသာပါ။ - Silver Lining
#e3e4e8— ကတ်ဘောင်များ၊ ထည့်သွင်းသည့်အကွက်ဘောင်များ၊ ပိုင်းခြားမျဉ်းများ။ ဤဖွဲ့စည်းပုံဆိုင်ရာ၊ သိမ်မွေ့သောအရောင်ကို မျက်နှာပြင်နှစ်ခုကို အရိပ်များမပါဘဲ ခွဲထားရန်လိုအပ်သည့်နေရာတွင် အသုံးပြုသည်။
စာလုံးပုံစံ
၁၀ မှ ၆၀ px အထိ · ၁၀ ဆင့်
- SuisseIntl — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 300, 400, 500, 600 · အဓိကဖောင့် – ခေါင်းစဉ်များ၊ ကိုယ်ထည်စာသား၊ ခလုတ်များ၊ လမ်းညွှန်ချက်၊ လင့်ခ်များနှင့် ကတ်စာသားအားလုံးအတွက် အသုံးပြုသည်။ ထူးခြားသော geometric sans serif သည် Column ကို ထူးခြားသော အယ်ဒီတာ့အာဘော်စတိုင်တစ်ခုပေးစွမ်းပြီး Inter-only နှင့်သာ သီးသန့်အလုပ်လုပ်သော အခြား fintech ကုမ္ပဏီများနှင့် ကွဲပြားစေသည်။ ခေါင်းစဉ်များအတွက် 52–60px တွင် အလေးချိန်မှာ 600၊ ခေါင်းစဉ်ခွဲများအတွက် 500၊ ကိုယ်ထည်စာသားအတွက် 400 နှင့် အလေးပေးမှုနည်းသောလင့်ခ်များအတွက် 300 ဖြစ်သည်။
- SuisseIntlMono — အစားထိုးခြင်း: JetBrains Mono · မျဉ်းကြောင်းများ 400 · UI element များတွင် နည်းပညာဆိုင်ရာ အညွှန်းများ၊ API identifier များနှင့် embedded data များအတွက် အသုံးပြုသည့် SuisseIntl နှင့် ဆင်တူသော monospaced font တစ်ခု။ ၎င်းသည် SuisseIntl ကဲ့သို့ အချိုးအစားတူညီစွာ ထိန်းသိမ်းထားသောကြောင့် monospaced နှင့် အချိုးကျသော စာသားများသည် ရောနှောနေသော အကြောင်းအရာများတွင် မှန်ကန်စွာ ချိန်ညှိနိုင်သည်။
- SFMono — အစားထိုးခြင်း: Fira Code · မျဉ်းကြောင်းများ 400 · ကုဒ်အပိုင်းအစပြသမှု – JSON ဥပမာများနှင့် API စာရွက်စာတမ်းဘလောက်များတွင် ပြသထားသည်။ ကုဒ်ကို UI စာသားနှင့် ရုပ်မြင်သံကြားအရ ခွဲခြားသိရှိရန် seafoam shade ကို အသုံးပြုသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ပျမ်းမျှ |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 8px |
| ကတ်အချင်းဝက် | 8px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 72px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Column ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- dope.security — ခရမ်းရောင် မီးပွိုင့်များပါသည့် သန်းခေါင်ယံ ဂိတ်
- Leonardo — ပြောင်းပြန်အယ်ဒီတာ့အာဘော်ပြခန်း။ အနက်ရောင်နံရံဖြင့် ပြတိုက်တစ်ခုဖြစ်ပြီး ခရမ်းရောင်ခေါင်းစဉ်များကို နံရံတပ်ဆင်မှုများအဖြစ် ဆောင်ရွက်ပေးပြီး AI မှထုတ်လုပ်ထားသော ပုံတူများကို အောက်တွင် ထူထဲသောဇယားကွက်တစ်ခုတွင် ချိတ်ဆွဲထားသည်။
- VEED — နီယွန်အစိမ်းရောင်မီးခလုတ်များပါသည့် အဖြူရောင်ပြခန်းနံရံ
- Craft Docs — scrapbooking အတွက် ဒစ်ဂျစ်တယ် collage တစ်ခု။ ဒီဇိုင်းသည် ဂရုတစိုက်ရှိသော၊ ထိတွေ့နိုင်သော scrapbook တစ်ခုနှင့် ဆင်တူပြီး ဖွဲ့စည်းတည်ဆောက်ထားသော ဒစ်ဂျစ်တယ်မှတ်စုများသည် နူးညံ့ပြီး အော်ဂဲနစ်အသွင်အပြင်များနှင့် ပေါင်းစပ်ထားသည်။
- Letter — သိုလှောင်ရုံမှ တလက်လက်တောက်ပနေသော ရှေးဟောင်းပစ္စည်းများကို ပြသထားသည့် သီးသန့်ပြခန်း။ ပြခန်း၏ ဆေးရောင်ခြယ်ထားသော နံရံများပေါ်ရှိ ခရုမ်းရုပ်တုများအထက်တွင် စီရီဖိုက်ပါ ခေါင်းစဉ်များ ပေါ်လွင်နေသည့် အနက်ရောင်နံရံပါ ပြပွဲနေရာ။
- Railway — Cosmic Midnight Express။ မှောင်မိုက်ပြီး ကြယ်များတောက်ပနေသော အာကာသကိုဖြတ်၍ ရှင်းလင်းသော အချက်ပြမှုများဖြင့် လမ်းညွှန်ထားသော တည်ငြိမ်ပြီး စိတ်လှုပ်ရှားဖွယ်ကောင်းသော ခရီးတစ်ခု။
- Garden Eight — ခရင်မ်ရောင်စက္ကူပေါ်တွင် ကြီးကျယ်ခမ်းနားသော အယ်ဒီတာ့အာဘော်တစ်ခု။ 215px serif ခေါင်းစဉ်သည် နွေးထွေးသော စက္ကူပေါ်တွင် အထီးကျန်စွာတည်ရှိပြီး ပေါလောမျောနေသော ပန်းပုရုပ်များနှင့် ပင်လယ်လေကို သတိရစေသော အနုတ်လက္ခဏာနေရာများ ဝန်းရံထားသည် - စာမျက်နှာသည် ဒိုင်ခွက်တစ်ခုထက် အနုပညာစာတမ်းတစ်စောင်၏ မျက်နှာဖုံးနှင့် ပိုတူသည်။
- Steep — ပူနွေးသောစက္ကူပေါ်ရှိ Serif ဖောင့်များကို ခွဲခြမ်းစိတ်ဖြာခြင်း
- ElevenLabs — ခေါင်းစဉ်ငယ်များပါရှိသော နွေးထွေးသောခရင်မ်ရောင်ဖြင့် ဓာတ်ပုံစာစီစာကုံးတစ်ပုဒ်။ Bauhaus ပုံစံ မှတ်စုစာအုပ်တစ်အုပ်—ဥခွံရောင်စက္ကူ၊ မင်အနက်ရောင်နှင့် ထုတ်ကုန်ပြသရန်အတွက် ခရမ်းရောင်နှင့် လိမ္မော်ရောင်တစ်ခုတည်းသာ ပါဝင်သည်။
- Awesomic — စက္ကူစများနှင့် ဆင်တူသော လိမ္မော်ရောင် ပုဒ်ဖြတ်အမှတ်အသားများပါသည့် အယ်ဒီတာ့အာဘော် သွပ်ကွက်
- Monad — နွေးထွေးသော စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် နည်းပညာဂျာနယ်
- AI for Business — နွေးထွေးသော မီးခိုးရောင်အရောင်များဖြင့် ရက်စက်ကြမ်းကြုတ်သော အယ်ဒီတာ့အာဘော်ပြခန်း