INO
တိတ်ဆိတ်ငြိမ်သက်နေသော ပြတိုက်ပြခန်းတစ်ခု - ပြပွဲတစ်ခုစီသည် အဖြူရောင်နေရာတစ်ခုတွင် လွင့်မျောနေပြီး မှန်နောက်ကွယ်ရှိ အရာဝတ္ထုတစ်ခုကဲ့သို့ အနက်ရောင်နီးပါး၊ ကြားရခဲသော စာလုံးများဖြင့် ဘောင်ခတ်ထားသည်
INO သည် ကြည်လင်ပြတ်သားသော အဖြူရောင်ပတ္တူ၊ နွေးထွေးသော အနက်ရောင်မင်တစ်ခုတည်းနှင့် အရောင်လုံးဝနီးပါးမရှိခြင်းတို့ဖြင့် လက်ဝတ်ရတနာပြခန်းတစ်ခုအဖြစ် လုပ်ဆောင်သည်။ အမြင်အာရုံစနစ်သည် လက်စွပ်တစ်ကွင်းစီကို ပြတိုက်တစ်ခုကဲ့သို့ သဘောထားသည် - ကျယ်ပြန့်သော အနုတ်လက္ခဏာအာကာသတွင် ပေါလောမျောနေသော ဆေးခန်းထုတ်ကုန်ဓာတ်ပုံများကို ဖောင့်စကေး သို့မဟုတ် အရောင်မှတစ်ဆင့်မဟုတ်ဘဲ အနေအထား၊ စာလုံးအကွာအဝေးနှင့် အဖြူရောင်ပမာဏမှတစ်ဆင့် အဆင့်ဆင့်တည်ဆောက်ထားသည်။ လမ်းညွှန်သည် စာမျက်နှာ၏အောက်ခြေတွင် တည်ရှိပြီး ရိုးရာ e-commerce အပေါ်ဘားကို ရည်ရွယ်ချက်ရှိရှိ ပြောင်းပြန်လှန်ခြင်းဖြစ်သည့် အညွှန်းများပါသည့် အစက်လေးစက် (ဖြည့်ထားသည် သို့မဟုတ် ဗလာ) ပါဝင်သည်။ အမှတ်တံဆိပ်အမှတ်တံဆိပ်ကိုယ်တိုင်က ထုတ်ကုန်၏ပုံသဏ္ဍာန်ကို ထင်ဟပ်စေပြီး လိုဂိုထက် စာလုံးပုံစံရုပ်တုအဖြစ် ဆောင်ရွက်ပေးသည်။
အများဆုံး အကြောင်းအရာ အကျယ်ကန့်သတ်ချက်မရှိသော အကျယ်အပြည့် ပတ္တူ။ အဓိက မျက်နှာပြင်သည် စာမျက်နှာ၏ အကျယ်တစ်ခုလုံးကို နေရာယူထားပြီး ဓာတ်ပုံများနှင့် ဂရပ်ဖစ်များကို ညီတူညီမျှ ခွဲထားသည် (၅၀/၅၀)။ ထုတ်ကုန်ဇယားကွက်များကို viewport ၏ အစွန်းမှ ကျယ်ပြန့်သော အလျားလိုက် အနားသတ်ဖြင့် ကော်လံသုံးခုပါ အတန်းများအဖြစ် ပြသထားသည်။ အောက်ခြေ navigation ကို ပင်ထိုးမည့်အစား အလယ်ဗဟိုတွင် ထားပြီး စာမျက်နှာ footer နှင့် ချိတ်ဆက်ထားသည်။ အပိုင်းခွဲများသည် မျက်နှာပြင်အပြည့် အယ်ဒီတာ့အာဘော် ဓာတ်ပုံ သို့မဟုတ် ဖြူစင်သော အဖြူရောင် နေရာလွတ်ကို အသုံးပြုသည် - အရောင်ဘား၊ ပိုင်းခြားမျဉ်း သို့မဟုတ် gradient ကို ဘယ်တော့မှ မသုံးပါ။ ဒေါင်လိုက် စည်းချက်သည် လွတ်လပ်သည်- အဓိက အပိုင်းများကြားတွင် ၈၀/၁/၁ ရှိပြီး အကြောင်းအရာများဖြင့် ပြည့်နေမည့်အစား စာမျက်နှာကို အသက်ရှူနိုင်စေသည်။ ဘေးဘား၊ mega-menu၊ အပေါ် header bar မရှိပါ။ "INO" လိုဂိုသည် အဓိက မျက်နှာပြင်၏ အပေါ်ဘယ်ဘက်ထောင့်တွင်သာ တည်ရှိသည်။
ကွဲပြားသော ရုပ်ပုံပြသမှုပုံစံနှစ်ခု တွဲဖက်တည်ရှိသည်- ပြားချပ်ချပ်၊ မီးခိုးရောင်ဖျော့ဖျော့၊ ချောမွေ့သောနောက်ခံပေါ်တွင် ဆေးခန်းထုတ်ကုန်ဓာတ်ပုံရိုက်ကူးခြင်း (လက်စွပ်တစ်ခုစီကို အလယ်ဗဟိုတွင် ရိုက်ကူးထားပြီး လက်များ၊ စတိုင်ကျသောပစ္စည်းများ သို့မဟုတ် မျက်နှာပြင်အရိပ်များမပါဘဲ—အရာဝတ္ထုသည် ဇာတ်လိုက်ဖြစ်သည်) နှင့် ဇာတ်ကြောင်းပြော အယ်ဒီတာ့အာဘော်ပုံများ (မြက်ခင်းပြင်အတွင်းရှိ လက်စွပ်၊ လက်တစ်ဖက်သည် သံကြိုးကိုင်ထားသည်)၊ desaturated၊ မျက်နှာပြင်အပြည့် အယ်ဒီတာ့အာဘော်အပိုင်းအစများအဖြစ် ပြုလုပ်ထားသည်။ ထုတ်ကုန်ပုံများသည် ထုတ်ကုန်ကတ်များအဖြစ် ဆောင်ရွက်ပေးပြီး အယ်ဒီတာ့အာဘော်ပုံများသည် အမှတ်တံဆိပ်၏ စိတ်ခံစားချက်ကို ဖော်ပြပေးသည်။ နှစ်မျိုးလုံးသည် monochrome သို့မဟုတ် near-monochrome ဖြစ်သည်—အဓိကပုံရှိ မြက်ခင်းသည် အစိမ်းရောင်အရိပ်အမြွက်တစ်ခုတည်းသာရှိပြီး ၎င်းပင်လျှင် သစ်တောအရောင်သို့ လျော့ထားသည်။ interface တွင် အိုင်ကွန်များကို အသုံးမပြုပါ—ဗဟိုပြုလက်စွပ်သင်္ကေတသည် အိုင်ကွန်ပုံအားလုံးကို အစားထိုးသည်။
ရောင်စုံ
ကြားနေ
- Obsidian Ink
#212123— ကြားနေပုံစံအခြေအနေများ၊ အိုင်ကွန်စာသားနှင့် အရောင်ပုံစံများသည် မမြင်သာအောင်ရှိနေရမည့် မသိမသာ UI တုံ့ပြန်ချက်။ - Bone
#ffffff— ပတ္တူစာမျက်နှာများ၊ ကတ်ထူပြားမျက်နှာပြင်များ၊ မှောင်မိုက်သောနောက်ခံပေါ်ရှိ ပြောင်းပြန်စာသား။ အဓိကမျက်နှာပြင်၊ ဝဘ်ဆိုက်တစ်ခုလုံးနီးပါးသည် ဤနေရာတွင်ရှိသည်။ - Carbon
#000000— လမ်းညွှန်အမှတ်ညွှန်ပြချက်အတွက် အိုင်ကွန်ဖြည့်ခြင်း၊ အလှဆင်ဂရပ်ဖစ်မျဉ်းကြောင်းများနှင့် တက်ကြွသောအခြေအနေဖြည့်ခြင်း။ "အရိုး" အရောင်နှင့် အမြင့်ဆုံးတန်ချိန်ဆန့်ကျင်ဘက်အတွက် အနည်းငယ်သာအသုံးပြုသည်။ - Ash
#999999— အလတ်စား ဆန့်ကျင်ဘက် နယ်နိမိတ်များ၊ ထိန်းချုပ်မှု မျဉ်းကွေးများနှင့် ဖွဲ့စည်းတည်ဆောက်ပုံ ပိုင်းခြားမှုများ။ - Pebble
#a6a6a7— နောက်ခံစာသားကို သိမ်မွေ့စွာ ပံ့ပိုးပေးခြင်း၊ အဓိကစာသားအတွက် ပါးလွှာသော ခွဲထုတ်ကိရိယာများနှင့် ဒုတိယမက်တာဒေတာ။ အပေါ့ပါးဆုံး လုပ်ဆောင်နိုင်သော မီးခိုးရောင်ကို ဈေးနှုန်းတဂ်များနှင့် နောက်ခံသို့ ဆုတ်သွားသင့်သည့် စာသားအတွက် အသုံးပြုသည်။
စာလုံးပုံစံ
၁၁ မှ ၁၈ px အထိ · အဆင့် ၄ ဆင့်
- Sequel100Wide — အစားထိုးခြင်း: Jost (400 · မျဉ်းကြောင်းများ 400 · လမ်းညွှန်ချက်၊ ကိုယ်ထည်စာသား၊ ခေါင်းစဉ်များ၊ ခေါင်းစဉ်များ၊ ဈေးနှုန်းများနှင့် စာတန်းထိုးများ—အခြေအနေအားလုံးတွင် သီးသန့်အသုံးပြုသည့် တစ်ခုတည်းသော ကော်ပိုရိတ်ဖောင့်။ စာလုံးအကွာအဝေး ကျယ်ဝန်းစွာပါရှိသော ဂျီဩမေတြီသင်္ကေတသည် ကော်ပိုရိတ်စတိုင်တစ်ခုလုံးကို ထင်ဟပ်စေသည်။ ရဲရင့်သောအလေးချိန်မရှိခြင်းသည် ရည်ရွယ်ချက်ရှိရှိဖြစ်သည်- ဖောင့်အလေးချိန်ကွဲပြားခြင်းထက် စာလုံးကြီးများ၊ စာလုံးအကွာအဝေးနှင့် နေရာချထားခြင်းဖြင့် အဆင့်ဆင့်ကို ရရှိသည်။
- Arial — အစားထိုးခြင်း: system-ui · မျဉ်းကြောင်းများ 400 · legacy context များတွင် button များကို render လုပ်ရန်အတွက် system-wide fallback တစ်ခု။ ၎င်းသည် branding ၏ အစိတ်အပိုင်းမဟုတ်ပါ - Sequel100Wide သည် load မလုပ်သည့်အခါတွင်သာ ပေါ်လာသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 23px |
| ခလုတ်အချင်းဝက် | 50px |
| ကတ်အချင်းဝက် | 8px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 80-120px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို INO ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Airbnb — သန္တာရောင် စာညှပ်တစ်ခုပါသည့် တိတ်ဆိတ်ငြိမ်သက်သော အဖြူရောင် ပြခန်းနံရံတစ်ခု
- Peak Design — ပြခန်းနံရံ၊ တစ်စိတ်တစ်ပိုင်း အလင်းရောင်
- 099 SUPPLY — အဖြူအမည်း အရာဝတ္ထုတွေနဲ့ ပြည့်နေတဲ့ ပြခန်းနံရံ
- Apple (España) — အဖြူရောင်ပြခန်းပြသမှုခွက်
- Apple (España) — မနက်ခင်းမြူခိုးတွေကြားက ပြခန်းပြတင်းပေါက်တစ်ခု
- Custo — တစ်ထပ်တည်းကျတဲ့ ဖောင့်နဲ့ သေနတ်ရောင်ပြခန်း။ မီးခိုးရောင်-အစိမ်းရောင် ရောစပ်ထားတဲ့ ပြခန်းတစ်ခု၊ အဲဒီမှာ မှောင်မိုက်တဲ့ အရာဝတ္ထုတစ်ခုတည်းနဲ့ 57px ဖောင့်က သူ့အလိုလို ပြောပြနေတယ်။
- Silencio — ပေါလောမျောနေသော ရှေးဟောင်းပစ္စည်းများပါသည့် အဖြူရောင်အခန်း။ နွေးထွေးသောစက္ကူဖြင့်ပြုလုပ်ထားသော ပြခန်းပြသမှုတစ်ခု၊ အနုတ်လက္ခဏာထုထည်နောက်ခံတွင် အစိတ်အပိုင်းတစ်ခုစီသည် ၎င်း၏နေရာယူထားပြီး တိတ်ဆိတ်မှုသည် ရည်ရွယ်ချက်ရှိရှိ ဒီဇိုင်းဆုံးဖြတ်ချက်တစ်ခုဖြစ်သည်။
- Oakâme — နေရောင်အောက်က ပူနွေးတဲ့ ကျောက်တုံးတွေနဲ့ ထွင်းထားတဲ့ Provençal အလုပ်ရုံတစ်ခု
- Nike — အားကစားအောင်မြင်မှုများ၏ monochrome ပြခန်း - အဖြူရောင်နံရံများ၊ အနုပညာလက်ရာတစ်ခုအနေဖြင့် ထုတ်ကုန်၊ chrome သည် နောက်ခံတွင် ပျောက်ကွယ်သွားသည်
- Sociotype — အဖြူရောင်စက္ကူပေါ်က ပုံမှန်ပြတိုက်နမူနာတစ်ခု
- Arc — သန်းခေါင်ယံရေပြင်ပေါ်က စက်မှုဇုန်အဖြူရောင်ပြခန်း
- Rivian — ပြခန်း၏ ကွန်ကရစ်နံရံပေါ်ရှိ လျှပ်စစ်ကျောက်တိုင်တစ်တိုင်။ Rivian သည် မော်တော်ယာဉ်တစ်ခုစီကို ကျယ်ပြန့်သော အဖြူရောင်အာကာသကို ထုလုပ်ထားသော ပန်းပုရုပ်တစ်ခုအဖြစ် တင်ပြထားပြီး၊ စာလုံးအရွယ်အစားကြီးမားလွန်းသောကြောင့် ဗိသုကာလက်ရာတစ်ခုဖြစ်လာကာ၊ မက်တီမျက်နှာပြင်ပေါ်ရှိ နေရောင်ခြည်ကဲ့သို့ တစ်ရောင်တည်းသောလေထုကို ဖြိုခွင်းပေးသည့် နွေးထွေးသောအဝါရောင်တစ်ခုတည်းဖြင့် တင်ပြထားသည်။