Subframe
နွေးထွေးသော ပါးလွှာသော စက္ကူပေါ်တွင် ဂရပ်ဖစ်ပုံဆွဲခြင်း။ စုတ်ချက်တိုင်းသည် ဂရပ်ဖိုက် သို့မဟုတ် ခဲဖျက်ဖြစ်ပြီး ဘယ်သောအခါမှ ဆေးမသုတ်ပါနှင့် - အနက်ကို မျဉ်းအထူနှင့် ပါးလွှာသော serif များမှတစ်ဆင့် ရရှိသည်။
Subframe သည် monochrome ဒီဇိုင်နာ၏ အလုပ်ခွင်ဖြစ်သည်- နွေးထွေးပြီး ခရင်မ်ဆန်သော ပတ္တူ၊ ဂရပ်ဖိုက်-အနက်ရောင်မင်နှင့် chromatic accents လုံးဝမပါရှိခြင်း။ interface တစ်ခုလုံးကို တစ်ခုတည်းသော material—စက္ကူ၊ ခဲတံနှင့် အရိပ်—အဖြစ် ရှုမြင်သည်- ရဲရင့်သော typographic အထိအတွေ့တစ်ခုဖြင့်- စနစ်တကျ sans-serif (Inter) နှင့် ယှဉ်တွဲထားသော သန့်စင်ထားသော serif (Instrument Serif) သည် အယ်ဒီတာ့အာဘော်၏ အရေးပါမှုကို ပေးစွမ်းပြီး သတင်းခေါင်းစဉ်များကို ပိုမိုပေါ်လွင်စေသည်။ မျက်နှာပြင်များသည် ပြားချပ်ချပ်နှင့် ဘောင်ခတ်ထားသည်။ #e5e7eb ရှိ ပါးလွှာသော ပိုင်းခြားကိရိယာများနှင့် အရိပ်များအစား မှောင်သော ထိန်းချုပ်မှုများပေါ်တွင် inset highlights များမှတစ်ဆင့် အနက်ကို ရရှိသည်။ သိပ်သည်းဆသည် များပြားသည်- ကျယ်ပြန့်သော vertical rhythm (အပိုင်းများအကြား ကွာဟချက် ၄၈-၆၄px)၊ အလယ်ဗဟိုတွင်၊ full-width layouts နှင့် စာသားပတ်လည်တွင် ကျယ်ပြန့်သော whitespace။ တစ်ခုတည်းသောအရောင်မှာ အဖြူရောင်နီးပါးနှင့် အနက်ရောင်နီးပါးကြား contrast ဖြစ်ပြီး စာမျက်နှာတိုင်းတွင် မှောင်သောခလုတ်ကို အထင်ရှားဆုံးဒြပ်စင်ဖြစ်စေပြီး မီးခိုးရောင်ဖြင့် ပြုလုပ်ထားသော partner brand logo များ strip သည် တစ်ခုတည်းသော အလှဆင် visual element ဖြစ်သည်။
ဒေါင်လိုက်စည်းချက်ညီညီဖြင့် အလယ်ဗဟိုပြုထားသော၊ အကျယ်အပြည့် အပြင်အဆင်များ (၁၂၀၀ ပစ်ဇယ်)။ အဓိကဒြပ်စင်မှာ အလယ်ဗဟိုပြုထားသော တစ်ခုတည်းသော ဘလောက်ဖြစ်သည်- အပေါ်ဘက်တွင် မှောင်မိုက်သော၊ အပိုင်းခွဲထားသော ထိန်းချုပ်မှုတစ်ခု၊ "Inter" ခေါင်းစဉ်ကြီးတစ်ခု၊ တစ်ကြောင်းတည်းပါသော ခေါင်းစဉ်ခွဲတစ်ခုနှင့် ဘေးချင်းကပ်လျက်ရှိ ခလုတ်နှစ်ခု (ဖြည့်ထားသည် + ဖောက်ထွင်းမြင်ရသည်)—ဘေးပုံမပါ၊ အပြင်အဆင် ခွဲထားခြင်း မရှိပါ။ အဓိကဒြပ်စင်အောက်တွင် အလယ်ဗဟိုပြုထားသော မီးခိုးရောင်လိုဂိုအစင်းတစ်ခုရှိသည်။ နောက်ဆက်တွဲအပိုင်းတစ်ခုစီသည် ပုံစံတူဖြစ်သည်- ဘယ်ဘက်ညှိထားသော ခေါင်းစဉ်နှင့် ခေါင်းစဉ်ခွဲဘလောက်တစ်ခု၊ ထို့နောက် အပိုင်းများအကြားတွင် gutter နေရာ ၄၈-၆၄ ပစ်ဇယ်ရှိသော အကျယ်အပြည့် ထုတ်ကုန်ပြသမှုဘောင်တစ်ခု။ လမ်းညွှန်မှုမှာ အနည်းဆုံးဖြစ်သည်- အလယ်ဗဟိုပြုလင့်ခ်များနှင့် ညာဘက်ညှိထားသော လုပ်ဆောင်ချက်များပါသည့် အပေါ်ဘားတစ်ခု၊ ဘေးဘားတစ်ခု၊ mega-menu မရှိပါ။ စာမျက်နှာသည် အပေါ်မှအောက်သို့ အလယ်ဗဟိုပြုဖော်ပြချက်များစီးရီးတစ်ခုအဖြစ် ဖတ်ရှုရပြီး တစ်ခုချင်းစီတွင် ကျယ်ဝန်းသောနေရာပေးထားသည်—အပြင်အဆင်သည် အလုပ်များသော ထုတ်ကုန်စာမျက်နှာထက် အယ်ဒီတာ့အာဘော် အစုစုကဲ့သို့ ပိုမိုခံစားရသည်။
အမြင်အာရုံဒီဇိုင်းသည် အနည်းဆုံးဖြစ်ပြီး လုပ်ဆောင်နိုင်စွမ်းရှိသည်။ စနစ်သည် အမြင်အာရုံမုဒ်နှစ်ခုကို အသုံးပြုသည်- (၁) ဘောင်ခတ်ထားသော ထုတ်ကုန် ဖန်သားပြင်ဓာတ်ပုံများနှင့် 24px-radius ဘောင်များထဲတွင် ထည့်သွင်းထားသော UI mockup များ—၎င်းတို့သည် တူညီသော monochrome palette တွင် ပြသထားသော interface အစိတ်အပိုင်းများ (ဇယားများ၊ ခလုတ်များ၊ ပုံစံများ) ကို ပြသပြီး ဖန်သားပြင်ဓာတ်ပုံများကို စာမျက်နှာထဲသို့ ချောမွေ့စွာ ပေါင်းစပ်ထားသကဲ့သို့ ထင်ရစေသည်။ (၂) မီးခိုးရောင်မိတ်ဖက်လိုဂိုများ၏ တစ်ခုတည်းသော အစင်းသည် အရောင် သို့မဟုတ် ကွန်တိန်နာများမပါဘဲ ပြားချပ်ချပ်ပုံစံဖြင့် လူမှုရေးအထောက်အထားအဖြစ် ဆောင်ရွက်သည်။ လူနေမှုပုံစံဓာတ်ပုံများ၊ abstract gradient များ သို့မဟုတ် 3D render များ မရှိပါ။ တစ်ခုတည်းသော သရုပ်ဖော်သည့် အစိတ်အပိုင်းမှာ အမှတ်တံဆိပ်အိုင်ကွန်ပါရှိသော နွေးထွေးသော မီးခိုးရောင်နောက်ခံပေါ်တွင် ဗဟိုပြုထားသော မှောင်မိုက်သော ထုတ်ကုန် "tile" ဖြစ်သည်—၎င်းကို အလှဆင်ခြင်းမဟုတ်ဘဲ ထုတ်ကုန်သရုပ်ပြခြင်းအဖြစ် မြင်ကြသည်။ ရုပ်ပုံအားလုံးသည် စာသားအခြေခံ layout တွင် ပါဝင်ပြီး အမြင်အာရုံအလေးချိန်ကို စာသားက သယ်ဆောင်ထားသည်။
ရောင်စုံ
ကြားနေ
- Page Canvas
#fafafa— စာမျက်နှာနောက်ခံ၊ ပတ္တူပေါ်ရှိ ပို့စကတ်၊ မှောင်သောမျက်နှာပြင်ပေါ်ရှိ ပေါ့ပါးသောစာသား - မိုနိုခရုမ်းစနစ်တစ်ခုလုံး၏ အခြေခံဖြစ်သော နွေးထွေးသောအဖြူရောင်။ - Hairline Border
#e5e7eb— ပိုင်းခြားကိရိယာများ၊ ကတ်ဘောင်များ၊ ရုပ်ပုံဘောင်များ၊ အိုင်ကွန်အပြင်အဆင်များ - စနစ်တွင် အသုံးအများဆုံး အပြင်အဆင်အမျိုးအစားသည် နေရာဆိုင်ရာဖွဲ့စည်းပုံကို သတ်မှတ်ပေးသည်။ - Card Surface
#ededed— ကတ်များအတွက် မြှင့်တင်ထားသော နောက်ခံ၊ နောက်ထပ်မျက်နှာပြင်တစ်ခု - သည် ပတ္တူအထက်တွင် တစ်ဆင့်တည်ရှိပြီး အရိပ်မပါဘဲ အုပ်စုဖွဲ့ခြင်းကို ဖန်တီးပေးသည်။ - Divider Mid
#dadada— အလယ်အလတ်သံစဉ် ပိုင်းခြားခြင်းနှင့် အပိုင်းများအကြား အကူးအပြောင်းများ - Graphite
#242424— ပေါ့ပါးသော မျက်နှာပြင်များပေါ်ရှိ အဓိကခလုတ်များအတွက် ဆန့်ကျင်ဘက်အရောင်မြင့်မားသော ကြားနေဖြည့်ခြင်း။ - Ink Black
#171717— ကိုယ်ထည်စာသား၊ ခေါင်းစဉ်များ၊ အိုင်ကွန်အပြင်အဆင်များ - Graphite ထက် အနည်းငယ်ပိုအေးပြီး မျက်နှာပြင်များအစား စာလုံးပုံစံအတွက် အသုံးပြုသည်။
စာလုံးပုံစံ
၁၂ မှ ၁၂၈px အထိ · အဆင့် ၇ ဆင့်
- Inter — အစားထိုးခြင်း: Inter (Google Fonts) · မျဉ်းကြောင်းများ 500, 600, 700 · sans-serif စနစ် အင်တာဖေ့စ်—လမ်းညွှန်၊ ကိုယ်ထည်စာသား၊ ခလုတ်များ၊ ခေါင်းစဉ်ခွဲများနှင့် အပိုင်းခေါင်းစဉ်များ။ အလေးချိန်- ကိုယ်ထည်စာသားနှင့် ထိန်းချုပ်မှုအတွက် ၅၀၀၊ ခေါင်းစဉ်ခွဲများနှင့် လမ်းညွှန်မှု အသားပေးဖော်ပြချက်များအတွက် ၆၀၀ နှင့် အပိုင်းခေါင်းစဉ်များအတွက် ၇၀၀။ အနုတ်စာလုံးအကွာအဝေး ပြင်းထန်ခြင်းသည် မည်သည့်အရွယ်အစားမဆို ဂျီဩမေတြီပုံသဏ္ဍာန်များကို ဖိသိပ်ပေးပြီး အင်တာဖေ့စ်ကို အကျဉ်းချုပ်၊ နည်းပညာဆန်သော အသွင်အပြင်ကို ပေးစွမ်းသည်။
- Instrument Serif — အစားထိုးခြင်း: Playfair Display · မျဉ်းကြောင်းများ 400 · ခေါင်းစဉ်များနှင့် အယ်ဒီတာ့အာဘော်အကြောင်းအရာများအတွက် သီးသန့်ဒီဇိုင်းထုတ်ထားသော serif စာလုံးပုံစံ။ ၎င်း၏ 400 အလေးချိန်နှင့် -0.025em စာလုံးအကွာအဝေးသည် Inter ၏ စက်မှုဂျီသြမေတြီနှင့် ဆန့်ကျင်ဘက်ဖြစ်သော ကြော့ရှင်းပြီး စာလုံးစောင်းပုံစံကို ဖန်တီးပေးသည်—ထူးခြားသောနည်းပညာ- sans-serif စာမျက်နှာအတွင်းရှိ တစ်ခုတည်းသော serif စကားလုံး သို့မဟုတ် စကားစုသည် ခေါင်းစဉ်ပုံစံအစား မြင်သာသောပုဒ်ဖြတ်ပုဒ်ရပ်အဖြစ် ဆောင်ရွက်ပေးသည်။
- Fragment Mono — အစားထိုးခြင်း: JetBrains Mono · မျဉ်းကြောင်းများ 400 · inline code ကဲ့သို့သော element များ၊ tag label များနှင့် technical callout များအတွက် accent mono။ အနည်းငယ်သာအသုံးပြုပါက function list များနှင့် inline annotations များတွင် design tool မှ "ဤသည်မှာ machine output" ဟုညွှန်ပြလိုသည့်နေရာများတွင် ပေါ်လာသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ပျမ်းမျှ |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 16px |
| ကတ်အချင်းဝက် | 24px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 64px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Subframe ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- monopo saigon — အယ်ဒီတာ့အာဘော် တိတ်ဆိတ်မှုနောက်ကွယ်မှ အရည်နှင့် တောက်ပသော အလင်းရောင်တစ်ခု—အရည်ပျော်နေသော အလင်းရောင်ပေါ်တွင် ပေါလောမျောနေသော တစ်ရောင်တည်းသော အယ်ဒီတာ့အာဘော်ပြခန်း
- Hyer Aviation — လေယာဉ်မောင်းခန်းထဲက မှောင်ရီပျိုးစ အချိန်။ ဖျော့ဖျော့ မိုးသောက်ချိန် ကောင်းကင်နဲ့ လေယာဉ်ကိုယ်ထည်အရွယ်အစားရှိတဲ့ serif လိုဂိုတို့ ဆုံတွေ့နေပြီး နွေးထွေးတဲ့ ရွှံ့စေးအရောင် တစ်ခုတည်းက monochrome စတိုင်ကို ဖြိုခွင်းလိုက်ပါတယ်။
- OFF+BRAND. — ပူနွေးသော စက္ကူပေါ်တွင် တောက်ပသော ဘောလုံးပုံ
- Seed — ဓာတ်ခွဲခန်းဖန်ခွက်အောက်ရှိ သက်ရှိသတ္တဝါ
- Eindhoven Design District — အဖြူရောင်စက္ကူပေါ်ရှိ အယ်ဒီတာ့အာဘော် ရက်စက်ကြမ်းကြုတ်မှုသည် ဓာတ်ပုံအနည်းငယ်နှင့် လုံးဝထိန်းချုပ်မှုဖြင့် စာလုံးကြီးဖြင့် ရေးဆွဲထားသော မြူနီစပယ်ဒီဇိုင်းကြေညာစာတမ်းတစ်ခုဖြစ်သည်။
- Miranda — ခရင်မ်ဖျော့ဖျော့နောက်ခံပေါ်တွင် ဂန္ထဝင် ကျယ်ပြန့်သောပုံစံ—ဒစ်ဂျစ်တယ်ခေတ်အတွက် သတင်းစာအယ်ဒီတာ့အာဘော်
- Monocle — ခရင်မ်ရောင်စက္ကူပေါ်တွင် အရည်အသွေးမြင့်၊ ကျယ်ပြန့်သော သတင်းစာတစ်စောင်။ ကော်လံတိုင်းသည် ၎င်း၏နေရာနှင့်ထိုက်တန်ပြီး စာမျက်နှာပေါ်တွင် အဓိပ္ပာယ်ရှိသော အရောင်တစ်မျိုးတည်းသာ ပါရှိသော ဂရုတစိုက်ရွေးချယ်ထားသော အယ်ဒီတာ့အာဘော်တစ်ခုဖြစ်သည်။
- Agencja brandingowa — စာလုံးပုံစံကို မင်အနက်ရောင်ဖြင့် ရေးသားထားသော အဖြူရောင်အယ်ဒီတာ့အာဘော်ပြခန်း
- Websmith Studio — ခရင်မ်စက္ကူပေါ်က မနက်ခင်းအလင်းရောင်
- Aspelin Reitan — Candlelight မှ ဗိသုကာလက်ရာ မော်ကွန်းတိုက် - စာမျက်နှာသည် နွေးထွေးသော ခရင်မ်နံရံတွင် ချိတ်ဆွဲထားသော ဆောက်လုပ်ထားသော နေရာများ၏ အစုစုကဲ့သို့ဖြစ်ပြီး စာမျက်နှာ၏ အကျယ်တစ်လျှောက်တွင် ပုံတစ်ပုံစီ၏ အထက်တွင် အဖြူရောင်စာသားတစ်ကြောင်းတည်း ပေါလောမျောနေပါသည်။
- Public — အေးစက်သောစကျင်ကျောက်ပေါ်တွင် monochrome အယ်ဒီတာ့အာဘော်တစ်ခု—နီးပါး monochrome ပတ္တူတစ်ခုဖြစ်ပြီး 300-point serif ဖောင့်နှင့် ခရမ်းရောင်တစ်ခုတည်းဖြင့် အရောင်အားလုံးကို လုပ်ဆောင်ပေးသည်။
- Motto — စက္ကူပေါ်က စာစီစာရိုက်တစ်ခုတည်းသော စာလုံးပုံစံ - နှင်းကဲ့သို့ဖြူဖွေးသော စက္ကူပေါ်တွင် မိမိကိုယ်ကိုယ် ကြေညာသည့် ယုံကြည်မှုရှိသော တစ်ခုတည်းသော အသံ