Dub
Link ရဲ့ မက်တီဆန်စက္ကူ ထိန်းချုပ်ကန့်
Dub ရဲ့ အမြင်အာရုံစနစ်မှာ ထိန်းထိန်းသိမ်းသိမ်းနဲ့ အယ်ဒီတာ့အာဘော် SaaS အလှတရားရှိပါတယ်- အဖြူရောင်နီးပါး ပတ္တူတစ်ခုဖြစ်ပြီး ထွက်နေတဲ့ အစိတ်အပိုင်းတွေအစား ပါးလွှာတဲ့ ဘောင်တွေနဲ့ ချည်နှောင်ထားပြီး သိပ်သည်းတဲ့ monochrome စာလုံးပုံစံက ဖွဲ့စည်းပုံဆိုင်ရာ အထောက်အပံ့ကို ပေးစွမ်းပြီး တစ်ခုတည်းသော တောက်ပတဲ့ အပြာရောင် (#2563eb) က ထင်ရှားပေါ်လွင်စေပါတယ်။ မျက်နှာပြင်တွေက ပထမတစ်ချက်ကြည့်လိုက်ရင် ပြားချပ်ပြီး ဘောင်မဲ့နေပေမယ့် ကွန်တိန်နာတစ်ခုစီမှာ 1px #e5e5e5 အနားသတ်တစ်ခုစီရှိပြီး ပုံနှိပ်စာရွက်စာတမ်းတစ်ခုရဲ့ ခံစားချက်ကို နှိုးဆွပေးပါတယ်။ ကြားနေ palette အပေါ်မှာ ပေါ်လွင်နေတဲ့ အရောင် "ဆေးပြား" အသားပေးဖော်ပြချက်လေးတွေ (လိမ္မော်ရောင်၊ အစိမ်း၊ ခရမ်းရောင်) နဲ့ တောက်ပြောင်မှုမရှိဘဲ ယုံကြည်မှုရှိပြီး ခေတ်မီတဲ့ header တွေကတစ်ဆင့် ကိုယ်ရည်ကိုယ်သွေးကို ရရှိစေပါတယ်။ အစိတ်အပိုင်းတွေက ကျစ်လစ်ပြီး သိပ်သည်းပါတယ်- 8px gutters၊ 12px ကတ်အချင်းဝက်၊ 9999px မှာ ဆေးပြားပုံသဏ္ဍာန် label တွေနဲ့ လေးလံပြီး ပြည့်နေတဲ့ ခလုတ်တွေအစား မမြင်ရတဲ့ ထိန်းချုပ်မှုတွေ ပါဝင်ပါတယ်။
စာမျက်နှာကို အများဆုံး 1200px ခန့်ရှိသော အလယ်ဗဟိုတွင် တည်ဆောက်ထားသည်။ အဓိကဒြပ်စင်မှာ ထုတ်ကုန်ပုံစံကြီးတစ်ခု၏ အပေါ်ဘက်တွင် အလျားလိုက်တည်ရှိသော floating element သုံးခု (Affiliate Programs၊ Conversion Analytics၊ Short Links) ပါရှိသော အလယ်ဗဟိုရှိ စာသားဘလောက်တစ်ခုဖြစ်သည်။ အပိုင်းများကို 64px gutter များဖြင့် ဒေါင်လိုက်စီထားပြီး အဖြူရောင်ကင်းဗတ်စ်နှင့် #f5f5f5 စက္ကူမှုန်ဝါးဝါးကြားတွင် တလှည့်စီစီစီထားသည်။ အောက်ဆုံးအပိုင်းတွင် Z-ပုံသဏ္ဍာန် အပြင်အဆင်ကို အသုံးပြုသည်- အယ်ဒီတာ့အာဘော်စာသားကို အလယ်တွင် အလယ်ဗဟိုပြုထားပြီး floating UI ကတ်များကို ဘယ်နှင့်ညာအနားသတ်များတွင် ချိတ်ဆွဲထားပြီး မဂ္ဂဇင်းကဲ့သို့ စည်းချက်ညီညီ ဖန်တီးထားသည်။ လိုဂိုတိမ်တိုက်သည် စာမျက်နှာ၏အလယ်ဗဟိုတွင် ရိုးရှင်းသော 5x2 grid တစ်ခုဖြစ်သည်။ Navigation သည် minimalist top bar တစ်ခုဖြစ်သည်—ဘယ်ဘက်တွင် လိုဂို၊ အလယ်တွင် navigation၊ ညာဘက်တွင် ခလုတ်နှစ်ခု (ghost "Login" ခလုတ် + ဖြည့်ထားသော "Register" ခလုတ်)—ပုံသေ သို့မဟုတ် mega-menu မပါဘဲ။ အဓိကဝင်းဒိုး၏ ဒက်ရှ်ဘုတ် အပြင်အဆင်သည် ဂန္ထဝင်ကော်လံနှစ်ခုပါ အက်ပ် အပြင်အဆင်ကို ပြသထားသည်- ပုံသေဘေးဘား (240px နှင့်ဆင်တူသည်) + လာရောက်ကြည့်ရှုသူများ scroll မလုပ်မီ ထုတ်ကုန်အချက်အလက်၏ သိပ်သည်းဆကို သတ်မှတ်ပေးသည့် အကြောင်းအရာဧရိယာ။
ရုပ်ပုံများသည် ထုတ်ကုန်ကို အဓိကထားပြီး လူနေမှုပုံစံကို အဓိကမထားပါ။ အဓိကမျက်နှာပြင်သည် ကြီးမားသော dashboard screenshot ပေါ်တွင် ဗဟိုပြုထားပြီး၊ sidebar navigation၊ data table နှင့် floating UI element များပါသည့် လက်တွေ့ကမ္ဘာထုတ်ကုန် mockup ကို ကိုယ်စားပြုပြီး အဖြူရောင် canvas ပေါ်တွင် flat panel အဖြစ် ခင်းကျင်းထားသည်။ Client လိုဂိုများကို desaturated grayscale grid (beehiv၊ superpower၊ Chatbase စသည်ဖြင့်) ဖြင့် ၎င်းတို့၏ လူမှုမီဒီယာစွမ်းဆောင်ရည်ကို အသိအမှတ်ပြုရန် ပြသထားပြီး၊ စာမျက်နှာ၏ အပြာရောင်တစ်ခုတည်းကိုသာ အဓိကထားနိုင်စေရန်အတွက် အရောင်များကို ဖယ်ရှားထားသည်။ floating partner ကတ်များ (ဝင်ငွေ/ငွေပေးချေမှုဒေတာပါသည့် profile ငယ်များနှင့် tile များ) သည် အောက်ခြေရှိ အယ်ဒီတာ့အာဘော်စာသားတုံးများပေါ်တွင် ရွေ့လျားပြီး စာသားပေါ်တွင် အရိပ်များမသုံးဘဲ အနက်အဓိပ္ပာယ်ကို ဖန်တီးပေးသည်။ အစက်အပြောက် grid နောက်ခံပုံစံသည် ထူးခြားသောအင်္ဂါရပ်တစ်ခုဖြစ်သည်- opacity အလွန်နည်းသော အစက်အပြောက်ငယ်များ၏ ပါးလွှာသောအတန်းသည် texture နှင့် ဒီဇိုင်းစနစ်/ပုံဆွဲမျက်နှာပြင်၏ ခံစားချက်ကို ဖန်တီးပေးပြီး "ခေတ်မီ link attribution platform" အဖြစ် ဆိုက်၏တည်နေရာကို အလေးပေးဖော်ပြသည်။ iconography သည် အနည်းဆုံးဖြစ်ပြီး outline များနှင့် fills များပါရှိပြီး feature tag များအတွက် accent palette (tangerine orange၊ lavender purple၊ mint green) ကို အသုံးပြုသည်။ ဓာတ်ပုံများ၊ သရုပ်ဖော်ပုံများ သို့မဟုတ် 3D မော်ဒယ်များကို အသုံးပြုထားခြင်း မရှိပါ။ ထုတ်ကုန်၏ အသုံးပြုသူ အင်တာဖေ့စ်သည် အမြင်အာရုံဆိုင်ရာ ဘာသာစကားတစ်ခုဖြစ်သည်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Electric Blue
#2563eb— အဓိကအမှတ်တံဆိပ်အရောင် — လိုဂို၊ လင့်ခ်များ၊ အဓိကစွမ်းဆောင်ရည်ညွှန်းကိန်းများ၊ တက်ကြွသောအခြေအနေများနှင့် အိုင်ကွန်အသားပေးမှုများ—ကို အသုံးပြုထားသည်။ အဖြူရောင်နောက်ခံပေါ်တွင် ကြွယ်ဝသောအပြာရောင်သည် စနစ်၏တစ်ခုတည်းသော အမြင်အာရုံဆွဲဆောင်မှုကို ဖန်တီးပေးသည်။ - Deep Sapphire
#1e40af— လုပ်ဆောင်ချက်ခလုတ်၏ အဓိကနောက်ခံ၊ လုပ်ဆောင်ချက်ကို ကိုယ်စားပြုသည့် တစ်ခုတည်းသောအရောင်ဖြစ်သည့် လုပ်ဆောင်ချက်သို့ တောင်းဆိုချက်၏ ရဲရင့်သောဖြည့်စွက်မှုကို အာရုံစိုက်မှုဆွဲဆောင်ရန်အတွက် အနည်းငယ်သာအသုံးပြုသည်။
ကြားနေ
- Canvas White
#ffffff— စာမျက်နှာနောက်ခံ၊ ကတ်မျက်နှာပြင်၊ ပေါ့ပ်အပ်ပြားများသည် မျက်နှာပြင်တိုင်း၏ အခြေခံအုတ်မြစ်ဖြစ်သည်။ - Paper Mist
#f5f5f5— ထည့်သွင်းထားသော ကတ်များ၊ အပိုအကန့်များနှင့် ဖြည့်သွင်းမှုများအတွက် သိမ်မွေ့သော မောက်စ်တင်သည့် အရောင်ပြောင်းလဲမှုများ။ - Ash
#e5e5e5— ကတ်များပေါ်ရှိ ပါးလွှာသော ဘောင်များ၊ input connector များနှင့် ပိုင်းခြားကိရိယာများသည် စနစ်ကို စုစည်းထားသည့် ဖွဲ့စည်းပုံဆိုင်ရာ မျဉ်းကြောင်းဖြစ်သည်။ - Smoke
#d4d4d4— ရွေးချယ်ထားသော ကွန်တိန်နာများနှင့် အပိုခလုတ်ပုံကြမ်းများအတွက် ပိုမိုထက်မြက်သော ဘောင်များ။ - Pebble
#c8c8c8— ဘောင်များ၊ ထိန်းချုပ်မှု မျဉ်းကြောင်းများနှင့် အလယ်အလတ် ဆန့်ကျင်ဘက် အရောင်ရှိသော ဖွဲ့စည်းပုံဆိုင်ရာ ပိုင်းခြားမှုများ။ ဤအရောင်ကို လုပ်ဆောင်ချက် တောင်းဆိုချက်များအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။ - Midnight Ink
#0a0a0a— ခလုတ်များ၏ အဓိကစာသား၊ အသားပေးဖော်ပြထားသော ခလုတ်များနှင့် လမ်းညွှန်စာသားများသည် အများဆုံး ဆန့်ကျင်ဘက်အရောင်အတွက် အနက်ရောင်နီးပါးဖြစ်သည်။
စာလုံးပုံစံ
၁၁ မှ ၄၈px အထိ · အဆင့် ၉ ဆင့်
- Satoshi — အစားထိုးခြင်း: Inter (weight 500 · မျဉ်းကြောင်းများ 500 · Display Headings – ခေါင်းစဉ်နှင့် အပိုင်းခေါင်းစဉ်များအတွက် 36–48px လိုင်းများတွင်သာ အသုံးပြုသည်။ ဖောင့်အလေးချိန် – 500 (အလယ်အလတ်၊ စာလုံးထူမဟုတ်ပါ): ခေါင်းစဉ်များသည် ယုံကြည်မှုရှိပြီး ခေတ်မီပုံပေါ်သော်လည်း ဘယ်တော့မှ လွှမ်းမိုးမှုမရှိပါ။ Satoshi ၏ ဂျီဩမေတြီအချိုးအစားများသည် စာလုံးမျက်နှာပြင်ကို Inter ၏ ကိုယ်ထည်မိတ္တူများ ပုံတူကူး၍မရသော အနည်းငယ် အယ်ဒီတာ့အာဘော်၊ ခေတ်မီသော ခံစားချက်ကို ပေးစွမ်းသည်။
- Inter — အစားထိုးခြင်း: Inter (native) · မျဉ်းကြောင်းများ 400, 500, 600 · Body copy၊ UI label များ၊ navigation၊ subheadings နှင့် minor headings။ Inter သည် အဓိက workhorse ဖြစ်ပြီး 11px micro-label များမှ 30px secondary headings အထိ အရာအားလုံးကို ကိုင်တွယ်သည်။ body copy အတွက် default weight 400၊ highlighted element များနှင့် button label များအတွက် 500 နှင့် အရေးကြီး UI label များအတွက် 600 သီးသန့်ဖြစ်သည်။ 1.5 line height ရှိသော 16px သည် single-step size အများဆုံးတွေ့ရသည် (1220 ကြိမ်ဖြစ်ပွားခြင်း)၊ 16px သည် canonical body copy size ဖြစ်ကြောင်း အတည်ပြုသည်။
- Geist Mono — အစားထိုးခြင်း: JetBrains Mono or IBM Plex Mono · မျဉ်းကြောင်းများ 400, 500 · ကုဒ်အပိုင်းအစများ၊ နည်းပညာဆိုင်ရာ metadata နှင့် embedded monospaced tokens များကို 12–14px ရှိ ကုဒ်ဘလောက်များနှင့် 24px ရှိ ကုဒ်ပြသမှုဒြပ်စင်ကြီးများတွင် အသုံးပြုသည်။ ၎င်းသည် developer tool ၏ ယုံကြည်စိတ်ချရမှုကို သေချာစေပြီး Dub ၏ ထုတ်ကုန်နေရာချထားမှုနှင့် ကိုက်ညီစေသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ပျမ်းမျှ |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 8px |
| ကတ်အချင်းဝက် | 12px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 64px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Dub ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- ElevenLabs — ခေါင်းစဉ်ငယ်များပါရှိသော နွေးထွေးသောခရင်မ်ရောင်ဖြင့် ဓာတ်ပုံစာစီစာကုံးတစ်ပုဒ်။ Bauhaus ပုံစံ မှတ်စုစာအုပ်တစ်အုပ်—ဥခွံရောင်စက္ကူ၊ မင်အနက်ရောင်နှင့် ထုတ်ကုန်ပြသရန်အတွက် ခရမ်းရောင်နှင့် လိမ္မော်ရောင်တစ်ခုတည်းသာ ပါဝင်သည်။
- Awesomic — စက္ကူစများနှင့် ဆင်တူသော လိမ္မော်ရောင် ပုဒ်ဖြတ်အမှတ်အသားများပါသည့် အယ်ဒီတာ့အာဘော် သွပ်ကွက်
- Monad — နွေးထွေးသော စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် နည်းပညာဂျာနယ်
- Seline Analytics — ပူနွေးသောစက္ကူပေါ်တွင် တိတ်ဆိတ်ငြိမ်သက်သော ခွဲခြမ်းစိတ်ဖြာရေးစားပွဲ
- Notion — နေ့လည်ခင်းနေရောင်အောက်က နွေးထွေးတဲ့ စက္ကူမှတ်စုစာအုပ်တစ်အုပ်
- Anthropic — နွေးထွေးသော သားရေစက္ကူပေါ်တွင် ရေးသားထားသော သိပ္ပံနည်းကျ လယ်ကွင်းဂျာနယ်တစ်စောင်—တည်ငြိမ်သော ဆင်စွယ်မျက်နှာပြင်များ၊ ခြစ်ရာပါ အယ်ဒီတာ့အာဘော် ခေါင်းစဉ်များနှင့် အရေးယူဆောင်ရွက်မှု လိုအပ်သည့်အခါတွင်သာ ပေါ်လာသည့် တစ်ခုတည်းသော ရွှံ့စေးအနှစ်သာရ။
- Calendly — အေးစက်သော စကျင်ကျောက်ပေါ်တွင် နက်ပြာရောင်မင်
- Augen Pro — Apple ရဲ့ အဖြူရောင်တင်ဆက်မှုမှာ ဆေးပညာဆန်ပြီး အလေးချိန်မရှိတဲ့ လျှပ်စစ်အပြာရောင်ကို တစ်မူထူးခြားတဲ့အရောင်အဖြစ် အသုံးပြုထားပါတယ်။
- Antimetal — ခရင်မ်စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် မှတ်တမ်းတစ်ခု—သိပ္ပံဂျာနယ်တစ်စောင်တွင် တိတ်ဆိတ်ငြိမ်သက်သော မနက်ခင်းတစ်ခု၊ ထိန်းချုပ်နိုင်စွမ်းက ယုံကြည်မှုကို ဖော်ဆောင်ပေးပြီး serif များက လေးလံသောဝန်ကို လုပ်ဆောင်ပေးသည်။
- Perk — ပူနွေးသော စက္ကူပေါ်တွင် လျှပ်စစ်ထုံး
- Ditto — နေရောင်အောက်က တောပန်းနမူနာတွေကို ဖန်တီးနေတဲ့ အလုပ်ရုံ။ နွေးထွေးတဲ့ ခရင်မ်မျက်နှာပြင်တွေ၊ တက်ကြွတဲ့ အဝါရောင်အောက်ခံအရောင်၊ နက်ရှိုင်းတဲ့ အပြာရောင်မင်တွေ၊ လက်ရာရဲ့နောက်ကွယ်မှာ ပွင့်လန်းနေတဲ့ အော်ဂဲနစ်အရောင်ပုံစံတွေ။
- Officevibe — နွေးထွေးသော ခရင်မ်ရောင်စက္ကူပေါ်တွင် ရေးသားထားသော အယ်ဒီတာ့အာဘော် မဂ္ဂဇင်းတစ်စောင်။ HR စီမံခန့်ခွဲမှုဆိုင်ရာ အတွေးအမြင်ရှိသော ဆောင်းပါးတစ်ပုဒ်ကို ထုတ်ကုန်တစ်ခုအဖြစ် တင်ပြထားသည်—ခေတ်မီ အပြာရောင် မျက်နှာပြင်မှတစ်ဆင့် တိုးတိုးလေး ရေးသားထားသော လက်ရေးဆက် serif ဖောင့်တစ်ခု။