MAKR
လက်မှုပညာသားရေပစ္စည်းများအတွက် ပြတိုက်ပြခန်း။ တိတ်ဆိတ်ငြိမ်သက်ပြီး အဖြူရောင်အခန်းတစ်ခန်းတွင် လက်ထဲတွင်ကိုင်ဆောင်ထားသော သို့မဟုတ် ရှုခင်းဓာတ်ပုံကြီးများ၏ အောက်တွင် နွေးထွေးသောအနက်ရောင်မင်ဖြင့် တံဆိပ်များပေါ်နေပြီး တစ်ခုတည်းသော ဆန့်ကျင်ဘက်အရောင်မှာ ဆာဂျရီအစင်းကြောင်းတစ်ခုဖြစ်သည်။
MAKR သည် လက်ဖြင့်ပြုလုပ်ထားသော သားရေပစ္စည်းများအတွက် ရည်စူးထားသော အွန်လိုင်းအယ်ဒီတာ့အာဘော်ပြခန်းတစ်ခုဖြစ်ပြီး ဓာတ်ပုံကို အဓိကထားဖော်ပြထားသည့် လုံးဝနီးပါး အရောင်အသွေးမခွဲခြားနိုင်သော palette ပေါ်တွင် တည်ဆောက်ထားသည်။ အပေါ်ဆုံးကြော်ငြာကို မီးခိုးရောင်နီးပါး banner tone (သိမ်မွေ့သော sage အရိပ်အမြွက်ဖြင့်) ဖြင့် အသားပေးထားပြီး ကျန်အရာအားလုံးကို အဖြူရောင်နောက်ခံပေါ်တွင် နက်ရှိုင်းပြီး နွေးထွေးသော အနက်ရောင်မင်ဖြင့် ပုံဖော်ထားသည်။ စာလုံးပုံစံသည် Sohne neo-grotesque ဖြစ်ပြီး သေးငယ်သောဖောင့်များ၊ ကျယ်ဝန်းသောလိုင်းအကွာအဝေးနှင့် caption များတွင် စာလုံးကြီးများအတွက် positive letter အကွာအဝေးတို့သည် web interface ကဲ့သို့မဟုတ်ဘဲ gallery wall ပေါ်ရှိ စာသားကဲ့သို့ ခံစားရစေသည်။ အပြင်အဆင်သည် ရုပ်ပုံလွှမ်းမိုးထားပြီး asymmetrical ဖြစ်ပြီး ပြတိုက်တစ်ခုကဲ့သို့ minimalist ဖြစ်သည်။ အရာဝတ္ထုများကို လက်ထဲတွင်၊ ရှုခင်းများ၊ သဘာဝအလင်းရောင်တွင် ဓာတ်ပုံရိုက်ကူးထားပြီး အောက်တွင် link ကဲ့သို့သော caption ငယ်များပါရှိသည်။ အစိတ်အပိုင်းများသည် မမြင်နိုင်သလောက်ဖြစ်သည် - underlined text link များ၊ ဖုံးကွယ်ထားသော input field များ၊ အရိပ်များမရှိ၊ လုံးဝိုင်းသောခလုတ်များမရှိ - အရေပြားနှင့် ဓာတ်ပုံများသည် brand ကို ပုံဖော်ရာတွင် အဓိကအခန်းကဏ္ဍမှ ပါဝင်စေသည်။
အများဆုံး အကြောင်းအရာအကျယ်ကန့်သတ်ချက်မရှိသော အနားစွန်းမှအနားစွန်းအထိ အပြင်အဆင်—ပုံများသည် viewport တစ်ခုလုံးကို ဖြည့်ထားသည်။ အပေါ်ဆုံး banner ကြော်ငြာသည် အကျယ်အပြည့်နေရာယူထားပြီး နောက်တွင် အကျယ်အပြည့် header navigation ရှိသည်။ အဓိက အကြောင်းအရာဧရိယာသည် သုည သို့မဟုတ် အနည်းဆုံး gutters ပါရှိသော multi-column image grid (desktop တွင် column ၂-၃ ခု) ကို အသုံးပြုထားသောကြောင့် ဓာတ်ပုံများသည် ၎င်းတို့၏ကိုယ်ပိုင် visual structure ကို ဖန်တီးနိုင်သည်။ စာသားနှင့် link များကို ပုံများအောက်ရှိ white space များတွင် ထားရှိပြီး ဘယ်တော့မှ ထပ်မနေပါ။ အယ်ဒီတာ့အာဘော်ကဏ္ဍများသည် ထုတ်ကုန် grid များနှင့် အကျယ်အပြည့်၊ လူနေမှုပုံစံဓာတ်ပုံများအကြား အလှည့်ကျပြောင်းလဲသည်။ vertical rhythm သည် ကျယ်ဝန်းသည် (အပိုင်းများအကြား gutters ၈၀-၁.၅ ခု)၊ ပြခန်းတစ်ခုတွင် လှည့်လည်ကြည့်ရှုသကဲ့သို့ ခံစားရစေသည်။ သတင်းလွှာ subscription modal သည် fixed၊ အောက်ဘယ်ဘက် panel တစ်ခုဖြစ်သည်။ closable subscription panel ကို viewport ၏အောက်ခြေတွင် ထားရှိသည်။ အလုံးစုံထင်မြင်ချက်မှာ ပုံမှန် e-commerce layout ထက် ပြတိုက် catalog သို့မဟုတ် အယ်ဒီတာ့အာဘော် spread တစ်ခုဖြစ်သည်။
ဓာတ်ပုံပညာဟာ အမှတ်တံဆိပ်ရဲ့ အဓိကအကြောင်းအရာနဲ့ ဘာသာစကားပါ။ မှတ်ပုံတင်နှစ်ခု တစ်ပြိုင်နက်တည်း ရှိနေပါတယ်- (၁) ထုတ်ကုန်ရဲ့ အဖြူအမည်းပုံကြီးတွေကို လက်ထဲမှာ ကိုင်ထားပြီး၊ လေးထောင့်ပုံစံ ဒါမှမဟုတ် ၃:၄ အချိုးနဲ့ ဖြတ်ထားတဲ့၊ ဆန့်ကျင်ဘက်အရောင်မြင့်မားစွာ ပုံဖော်ထားတဲ့၊ အရာဝတ္ထုဟာ လူနေမှုပုံစံနဲ့ မကိုက်ညီဘဲ ဘောင်ကို ဖြည့်ပေးပါတယ်။ (၂) နွေးထွေးတဲ့ သဘာဝအလင်းရောင်အောက်မှာ အရောင်အပြည့်နဲ့ လူနေမှုပုံစံဓာတ်ပုံတွေ၊ မြေကြီးရောင်နဲ့ ရှုခင်းတွေ၊ အိတ်တွေနဲ့ ရွေ့လျားနေတဲ့ မော်ဒယ်တွေ၊ မြင်ကွင်းအနက်နည်းနည်းနဲ့ အနိမ့်ထောင့်ကနေ ရိုက်ကူးထားတာပါ။ မီးခိုးရောင်နဲ့ အရောင်အပြည့်ပုံတွေကို အလှည့်ကျ ပြောင်းလဲအသုံးပြုတာက စာမျက်နှာပေါ်မှာ တစ်ခုတည်းသော အမြင်အာရုံစည်းချက်ကို ဖန်တီးပေးပါတယ်။ ရုပ်ပုံတွေ၊ 3D render တွေ၊ abstract ဂရပ်ဖစ်တွေ မပါဝင်ပါဘူး။ ရုပ်ပုံတွေက စာမျက်နှာတစ်ခုလုံးကို နေရာယူထားပြီး၊ အချင်းဝက် သုညနဲ့ နယ်နိမိတ်မရှိတဲ့ grid cell တွေထဲမှာပါ။ အိုင်ကွန်တွေ မရှိတာ ဒါမှမဟုတ် အနည်းငယ်သာရှိပါတယ်—ပိတ်ဖို့ ရိုးရှင်းတဲ့ cross ပါပဲ၊ ဒီထက် ဘာမှ မပိုပါဘူး။
ရောင်စုံ
ကြားနေ
- Obsidian Ink
#1c1717— အသုံးပြုသူမျက်နှာပြင်တစ်လျှောက်ရှိ အဓိကစာသား၊ စာသားလင့်ခ်အားလုံး၊ ကိုယ်ထည်စာသား၊ ခေါင်းစဉ်များ၊ အိုင်ကွန်အကြမ်းဖျင်းများနှင့် သိမ်မွေ့သောနယ်နိမိတ်မျဉ်းများ။ ဤသည်မှာ အဓိကအရောင်ဖြစ်သည် - အဖြူရောင်နောက်ခံပေါ်တွင် 17.7:1 အချိုး၊ ဖြစ်ရပ်ပေါင်း ၅၀၀၀ ကျော်တွင်အသုံးပြုသည်။ ၎င်း၏ အလွန်သိမ်မွေ့သောနွေးထွေးသောအရောင် (စစ်မှန်သောအနက်ရောင်မဟုတ်ပါ) သည် မျက်နှာပြင်တစ်ခုထက် ပုံနှိပ်ထားသောကတ်တလောက်တစ်ခု၏ခံစားချက်ကို ပေးစွမ်းသည်။ - Paper
#ffffff— မျက်နှာပြင်အရောင်ဖျော့ဖျော့များပေါ်ရှိ ပါးလွှာသောဘောင်များ၊ ပိုင်းခြားထားသောအပိုင်းများ၊ ထည့်သွင်းသည့်အကွက်မျဉ်းများနှင့် ကတ်အနားများ။ ဤအရောင်ကို call-to-action ခလုတ်များအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုပါနှင့်။ - Bone
#f0f0f0— အပိုင်းများကို အပြန်အလှန်ပြောင်းလဲရန်၊ သိမ်မွေ့သော နောက်ခံအကန့်များနှင့် အတွင်းပိုင်းနယ်နိမိတ်များ/ပိုင်းခြားရန် ဒုတိယမျက်နှာပြင်။ ၎င်းသည် စက္ကူ၏အဖြူရောင်နှင့် ကြော်ငြာ၏ အစိမ်းဖျော့ဖျော့ကြားတွင် သိမ်မွေ့သော နွေးထွေးသော မီးခိုးရောင်ကို ဖန်တီးပေးသည်။ - Eucalyptus Mist
#a9aea9— စာမျက်နှာရဲ့ထိပ်ဆုံးမှာရှိတဲ့ ဘန်နာကြော်ငြာနောက်ခံ၊ အပိုင်းတွေကြားက အရောင်အကူးအပြောင်းတွေနဲ့ တတိယမြောက်ဘောင်။ သူ့အလိုလို မီးခိုးရောင်နီးပါးပေါ်လာပေမယ့် အကျယ်အပြည့်သုံးတဲ့အခါ သိမ်မွေ့တဲ့ sage hue ကိုရပြီး monochrome ပုံစံမှာ တစ်ခုတည်းသော အရောင်အနှစ်သာရဖြစ်ပါတယ်။
စာလုံးပုံစံ
၁၁ မှ ၃၂px အထိ · အဆင့် ၅ ဆင့်
- Sohne Web — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400 · interface style တစ်ခုလုံး—အဓိကစာသား၊ navigation၊ link များ၊ headings များ၊ ခလုတ်များ၊ input field များ၊ icon များနှင့် image caption များ—ကိုအသုံးပြုထားသည်။ 400-weight Sohne font (bold variants များ မတွေ့ရပါ) သည် MAKR ကို ၎င်း၏ တိတ်ဆိတ်ငြိမ်သက်သော်လည်း ယုံကြည်မှုရှိသော ဖော်ပြနိုင်စွမ်းကို ပေးသည်- အချက်အလက်များကို အရွယ်အစားနှင့် စာလုံးအကွာအဝေးမှတစ်ဆင့် ပေးပို့ပြီး အလေးချိန် ဆန့်ကျင်ဘက်အားဖြင့် မဟုတ်ပါ။ အခြားရွေးချယ်စရာများ- Inter, Söhne သို့မဟုတ် Untitled Sans။
- CircularXXMonoWeb — အစားထိုးခြင်း: JetBrains Mono · မျဉ်းကြောင်းများ 400 · ရံဖန်ရံခါ နည်းပညာဆိုင်ရာ ညွှန်ကြားချက်များ သို့မဟုတ် ထုတ်ကုန်သတ်မှတ်ချက်များအတွက်သာ အသုံးပြုသည်—neo-grotesque စည်းချက်ကို ချိုးဖျက်သည့် monospaced တိုးတိုးလေး။ ထုတ်ကုန်ကုဒ်၊ ပစ္စည်းသတ်မှတ်ချက်များ၊ အခြားမည်သည့်အရာကိုမျှ ချွေတာစွာအသုံးပြုပါ။ အစားထိုးရန်- JetBrains Mono သို့မဟုတ် IBM Plex Mono။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 5-8px |
| ခလုတ်အချင်းဝက် | 0px |
| ကတ်အချင်းဝက် | 0px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 80-120px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို MAKR ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- FARFETCH España — "အဖြူရောင်တုံး" ပုံစံ ဖက်ရှင်ပြခန်း။ နံရံများ၊ ကြမ်းပြင်များနှင့် ပရိဘောဂများကို အဖြူရောင်ဖြင့် သုတ်လိမ်းထားပြီး အဝတ်အစားများနှင့် ဝတ်ဆင်သူများသာ အရောင်အသွေး၊ အသားနှင့် အမြင်အာရုံ ဖော်ပြချက်တိုင်းကို ဖန်တီးပေးသည့် အဆင့်မြင့် လက်လီအရောင်းဆိုင်တစ်ခုကို မြင်ယောင်ကြည့်ပါ။
- Franco Maria Ricci Editore — အာ့တ်ဒီကို ပြခန်း ကတ်တလောက် - ကြည်လင်သော အဖြူရောင် စက္ကူပေါ်တွင် ඔප දැමීම ရွှေရောင်မျဉ်းကြောင်းများ
- Laura Monin — အယ်ဒီတာ့အာဘော်ပြခန်းနံရံ၊ အဖြူရောင်စကျင်ကျောက်၊ မင်တံဆိပ်ခေါင်း
- OhDada — အယ်ဒီတာ့အာဘော်ပြခန်းနံရံ
- Cursor — မီးခိုးတလူလူဖြင့် ထွန်းထားသော သက်တောင့်သက်သာရှိသော သိုးသားရေချုပ်အလုပ်ရုံ
- Structured — ပလတ်စတစ်စက္ကူကဲ့သို့ စက္ကူပေါ်တွင် ရီနေးဆွန်းစ်ပြခန်း
- MindMarket — ခရင်မ်စက္ကူပေါ်တွင် ရေးသားထားသော ဇာတ်လမ်းပုံပြင်စာအုပ်တစ်အုပ် - နေရောင်စိုစွတ်ပြီး စတစ်ကာကဲ့သို့ နူးညံ့သော မျက်နှာပြင်ပေါ်တွင် ကြီးမားသော ခေါင်းစဉ်များနှင့် ဖြတ်ထုတ်ထားသော စက္ကူဇာတ်ကောင်များ တစ်ပြိုင်နက်တည်း ရှိနေသည့် ဖော်ရွေသော အယ်ဒီတာ့အာဘော် ပတ္တူတစ်ခုဖြစ်သည်။
- Airbnb — သန္တာရောင် စာညှပ်တစ်ခုပါသည့် တိတ်ဆိတ်ငြိမ်သက်သော အဖြူရောင် ပြခန်းနံရံတစ်ခု
- Apple (España) — ပြတိုက်ပြခန်းသည် နေ့အလင်းရောင်ဖျော့ဖျော့အောက်တွင် တစ်ခုတည်းသော ဆွဲဆောင်မှုရှိသော အလေးချိန်မဲ့ အဖြူရောင်နေရာတစ်ခုဖြစ်ပြီး ပြပွဲတစ်ခုစီကို အရောင်ဖျော့ဖျော့ဖြင့် အလှဆင်ထားသော မီးအိမ်ဖြင့် ထွန်းလင်းထားသည်။
- Lamborghini — ကားပြခန်းမှာ အနက်ရောင်ကိုယ်ထည်၊ မီးရောင်အောက်မှာ - အဝါရောင်ကားတစ်စီး
- Amplemarket — နေရောင်အောက်က အလုပ်ခွင်ဟာ စက္ကူစတွေနဲ့ ပြန့်ကျဲနေတယ်
- Getharvest — ရွှေရောင်အချိန်အခါတွင် စားပွဲတစ်လုံး - နွေးထွေးသော ခရင်မ်ပတ္တူတစ်ချပ်၊ ပတ္တူပေါ်တွင် ချိတ်ဆွဲထားသော အဖြူရောင်ပို့စကတ်များနှင့် တောက်ပသော လိမ္မော်ရောင်မီးတောက်တစ်ခု