Superlist
သန္တာကျောက်မီးသွေးများပါရှိသော ညအချိန် အလုပ်ခွင်တစ်ခု—နွေးထွေးသော လိမ္မော်ရောင် မီးပွားတစ်ခုသည် လှုပ်ရှားမှုတိုင်းကို အချက်ပြသည့် တိတ်ဆိတ်ငြိမ်သက်သော ခရမ်းချဉ်သီးအက်ပ်မျက်နှာပြင်တစ်ခု
Superlist သည် သန်းခေါင်ယံခရမ်းရောင်ဖြင့် ထုတ်လုပ်နိုင်စွမ်းဘာသာစကားကို အသုံးပြုထားသည်- ခရမ်းရောင်ရင့်ရင့်၊ နွေးထွေးသောသန္တာကျောက်ကို တစ်ခုတည်းသော အဓိကအရောင်အဖြစ် အသုံးပြုထားပြီး ကြီးမားသော sans-serif ခေါင်းစဉ်များပါရှိသည်။ interface သည် ညဉ့်နက်ချိန် အာရုံစိုက်ထားသော အလုပ်၏ခံစားချက်ကို နှိုးဆွပေးသည်—တိတ်ဆိတ်ငြိမ်သက်သော၊ အလွှာလိုက်နှင့် ယုံကြည်မှုရှိသော၊ လုပ်ဆောင်ချက်တောင်းဆိုမှုများ၊ တက်ကြွသောအခြေအနေများနှင့် အဓိကအချက်များတွင် လုပ်ဆောင်ချက်ဆိုင်ရာ ပုဒ်ဖြတ်ပုဒ်ရပ်များအဖြစ်သာ အသုံးပြုထားသည်။ မျက်နှာပြင်များကို ခရမ်းရောင်အောက်ခံ (#181824 → #26253b) ဖြင့် သိမ်မွေ့သောမှောင်မိုက်သောအရောင်များဖြင့် အလွှာလိုက်ထားပြီး၊ အနက်သည် ပိုးမွှားကင်းစင်ခြင်းထက် နွေးထွေးမှုကို ခံစားရစေရန် သန့်စင်သောအနက်ရောင်ကို ရှောင်ကြဉ်သည်။ အစိတ်အပိုင်းများတွင် ကျယ်ပြန့်သော အဝိုင်းပုံသဏ္ဍာန်များ (20px ကတ်များ၊ ဆေးပြားခလုတ်များ)၊ နူးညံ့သောအရိပ်များနှင့် ကျဉ်းမြောင်းသော grid များအစား သက်တောင့်သက်သာရှိသော 10-16px ကွာဟချက်များမှတစ်ဆင့် "အသက်ရှူ" သည်။ ခေါင်းစဉ်၏အသံသည် အရာအားလုံးဖြစ်သည်- 70-88px တွင် 600-point အလေးချိန်ရှိပြီး -0.02em ကျဉ်းမြောင်းသော စာလုံးအကွာအဝေးသည် စာသားကို UI ထက် typographic အဖြစ် သဘောထားသည်—၎င်းသည် SaaS ထက် အယ်ဒီတာ့အာဘော်မိတ္တူနှင့် ပိုမိုနီးစပ်သည်။
မှောင်မိုက်သောအပိုင်းများသည် စာမျက်နှာ၏ အကျယ်တစ်ခုလုံးကို ဖုံးလွှမ်းထားပြီး အလယ်ဗဟိုတွင် အမြင့်ဆုံးအကျယ်ရှိသော အကြောင်းအရာကွန်တိန်နာများပါရှိသည်။ အဓိကအပိုင်းသည် ဒေါင်လိုက်အလယ်ဗဟိုတွင်ရှိပြီး ခေါင်းစဉ်၊ စာသားအောက်ခံနှင့် လုပ်ဆောင်ရန်တောင်းဆိုချက် (CTA) ပါရှိပြီး နောက်အပိုင်းနှင့် ထပ်နေသော ထုတ်ကုန်ဖန်သားပြင်ဓာတ်ပုံကြီးတစ်ခု ပါရှိသည်။ နောက်ပိုင်းအပိုင်းများသည် အလယ်ဗဟိုရှိ စာသားဘလောက်များနှင့် ကတ်ဇယားကွက်များအကြား အလှည့်ကျပြောင်းလဲသည်။ သုံးသပ်ချက်အပိုင်းသည် သုံးသပ်ချက်ကတ်များနှင့် gutter ၁၆ ခုပါသော ကော်လံသုံးခုပါဇယားကွက်ကို အသုံးပြုသည်။ Navigation သည် ဘယ်ဘက်တွင် လိုဂိုတစ်ခု၊ အလယ်ဗဟိုရှိလင့်ခ်များနှင့် ညာဘက်တွင် login လုပ်ဆောင်ချက်များပါသည့် တစ်ခုတည်းသောထိပ်ဘားဖြစ်သည် - ပုံသေဘေးဘား သို့မဟုတ် mega-menu မရှိပါ။ အပိုင်းများအကြား gutter များသည် ကျယ်ဝန်းသည် (gutter ၁၆ ခု)၊ ထုတ်ကုန်ဇယားကွက်သိပ်သည်းခြင်းထက် ကျယ်ဝန်းသော အယ်ဒီတာ့အာဘော်စည်းချက်ကို ဖန်တီးပေးသည်။
အမြင်အာရုံနေရာလွတ်ကို ထုတ်ကုန်ဖန်သားပြင်ဓာတ်ပုံများက လွှမ်းမိုးထားသည်— အက်ပ်မျက်နှာပြင်အစစ်အမှန်ကို ပြသသည့် ထောင့်ဝိုင်းများပါသည့် ကြီးမားသောဘောင်တစ်ခုသည် အဓိကနှင့် ဒုတိယအပိုင်းများကို ဖြည့်ထားသည်။ ဓာတ်ပုံများသည် အနည်းဆုံးဖြစ်ပြီး အသုံးပြုသူ avatar များ သို့မဟုတ် အက်ပ်အတွင်းမီဒီယာ၏ preview များအဖြစ်သာ အသုံးပြုသည် (ဥပမာ၊ ထုတ်ကုန် mockup ၏ ညာဘက် panel ရှိ ဖျော်ဖြေပွဲပုံ)။ trust bar ရှိ လိုဂိုများသည် ပြားချပ်ချပ်၊ အရောင်ဖျော့ဖျော့ အဖြူရောင်စာသားသင်္ကေတများဖြစ်သည်။ အလှဆင်ပုံများ၊ abstract ဂရပ်ဖစ်များ၊ 3D render များ မရှိပါ။ အမြင်အာရုံဗျူဟာမှာ ထုတ်ကုန်ကို အတိုင်းအတာတစ်ခုအထိ ပြသရန်၊ စာလုံးပုံစံကို စိတ်ခံစားမှုဆိုင်ရာအလုပ်ကို လုပ်ဆောင်စေပြီး သန္တာကျောက်ကို အဓိကအရောင်အဖြစ် အသုံးပြုရန်ဖြစ်သည်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Coral Ember
#ff4a36— လိမ္မော်ရောင်ကို အလှဆင်အသေးစိတ်အချက်အလက်များအတွက် ဒုတိယအရောင်အဖြစ်နှင့် ရှားရှားပါးပါး အချက်ပြမှုများကို မီးမောင်းထိုးပြရန်အတွက် အသုံးပြုသည်။ ၎င်းကို လုပ်ဆောင်ရန် လှုံ့ဆော်မှုများအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။
ကြားနေ
- Aubergine Canvas
#181824— စာမျက်နှာနောက်ခံ၊ အဓိကကင်းဗတ်စ်သည် စစ်မှန်သောအနက်ရောင်ကို အစားထိုးသည့် နွေးထွေးပြီးမှောင်မိုက်သောအရိပ်ဖြစ်ပြီး အသုံးပြုသူမျက်နှာပြင်ကို ပြားချပ်ချပ်မဟုတ်ဘဲ အလွှာလိုက်ပုံပေါ်စေသည်။ - Elevated Plum
#26253b— ကတ်မျက်နှာပြင်များ၊ ထည့်သွင်းမှုအကွက်များ၊ လမ်းညွှန်ကွန်တိန်နာများ—မြင်သာသောနယ်နိမိတ်မပါဘဲ အနက်ကိုဖန်တီးရန် ပတ္တူထက် တစ်ဆင့်ပိုလွယ်ကူသည်။ - Pure White
#ffffff— အဓိကခေါင်းစဉ်များ၊ ခလုတ်စာသားနှင့် အိုင်ကွန်ပုံကြမ်းများ—မှောင်သောပတ္တူပေါ်တွင် အများဆုံးဆန့်ကျင်ဘက်အရောင်။ - Fog Text
#696f81— အဓိကစာသား၊ ဒုတိယခေါင်းစဉ်များနှင့် မှုန်ဝါးနေသော ဘောင်များ—ခရမ်းရောင်နောက်ခံနှင့် ယှဉ်လျှင် ဖတ်ရှုရလွယ်ကူစေရန်အတွက် 7:1 ဆန့်ကျင်ဘက်အချိုး။ - Ash Text
#8e8da0— ဒုတိယ UI အစိတ်အပိုင်းများ၊ ပိုင်းခြားကိရိယာများနှင့် အသံတိတ်အညွှန်းများအတွက် ကြားနေအရောင်ကို ပံ့ပိုးပေးပါသည်။ ၎င်းကို လုပ်ဆောင်ချက်တောင်းဆိုမှုများအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။ - Mist Highlight
#a3a3a7— သိမ်မွေ့သော ဘောင်များ၊ ပိုင်းခြားမှုများနှင့် အသက်မဝင်သော လမ်းညွှန်ဒြပ်စင်များသည် ပတ္တူပေါ်တွင် ထင်ရှားနေဆဲဖြစ်သော သိမ်မွေ့သော ကြားနေအရောင်ကို ဖန်တီးပေးသည်။
စာလုံးပုံစံ
၁၂ မှ ၈၈px အထိ · အဆင့် ၉ ဆင့်
- sans-serif — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400 · sans-serif - ထုတ်ယူထားသောဒေတာတွင်တွေ့ရှိရသော်လည်း AI မှဖော်ပြမထားပါ။
- Haffer XH SemiBold — အစားထိုးခြင်း: Inter Tight · မျဉ်းကြောင်းများ 400, 600 · မျက်နှာပြင်နှင့် ခေါင်းစဉ်များအတွက် အဓိကဖောင့်။ စာလုံးအကွာအဝေး -0.02em နှင့် အလေးချိန် 600 ရှိသော သူရဲကောင်းခေါင်းစဉ်များအတွက် 70–88px အရွယ်အစားဖြင့် အသုံးပြုသည်။ စာလုံးအကွာအဝေးကျဉ်းမြောင်းခြင်းနှင့် စာလုံးအမြင့်ကြီးခြင်းသည် ခေါင်းစဉ်များကို အယ်ဒီတာ့အာဘော်အလေးချိန်ပေးသောကြောင့် မှောင်မိုက်သော interface ကို dashboard ထက် မဂ္ဂဇင်းမျက်နှာဖုံးနှင့် ပိုတူစေသည်။ ထူထဲသောအလေးချိန်ဖြင့် Inter Tight သို့မဟုတ် General Sans ဖြင့် အစားထိုးပါ။
- Jersey 10 — အစားထိုးခြင်း: Anybody · မျဉ်းကြောင်းများ 400 · အသားပေးနံပါတ်များနှင့် အသားပေးဖော်ပြချက်များအတွက် အလှဆင်ဖောင့်ကြီးတစ်ခု။ စာစီစာရိုက်အသားပေးဖော်ပြချက်များဖန်တီးရန်အတွက် အရွယ်အစားအလွန်ကြီးမားသောဖောင့်များကို အနည်းငယ်သာအသုံးပြုသည်။ Anybody သို့မဟုတ် Cabinet Grotesk ဖြင့် အစားထိုးနိုင်သည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ပျမ်းမျှ |
| အခြေခံအဆင့် | 10-16px |
| ခလုတ်အချင်းဝက် | 100px |
| ကတ်အချင်းဝက် | 20px |
| အရိပ်များ | နူးညံ့သောအရိပ်များ |
| အပိုင်းများအကြား | 80px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Superlist ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- DNA — အမှုန်မှန်ဘီလူးမှတစ်ဆင့် မြင်တွေ့ရသော သန်းခေါင်ယံ စောင့်ကြည့်ရေးစခန်း
- Abetterlou — Sparks on Saddle Leather - ကော်ဖီရောင်ရင့်ရင့်နောက်ခံတွင် တောက်ပနေသော နွေးထွေးသည့် ခရင်မ်ရောင်ဖောင့်တစ်ခု၊ စာမျက်နှာထဲသို့ ဖိထားသကဲ့သို့ ခံစားရသည့် ပယင်းရောင်-ရွှေရောင် ခလုတ်များ။
- Galileo-ft — လျှပ်စစ်အပြာရောင် အချက်ပြမှုများပါရှိသော အာကာသအတွင်း အမိန့်ပေးစနစ်တစ်ခု
- Decide AI — သန်းခေါင်ယံတွင် နက္ခတ်တာရာကြည့်စင် - မီနူးအချက်ပြမှု
- Redis Agency — အလုပ်ချိန်ပြီးနောက် ဖွင့်လှစ်သော အယ်ဒီတာ့အာဘော် အလုပ်ရုံဆွေးနွေးပွဲသည် အလွန်မှောင်မိုက်သော နေရာတစ်ခုဖြစ်ပြီး အမှတ်တံဆိပ်လုပ်ငန်းအားလုံးကို serif ဖောင့်များနှင့် အနီရောင်မုန်လာဥနီတစ်လုံးဖြင့် လုပ်ဆောင်သည်။
- Spellbook — သန္တာရောင်မင်ဖြင့် ထွန်းလင်းထားသော သန်းခေါင်ယံတရားရုံး—နွေးထွေးသောလိမ္မော်ရောင်ဘောပင်ဖြင့်သာ တစ်ခုတည်းသောအသံရှိသည့် မှောင်မိုက်သော အယ်ဒီတာ့အာဘော်မျက်နှာပြင်
- Linear — သန်းခေါင်ယံတိကျမှုကိရိယာ
- Origin Financial — တိတ်ဆိတ်ငြိမ်သက်သော ခမ်းနားထည်ဝါမှု၏ သန်းခေါင်ယံပြခန်း။ ကြီးမားသော serif စာလုံးများနှင့် တောက်ပသော ရောင်စုံပြားအနည်းငယ်သည် ဘဏ္ဍာရေးသည် ဂရုတစိုက်ရွေးချယ်ထားသော အနုပညာလက်ရာတစ်ခုဖြစ်သည်ဟု ခံစားချက်ကို ဖန်တီးပေးသည့် တိတ်ဆိတ်ပြီး မှောင်မိုက်လုနီးပါးရှိသော အခန်းတစ်ခန်း။
- Hyperstudio — ဒီဇိုင်းကို obsidian ကျောက်ဖြင့် ကုတ်ခြစ်ထားသည်။ စာသားနှင့် ချောမွေ့သော မျဉ်းကြောင်းများသည် စစ်မှန်သော အနက်ရောင် အဖြူရောင်နေရာကို ဘောင်ခတ်ထားပြီး တစ်ခါတစ်ရံတွင် ရွှေရောင် သံလိုက်အိမ်မြှောင် အမှတ်အသားများက လမ်းညွှန်ပေးနေသည်။
- Air — ရုပ်တု "ဖန်ခွက်မှတစ်ဆင့် သန်းခေါင်ယံကောင်းကင်"
- Raycast — သန်းခေါင်ယံ ကွပ်ကဲရေးစင်တာ၊ ကိုရယ်နီယွန်
- dope.security — ခရမ်းရောင် မီးပွိုင့်များပါသည့် သန်းခေါင်ယံ ဂိတ်