Superhuman
ရွှေရောင်နာရီ အယ်ဒီတာအဖွဲ့
Superhuman သည် အယ်ဒီတာ့အာဘော် ဓာတ်ပုံနှင့် software UI တို့၏ ဆုံမှတ်ကို ဖြတ်ကျော်ထားသည်—နွေးထွေးသော၊ စက္ကူကဲ့သို့ ပတ္တူ (ဘယ်တော့မှ အဖြူရောင်စစ်စစ်) သည် အညိုရောင် အမှတ်တံဆိပ် အစိတ်အပိုင်းများနှင့် တက်ကြွသော ခရမ်းရောင် အသားပေးများကို ဘောင်ခတ်ထားသည်။ 460 ဖောင့်ဖြင့် တပ်ဆင်ထားသော ခေါင်းစဉ်များသည် အော်ဟစ်မည့်အစား တိုးတိုးလေးဖြစ်ပြီး စာမျက်နှာအပြည့် ရုပ်ရှင်ဓာတ်ပုံများက လေးလံသော ဝန်ထုပ်ဝန်ပိုးများကို လုပ်ဆောင်နိုင်စေပြီး ပွင့်လင်းမြင်သာသော ထုတ်ကုန် UI ကတ်များသည် ပုံရိပ်အထက်တွင် ဖန်ကဲ့သို့ ပေါ်လွင်နေသည်။ palette သည် အချိန်အများစုတွင် တည်ငြိမ်ပြီး အယ်ဒီတာ့အာဘော် ဖြစ်နေသည်- ခရင်မ်မျက်နှာပြင်များ၊ မီးခိုးရောင်စာသား၊ သိမ်မွေ့သော နွေးထွေးသော မီးခိုးရောင် ဘောင်များနှင့် အစိတ်အပိုင်းများအကြား ကျယ်ဝန်းသော အကွာအဝေး၊ ရည်ရွယ်ချက်ရှိရှိ အမှတ်တံဆိပ် ပုဒ်ဖြတ်ပုဒ်ရပ်များအတွက်သာ သီးသန့်ထားသော အရောင်—အညိုရောင် လှုံ့ဆော်မှုတစ်ခု၊ ခရမ်းရောင်လင့်ခ်များ၊ ခရမ်းရောင်ဖျော့ဖျော့ add-on ခလုတ်။ စနစ်သည် UI မျက်နှာပြင်များပေါ်ရှိ အရိပ်များနှင့် gradient များကို ရည်ရွယ်ချက်ရှိရှိ ရှောင်ရှားသည်။ အနက်ကို stacking effect မှတစ်ဆင့် မဟုတ်ဘဲ ခေါင်းစဉ်တွင် အလွှာလိုက် ဓာတ်ပုံနှင့် သိမ်မွေ့သော နောက်ခံ blur မှတစ်ဆင့် ရရှိသည်။
အဓိကဒြပ်စင်မှာ အလယ်ဗဟိုတွင် ခေါင်းစဉ် (48-64px/460) ပါသော အကျယ်အပြည့် ဓာတ်ပုံတစ်ပုံနှင့် ဝိုင်ပုံတစ်ပုံဖြင့် ဖြည့်ထားသော လုပ်ဆောင်ရန် ခေါ်ဆိုမှုတစ်ခု၊ ဘယ်ဘက်နှင့် ညာဘက်အနားများတွင် ပေါလောမျောနေသော ဖောက်ထွင်းမြင်ရသော ထုတ်ကုန် UI ကတ်များကို ဖုံးအုပ်ထားသည်။ အဓိကဒြပ်စင်အောက်တွင် အဖြူရောင်အစင်းကြောင်း လိုဂိုစင်းတစ်ခု (တစ်တန်းလျှင် ဆဲလ် ၆ ခု၊ အများဆုံးအကျယ်ကန့်သတ်ထားသည်)၊ ထို့နောက် parchment ပတ္တူပေါ်တွင် အဖြူရောင်ကတ်မျက်နှာပြင်များပါသည့် tab အပိုင်းတစ်ခုရှိသည်။ စာမျက်နှာတစ်လျှောက် လမ်း၏ သုံးပုံနှစ်ပုံခန့်တွင် မှောင်သောပြာလဲ့ရောင်အစင်းကြောင်းသည် စည်းချက်ကို ချိုးဖျက်ပေးသည်—အကျယ်အပြည့်၊ ကော်လံနှစ်ခု (ဘယ်ဘက်တွင်ပုံ၊ ညာဘက်တွင်စာသား)—သင် scroll လုပ်သည့်အခါ တစ်ခုတည်းသော tonal contrast ကို ဖန်တီးပေးသည်။ gradient atmospheric stripe ပါရှိသည်။ အပိုင်းများအကြား ဒေါင်လိုက်အကွာအဝေးမှာ 64-96px ဖြစ်သည်။ အများဆုံးအကြောင်းအရာအကျယ်မှာ ~1200px အလယ်ဗဟိုဖြစ်ပြီး အဓိကဒြပ်စင်နှင့် မှောင်သောအစင်းသည် viewport ၏ အကျယ်အပြည့်ကို လွှမ်းခြုံထားသည်။ navigation သည် နောက်ခံမှုန်ဝါးနေသော တစ်ခုတည်းသော header ဖြစ်သည်။ sidebar မရှိ၊ mega menu မရှိပါ။ footer သည် လင့်ခ်များ၏ multi-column layout ရှိသော အကျယ်အပြည့် burgundy စာမျက်နှာတစ်ခုဖြစ်သည်။ အလုံးစုံစည်းချက်က- အဓိကဘောင် → တည်ငြိမ်သော အဖြူ/ခရင်မ်ပါဝင်မှု → အဓိကပုံပါသော မှောင်သောအစင်း → လေထုအရောင်ပြောင်းလဲမှု → burgundy အောက်ခြေ၊ အယ်ဒီတာ့အာဘော် tempo ကိုဖန်တီးရန် အလင်းနှင့်မှောင်သောအစင်းများကို တစ်လှည့်စီပြောင်းလဲခြင်း။
အဓိက အမြင်အာရုံ အစိတ်အပိုင်းကတော့ ရုပ်ရှင်ရိုက်ကူးမှုပါ။ ကောင်းကင်ပြင်ကျယ်ကြီးနဲ့ ယှဉ်တွဲထားတဲ့ အကျယ်အပြည့်ပုံတူက အဓိကအချက်အဖြစ် ဆောင်ရွက်ပေးပြီး စာမျက်နှာရဲ့ အောက်ဘက်မှာ ဒုတိယလေထုအစင်းကြောင်းတစ်ခု ရှိနေပါတယ်။ ပုံကို နွေးထွေးတဲ့အရောင်နဲ့ သိမ်မွေ့စွာ မှိန်ဖျော့နေပြီး ရွှေရောင်အချိန်ကို ပြန်အမှတ်ရစေတဲ့ ပရိုဖိုင်မှာ ရိုက်ကူးထားတာကြောင့် ကော်ပိုရိတ်ပုံစံထက် အယ်ဒီတာ့အာဘော်ဆန်တဲ့ ခံစားချက်ကို ဖန်တီးပေးပါတယ်။ ကြည်လင်တဲ့ ဂျီဩမေတြီစတုဂံတွေနဲ့ လက်ရေးစာတန်းတွေပါတဲ့ မှောင်မိုက်တဲ့အစင်းကြောင်းတစ်ခုကို အတွေးထဲမှာ နစ်မြုပ်နေတဲ့ လူတစ်ယောက်ရဲ့ ဓာတ်ပုံပေါ်မှာ ထပ်ထားပါတယ်။ တစ်ခုတည်းသော ပုံတစ်ပုံအစား မျက်နှာပြင်တွေရဲ့ ကော်လာ့ဂျ်တစ်ခုပါ။ အသုံးပြုသူမျက်နှာပြင်ကို သီးခြားဖန်သားပြင်ဓာတ်ပုံတွေအဖြစ် မဟုတ်ဘဲ ဓာတ်ပုံပေါ်မှာ တိုက်ရိုက်ထပ်ထားတဲ့ မျောနေတဲ့ဖန်ကတ်တွေအဖြစ် တင်ပြထားပါတယ်။ စတော့ရုပ်ပုံတွေ၊ 3D ပုံဖော်မှုတွေ၊ နောက်ခံအရောင်လေထုအစင်းကြောင်းတွေကလွဲရင် ဘာမှမရှိပါဘူး။ အိုင်ကွန်တွေက minimalist monochrome မျဉ်းအိုင်ကွန်တွေဖြစ်ပြီး ~16-20px အကျယ်ရှိပြီး 460 point စာသားအလေးချိန်နဲ့ ကိုက်ညီတဲ့ အကျယ်တစ်ခုတည်းရှိပါတယ်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Midnight Wine
#421d24— အဓိက action ခလုတ်များ၊ ကြော်ငြာ banner နှင့် footer တို့သည် နွေးထွေးပြီး အနက်ရောင်နီးပါး burgundy အရောင်ဖြစ်ပြီး အနီရောင်ထက် မင်နှင့်ပိုတူကာ အရောင် palette ကို လွှမ်းမိုးမှုမရှိဘဲ ခိုင်မာစေသည်။ - Royal Violet
#714cb6— ခရမ်းရောင်ကို လင့်ခ်များ၊ တဂ်များနှင့် အတိုကောက်စကားစုများကို မီးမောင်းထိုးပြရန်အတွက် အသုံးပြုသည်။ ၎င်းကို လုပ်ဆောင်ချက်တောင်းဆိုမှုများအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။
ကြားနေ
- Lilac Mist
#d4c7ff— ဒုတိယမျက်နှာပြင်ဖြည့်ခြင်း၊ အလင်းရောင်အိုင်ကွန်များနှင့် ghost button နောက်ခံများအားလုံးသည် မလိုအပ်သောအာရုံစိုက်မှုကိုမဆွဲဆောင်ဘဲ brand ၏စတိုင်ကိုညွှန်ပြသည့် မှိန်ဖျော့သောခရမ်းရောင်ပါရှိသည်။ - Deep Lagoon
#0c4243— အဓိကဇာတ်ကြောင်းအစိတ်အပိုင်းအဖြစ်အသုံးပြုသည့် ဇာတ်လမ်းအပိုင်းအတွက် မှောင်သောနောက်ခံသည် စနစ်တွင် တစ်ခုတည်းသော မှောင်သောမျက်နှာပြင်ဖြစ်ပြီး အပေါ်ယံဂျီဩမေတြီပုံစံနှင့် ပေါင်းစပ်ထားသည်။ - Warm Parchment
#f2f0eb— စာမျက်နှာ၏ အလုပ်လုပ်သည့်မျက်နှာပြင်သည် အဓိကအစိတ်အပိုင်းဖြစ်ပြီး အဖြူရောင်အစား နွေးထွေးသော ခရင်မ်ရောင်ကို အခြေခံအဖြစ် အသုံးပြုထားပြီး စနစ်တစ်ခုလုံးကို အယ်ဒီတာ့အာဘော်ဆိုင်ရာ နွေးထွေးမှုကို ပေးစွမ်းသည်။ - Soft Mist
#e3e3e2— အနားသတ်ကောင်းများ၊ ကတ်ဘောင်များ၊ ပိုင်းခြားမျဉ်းများ— သားရေစက္ကူနှင့် ရောနှောနေသော်လည်း အနားသတ်များကို ရှင်းရှင်းလင်းလင်း ဖော်ပြသည့် နွေးထွေးသော မီးခိုးရောင်ဖျော့ဖျော့။ - Ink Charcoal
#292827— ကိုယ်ထည်စာသား၊ ခေါင်းစဉ်များ၊ အိုင်ကွန်အကြမ်းဖျင်းများ - စက္ကူပေါ်တွင် မင်ကဲ့သို့ ခံစားရလောက်အောင် လုံလောက်သော အညိုရောင်ရှိပြီး ဘယ်တော့မှ အေးခဲမသွားသော နွေးထွေးသည့်၊ အနက်ရောင်နီးပါးရှိသော အရောင် #၀၀၀ - Stone Gray
#666666— ဒုတိယစာကိုယ်ထည်မိတ္တူ၊ အထောက်အကူပြုစာသားများ၊ မသိသာသောဖော်ပြချက်များ - တစ်ခုတည်းသော အလတ်စားမီးခိုးရောင်၊ အဓိကစာသားနှင့် ဘယ်တော့မှယှဉ်ပြိုင်ခြင်းမရှိစေရန် ချွေတာစွာအသုံးပြုသည်။
စာလုံးပုံစံ
၁၂ မှ ၆၄ ပစ်ဇယ်အထိ · အဆင့် ၈ ဆင့်
- Super Sans VF — အစားထိုးခြင်း: Inter (closest open equivalent for variable weight range) · မျဉ်းကြောင်းများ 460, 500, 540, 600, 700 · စနစ်တစ်ခုလုံးတွင် ဖောင့်တစ်ခုတည်း။ ဝင်ရိုးပြောင်းလဲနိုင်သော variable များသည် 460 (ခေါင်းစဉ်ကြီးအားလုံးအတွက် လက်မှတ်၊ အနည်းငယ်ဖြတ်ထားသော ဖောင့်) မှ 540 (အလေးပေးဖော်ပြထားသော စာသား) နှင့် 700 (သေးငယ်ပြီး ထင်ရှားသော စာတန်းများ) အထိ အတိုင်းအတာရှိသည်။ အထူးဒီဇိုင်းထုတ်ထားသော VF သည် 460-weight ခေါင်းစဉ်များကို ကျပန်းထက် ပိုမိုတမင်တကာပေါ်လာစေသည်—48-64px တွင် စာလုံးအကွာအဝေးကျဉ်းမြောင်းစွာဖြင့် "အနည်းငယ်ဖြတ်ထားသော" အကျိုးသက်ရောက်မှုကို ပါးလွှာခြင်းထက် ယုံကြည်မှုရှိသည်ဟု မြင်ယောင်စေသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 16px |
| ကတ်အချင်းဝက် | 16px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 64-96px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Superhuman ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- AI for Business — နွေးထွေးသော မီးခိုးရောင်အရောင်များဖြင့် ရက်စက်ကြမ်းကြုတ်သော အယ်ဒီတာ့အာဘော်ပြခန်း
- Jeton — နွေးထွေးသော စကျင်ကျောက်ပေါ်ရှိ fintech အကြောင်း အယ်ဒီတာ့အာဘော်
- Airtable — အခန်းများကို အရောင်အမျိုးမျိုးဖြင့် အမှတ်အသားပြုထားသည့် သက်တောင့်သက်သာရှိသော အလုပ်ရုံဆွေးနွေးပွဲ
- Osmo — မီးခိုးရောင်ကွန်ကရစ်ပေါ်ရှိ ဆော့ဖ်ဝဲရေးသားသူများပြတိုက်
- Linktr — အယ်ဒီတာ့အာဘော်ပိုစတာများကို သကြားလုံးများကဲ့သို့ စီထားသည်။ ဝဘ်ဆိုက်ကို အရောင်ဖျော့ဖျော့များဖြင့် ဒီဇိုင်းထုတ်ထားပြီး ကိုဘော့-အပြာရောင်နံရံများတွင် တောက်ပသောအစိမ်းရောင်ခေါင်းစဉ်များနှင့် အဖြူရောင်ဆေးပြားပုံသဏ္ဍာန် လမ်းညွှန်ဒြပ်စင်များသည် ဘာဂန်ဒီလယ်ကွင်းများပေါ်တွင် ပေါလောမျောနေပါသည်။
- Outsource Consultants — အရိုးစက္ကူပေါ်တွင် ကြီးမားသော ဖော်မတ်ဗိသုကာလက်ရာစာရွက်။ တစ်ပုံစံတည်းသော အလှအပ၊ နွေးထွေးပြီး စာလုံးပုံစံ အမြင့်ဆုံးဇယားကွက်ကို indigo အရောင်တောက်တောက်လေးဖြင့် ရောနှောထားသည်။
- Streamtime — Tactile Creative Mood Board - ဒီဇိုင်နာ Scrapbooking စားပွဲ
- Switch-Lit — ခရင်မ်စက္ကူပေါ်တွင် မင်ဖြင့် ရိုက်နှိပ်ထားသော အယ်ဒီတာ့အာဘော်ဇယားကွက်
- HubSpot — လိမ္မော်ရောင်တစ်ခုတည်းဖြင့် အသားပေးဖော်ပြထားသော နွေးထွေးသော ခရင်မ်စက္ကူအရောင်။ HubSpot သည် လေးလံသောစက္ကူပေါ်တွင် ရိုက်နှိပ်ထားသော ဒီဇိုင်နာမဂ္ဂဇင်းတစ်စောင်နှင့် ဆင်တူသည် - serif ခေါင်းစဉ်များ၊ နွေးထွေးသော ခရင်မ်စာမျက်နှာများနှင့် အရေးကြီးဆုံးအချက်များကိုသာ မီးမောင်းထိုးပြထားသော မီးတောက်လိမ္မော်ရောင်တစ်ခုတည်းဖြင့် ဖြစ်သည်။
- Granola — နွေးထွေးသော vellum ပေါ်တွင် လယ်ကွင်းမှတ်စုများ—Granola သည် နေရောင်အောက်ရှိ စားပွဲပေါ်တွင် ဖွင့်ထားသော ဟောင်းနွမ်းနေသော Moleskine မှတ်စုစာအုပ်ကဲ့သို့ ဖတ်ရသည်- serif ခေါင်းစဉ်များသည် ခိုင်မာသော ခံစားချက်ကို ပေးစွမ်းသည်၊ အပင်အခြေခံမင်ကဲ့သို့သော အော်ဂဲနစ်အစိမ်းရောင် အသားပေးမှုများနှင့် ကတ်များ၏ အနားသတ်များတွင် လက်ရေးမှတ်စုများနှင့် ဆင်တူသော မျဉ်းကြောင်းများ။
- Secure — ဥရောပကော်ဖီဆိုင်တစ်ဆိုင်မှာ နေ့အလင်းရောင်ဖျော့ဖျော့အောက်မှာ စကားပြောဆိုခြင်းဟာ ဗီဒီယိုခေါ်ဆိုမှုကို နွေးထွေးပြီး စတိုင်ကျတဲ့ အသွင်အပြင်တစ်ခုဖြစ်ပြီး serif ခေါင်းစဉ်တွေကို နည်းပညာထုတ်ကုန်စာမျက်နှာတစ်ခုထက် မဂ္ဂဇင်းဆောင်းပါးတစ်ပုဒ်လို ဖတ်ရှုနိုင်ပါတယ်။
- Mockups made easy — အဖြူရောင်စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော်ဒီဇိုင်းစတူဒီယို