Vercel
အဖြူရောင်စက္ကူပေါ်တွင် ရိုက်နှိပ်ထားသော တာမီနယ်
Vercel ဒီဇိုင်းစနစ်သည် စည်းကမ်းရှိသော monochrome ဖြင့် လေ့ကျင့်ခြင်းဖြစ်သည်- အဖြူရောင်နီးပါးရှိသော ပတ္တူ (#fafafa)၊ အနက်ရောင်စာလုံး၊ ပါးလွှာသောဘောင်များနှင့် အလှဆင်အရောင်လုံးဝမပါဝင်ခြင်း။ အမြင်အာရုံဘာသာစကားသည် ပုံနှိပ်တွင် ပြန်လည်ပုံဖော်ထားသော developer ၏ terminal ကို သတိရစေသည်—Geist Sans သည် "သူရဲကောင်း" စကေးတွင် အလေးချိန် ၄၀၀-၄၅၀ နှင့် စာလုံးအကွာအဝေး -၀.၀၆em ရှိပြီး Geist Mono သည် 11-13px caps များတွင် label များ၊ metadata နှင့် code sample များကို အသုံးပြုသည်။ ခလုတ်များသည် ထက်မြက်သော 6px radii သို့မဟုတ် အဖြူပေါ်တွင် သန့်စင်သောအနက်ရောင် သို့မဟုတ် အနက်ရောင်ပေါ်တွင် အဖြူရောင်ဖြစ်သည်။ စနစ်သည် အရောင်ထက် contrast နှင့် typographic hierarchy ကို အားကိုးပြီး တြိဂံသင်္ကေတ (▲) နှင့် နှစ်လိုင်း wordmark ကို branding element များအဖြစ်သာ အသုံးပြုသည်။ မျက်နှာပြင်များကို #fafafa → #ebebeb → #171717 အစီအစဉ်အတိုင်း တစ်ခုနှင့်တစ်ခု အထပ်လိုက်စီထားပြီး အရိပ် သို့မဟုတ် အရောင်အစား tonal တန်ဖိုးများကို ပြောင်းလဲခြင်းဖြင့် အနက်ကို ဖန်တီးပေးသည်။ element တစ်ခုစီကို သိပ်သည်းဆသိပ်သည်းသော 4px grid ပေါ်တွင် တည်ဆောက်ထားပြီး အင်ဂျင်နီယာတစ်ဦး၏ မှတ်စုစာအုပ်နှင့် ဆင်တူသော interface ကို ရရှိစေသည်—တိကျမှန်ကန်ပြီး လုပ်ဆောင်နိုင်စွမ်းရှိကာ white space ကို မကြောက်ပါ။
ကွန်တိန်နာသည် 1280px အကျယ်ရှိပြီး အလယ်ဗဟိုတွင်ရှိပြီး အလျားလိုက် padding ကျယ်ကျယ်ဝန်းဝန်း (24-48px) ပါရှိသည်။ အဓိကဘလောက်သည် asymmetric three-zone ဖွဲ့စည်းပုံကို အသုံးပြုသည်- ဘယ်ဘက်တွင် ခေါင်းစဉ်ကြီးတစ်ခု၊ brand glyph ကို အလယ်ဗဟိုပြုပြီး ညာဘက်တွင် "မျက်ခုံး" ဘလောက်တစ်ခု။ အဓိကဘလောက်အောက်တွင် အကြောင်းအရာကို အစင်းကြောင်းများဖြင့် စီစဉ်ထားသည်- client ၏ လိုဂိုပါသော full-width stripe တစ်ခု၊ ဘယ်ဘက်တွင် ခေါင်းစဉ်နှင့် ညာဘက်တွင် product layout ပါသော "Agent Creators" အပိုင်းနှစ်ကော်လံပါရှိပြီး၊ ထို့နောက် features များပါသော ကတ်သုံးကတ် grid တစ်ခုပါရှိသည်။ အပိုင်းများကို dividers သို့မဟုတ် background offsets မပါဘဲ 96-128px ဒေါင်လိုက် gutters များဖြင့် ပိုင်းခြားထားသည်။ navigation သည် နောက်ခံမှုန်ဝါးနေသော fixed 64px panel တစ်ခုတည်းဖြစ်သည်။ ကတ် grid များသည် 16-24px gutters ပါသော ကော်လံနှစ်ခု သို့မဟုတ် သုံးခု layout ကို အဆက်မပြတ်အသုံးပြုသည်။ အလုံးစုံသိပ်သည်းဆမှာ ကျစ်လစ်ပြီး စာသားသည် ဖတ်ရလွယ်ကူပြီး white space ကျယ်ဝန်းသော်လည်း ဖောင့်အရွယ်အစားနှင့် component အရွယ်အစားများသည် စာမျက်နှာကို လေဝင်လေထွက်ကောင်းသည်ဟု မခံစားရစေပါ။
ပုံတွေက ရှားပါးပြီး အမြဲတမ်း လုပ်ဆောင်နိုင်ပါတယ်။ အဓိက မြင်သာတဲ့ အစိတ်အပိုင်းကတော့ အနက်ရောင် တြိဂံ (▲) ပါ။ "စာလုံးကြီး" စကေးမှာ လှုပ်ရှားနေတဲ့ ပုံရိပ်အဖြစ် ပေါ်လာတဲ့ ဂျီဩမေတြီ အမှတ်တံဆိပ် အမှတ်အသားပါ။ proof-of-concept strip မှာရှိတဲ့ client လိုဂိုတွေက အမှတ်တံဆိပ်တစ်ခုချင်းစီရဲ့ တကယ့် wordmark တွေကို မီးခိုးရောင်စကေးနဲ့ အသုံးပြုပါတယ်။ ထုတ်ကုန် mockup တွေ (Notion ရဲ့ chat interface၊ CLI terminal output၊ passport card) ကို frame လုပ်ထားတဲ့ ကတ်တွေထဲမှာ light-mode screenshot တွေအဖြစ် ထည့်သွင်းထားပါတယ်။ ဓာတ်ပုံတွေ၊ သရုပ်ဖော်ပုံတွေ ဒါမှမဟုတ် 3D element တွေ မပါပါဘူး။ စနစ်က အဖြူရောင်စက္ကူပေါ်မှာ typography နဲ့ geometric shapes သက်သက်ပါ။
ရောင်စုံ
ကြားနေ
- Obsidian
#171717— အဓိကခေါင်းစဉ်များ၊ လမ်းညွှန်ဘောင်များ၊ မှောင်သောခလုတ်ဖြည့်ခြင်းနှင့် စာရင်းအမှတ်အသားများအားလုံးသည် အနက်ရောင်နီးပါးဖြစ်ပြီး ကြမ်းတမ်းမှုနှင့် တောက်ပသောပြည့်ဝမှုကို ရှောင်ရှားပါသည်။ - Paper White
#fafafa— စာမျက်နှာပတ္တူ၊ ကတ်မျက်နှာပြင်များ၊ ခလုတ်များ၏ အလင်းရောင်ဖြည့်မှုများ—၎င်းသည် ကျန်အရာအားလုံးတည်ရှိသည့် စံနောက်ခံဖြစ်သည်။ - Pure White
#ffffff— ကတ်မျက်နှာပြင်များ၊ ထည့်သွင်းမှုများ၊ ထည့်သွင်းရန်အကွက်များ မြှင့်တင်ထားသည်။ - Hairline
#ebebeb— ခလုတ်များ၊ လင့်ခ်များနှင့် ကတ်များပေါ်ရှိ 1px ဘောင်များကို zoom အဆင့်မြင့်တွင် မြင်နိုင်သော်လည်း zoom အဆင့်နိမ့်တွင် မမြင်ရပါ။ - Ash
#c9c9c9— client လိုဂိုများတွင် စာသား၊ အသံတိတ်အညွှန်းများ၊ အမှတ်တံဆိပ်အမည် ရေစာများကို ပိတ်ထားခြင်း။ - Smoke
#a8a8a8— ဒုတိယစာသား၊ အစားထိုးစာသား၊ သိမ်မွေ့သော သင်္ကေတဖြည့်ခြင်း။
စာလုံးပုံစံ
၁၁ မှ ၆၄px အထိ · အဆင့် ၆ ဆင့်
- Geist Sans — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 450, 500 · အင်တာဖေ့စ်နှင့် ခေါင်းစဉ်များအတွက် အဓိကဖောင့်မှာ Vercel မှ စိတ်ကြိုက်ဒီဇိုင်းထုတ်ထားသော geometric sans-serif ဖြစ်ပြီး စာလုံးအရွယ်အစားကြီးများဖြင့် အကွာအဝေးကျဉ်းမြောင်းစွာထားရှိသည် (-0.06em at 56-64px၊ -0.05em at 30px)။ စာမျက်နှာ၏ထိပ်ရှိ ခေါင်းစဉ်များအတွက် 450 weight ကို ရွေးချယ်ခဲ့သည်- Light ထက် ပိုထူသော်လည်း Semi-Bold ထက် ပိုပေါ့ပါးသောကြောင့် ယုံကြည်မှုရှိသော်လည်း လွန်ကဲမှုမရှိသော လေသံကို ဖန်တီးပေးသည်။
- Geist Mono — အစားထိုးခြင်း: JetBrains Mono · မျဉ်းကြောင်းများ 400, 500, 600 · စာတန်းထိုးများ၊ ကုဒ်ဘလောက်များ၊ CLI အထွက်ပြားများ၊ မက်တာဒေတာနှင့် အကြီးစာလုံးစာသားများအတွက် monospaced secondary font။ 8px/600px/အကြီးစာလုံးပေါင်းစပ်မှုသည် သေးငယ်သော wordmark များကို တိကျစွာနေရာချထားနိုင်စေပါသည်။ monospaced ဗားရှင်းတွင် စာလုံးအကွာအဝေးကျယ် (0.071em) သည် အကြီးစာလုံးစာသားအတွက် လုံလောက်သောနေရာလွတ်ကို ပေးစွမ်းသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 12px |
| ခလုတ်အချင်းဝက် | 6px |
| ကတ်အချင်းဝက် | 6px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 96-128px |
| စာမျက်နှာအကျယ် | 1280px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Vercel ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Headspace — နွေးထွေးသောစက္ကူပေါ်တွင် နေသာသောကျန်းမာရေးထောင့်တစ်ခု
- WHOOP — သန်းခေါင်ယံတွင် စွမ်းဆောင်ရည်ဓာတ်ခွဲခန်း - အနက်ရောင်ဇာတ်ရုံအလွတ်အောက်ရှိ အဖြူရောင်ဆေးခန်းဓာတ်ခွဲခန်းစားပွဲများ၊ ခရမ်းရောင်လျှပ်စစ်စီးကြောင်းတစ်ခု
- Together AI — ရေခဲစက္ကူပေါ်ရှိ သုတေသနကွန်ဆိုးလ်
- v0 by Vercel — ခုံပုံဆွဲခြင်း။ တိကျမှုနှင့် လုပ်ဆောင်နိုင်စွမ်းသည် အလွန်အရေးကြီးပြီး အစိတ်အပိုင်းတစ်ခုစီသည် သန့်ရှင်းပြီး နည်းပညာအရ ပြီးပြည့်စုံသော မျက်နှာပြင်ပေါ်တွင် ရှင်းလင်းသော ရည်ရွယ်ချက်ကို ဆောင်ရွက်ပေးပါသည်။
- Dovetail — လရောင်မည်းအောက်က ပုံစံငယ်တစ်ခု—မမြင်ရတဲ့ ဂရပ်မျဉ်းကြောင်းတွေ၊ အဖြူရောင်ဖောင့်၊ ခရမ်းရောင်တောက်ပမှုတစ်ခု
- Glideapps — လျှပ်စစ်ပြာရောင်တောက်တောက်တစ်ခုပါသည့် monochrome ပုံဆွဲစားပွဲ
- Timescale — နွေးထွေးသော ဂရပ်စက္ကူပေါ်တွင် အင်ဂျင်နီယာပုံဆွဲခြင်း
- UGLYCASH — ခရင်မ်ရောင်စက္ကူပေါ်တွင် စတစ်ကာဖြင့် ဖုံးအုပ်ထားသော မှတ်စုစာအုပ်တစ်အုပ်သည် ၎င်း၏ ဖရိုဖရဲဖြစ်မှုကို ဂုဏ်ယူစွာ ပြသသည့် ရဲရင့်ပြီး အမြင့်ဆုံးဝါဒဆန်သော fintech တစ်ခု၏ အငွေ့အသက်ကို ပေါ်လွင်စေသည်။
- Sprout Social — အနက်ရောင်ကျောက်ပြားပေါ်ရှိ အစိမ်းရောင်အပင်ပေါက်တစ်ပင်။ တိကျသော monochrome ပတ္တူပေါ်တွင် တောက်ပသော အသားပေးဖော်ပြချက်တစ်ခု၊ ၎င်း၏အရောင်ကို လှုပ်ရှားမှုအတွက်သာ အသုံးပြုထားပြီး ယုံကြည်မှုရှိသော ဂျီဩမေတြီဖောင့်ကို လမ်းညွှန်ဆိုင်းဘုတ်များအဖြစ် အသုံးပြုထားသည်။
- Krea — သန်းခေါင်ယံတွင် ပြခန်း noir
- Evergreen — ပိတ်ချောစက္ကူပေါ်တွင် နေရောင်ခြည်စွမ်းအင်သုံး ဖန်လုံအိမ်
- Factory — သန်းခေါင်ယံတွင် "စစ်ခန်း" ဂိတ်။ "စက်ရုံ" သည် မီးအိမ်ထွန်းထားသော ညွှန်ကြားချက်တစ်ခုကဲ့သို့ အဖြူရောင်ကတ်တစ်ခု ကျရောက်နေသည့် လုံးဝမည်းနက်သော ထိန်းချုပ်ခုံတစ်ခုဖြစ်ပြီး အခန်းထဲတွင် တစ်ခုတည်းသော အရာဝတ္ထုမှာ အလုပ်ဖြစ်သည်။