
Glossier
နေရောင်ဓာတ်ပုံရိုက်ကူးမှု - အဖြူရောင်စက္ကူ၊ မင်အနက်၊ အဝါရောင်တောက်တောက်တစ်ခု
Glossier က ဒစ်ဂျစ်တယ်အလှအပမဂ္ဂဇင်းတစ်ခုလို လုပ်ဆောင်ပေးပါတယ်- အဖြူနဲ့အနက်ရောင်နီးပါး တစ်ရောင်တည်းကျတဲ့ ပတ္တူတစ်ခုဖြစ်ပြီး အမှတ်တံဆိပ်ရဲ့ လိုဂိုနဲ့ တစ်ခုတည်းသော လုပ်ဆောင်ချက်ကို လှုံ့ဆော်ပေးတဲ့ တက်ကြွတဲ့ အဝါရောင်တစ်ခုတည်းနဲ့ အမှတ်အသားပြုထားပါတယ်။ ဒီစနစ်ကို အယ်ဒီတာ့အာဘော်အရ ကန့်သတ်ထားပါတယ်- အရွယ်အစားကြီးမားတဲ့ Apercu ခေါင်းစဉ်တွေ၊ စာသားနေရာကျယ်ကျယ်၊ စိတ်ခံစားမှုအများစုကို သယ်ဆောင်ထားတဲ့ စာမျက်နှာအပြည့် လူနေမှုပုံစံဓာတ်ပုံတွေနဲ့ လက်တွေ့အကောင်အထည်ဖော်ရာမှာ အသုံးဝင်ပါတယ်- ပြားချပ်ချပ် ထုတ်ကုန်ကတ်တွေ၊ အနားသတ်ပါးလွှာမှုနဲ့ အလှဆင်မှုလုံးဝမပါဝင်ပါဘူး။ အဝါရောင်က ဒုတိယအမှတ်တံဆိပ်အရောင်မဟုတ်ပါဘူး။ အမှတ်တံဆိပ်ရဲ့အရောင်ဖြစ်ပြီး အနည်းငယ်သာအသုံးပြုတာကြောင့် အသွင်အပြင်တိုင်းက ကင်မရာမီးရောင်လို ခံစားရစေပါတယ်။ ကျန်တာအားလုံးက နောက်ခံထဲကို ပျောက်ကွယ်သွားစေဖို့ ရည်ရွယ်ပါတယ်- ကြားနေအရောင်တွေက နွေးထွေးတဲ့ မီးခိုးရောင်တွေဖြစ်ပြီး အနားသတ်တွေက သိမ်မွေ့ပြီး စာလုံးပုံစံက သိပ်သည်းပြီး အကျဉ်းချုံးထားပါတယ်။ ရလဒ်အနေနဲ့ ယုံကြည်မှုရှိတဲ့၊ ရိုးရှင်းပြီး ခေတ်မီတဲ့ စတိုးဆိုင်တစ်ခု ဖြစ်လာပါတယ်။
စာမျက်နှာတွင် မျက်နှာပြင်အပြည့် အပိုင်းများကို ဒေါင်လိုက် စီစဉ်ထားပြီး တစ်ခုချင်းစီကို သီးခြား အယ်ဒီတာ့အာဘော် ဖြန့်ကျက်မှုအဖြစ် ဒီဇိုင်းထုတ်ထားသည်။ အဓိက အပိုင်းသည် စာမျက်နှာ၏ အောက်ခြေတစ်ခုလုံးကို နေရာယူထားသော အဖြူရောင် အပေါ်ယံလွှာ (ဘယ်ဘက်အပေါ်ထောင့်) နှင့် အဝါရောင် လိုဂိုကြီးတစ်ခုပါရှိသော အကျယ်အပြည့် ဓာတ်ပုံတစ်ခုဖြစ်သည်။ အဓိက အပိုင်းအောက်တွင် အပိုင်းများသည် မျက်နှာပြင်အပြည့် ပုံများနှင့် သီးခြားကတ်များ၏ ဇယားကွက်များကြားတွင် တစ်လှည့်စီ စီထားသည်။ အမျိုးအစားများ (အသားအရေထိန်းသိမ်းမှု/မိတ်ကပ်) ကို ပုံအချိုးညီမျှသော (၅၀/၅၀) ကော်လံနှစ်ခုအဖြစ် ပိုင်းခြားခြင်းသည် မြင်သာသော ဘောင်မပါဘဲ ဖြစ်ပေါ်သည်—ပုံများကို ဆက်သွယ်ထားသော မျဉ်းတစ်ကြောင်းသာ ၎င်းတို့ကို ပိုင်းခြားထားသည်။ ထုတ်ကုန်ကတ်တလောက်သည် #f7f7f7 ပတ္တူပေါ်တွင် စတုရန်းကတ်များ၏ ကော်လံလေးခုပါ ဇယားကွက်ကို အသုံးပြုသည်။ လမ်းညွှန်သည် အပေါ်ဘက်တွင် ဒုတိယကြော်ငြာလိုင်းပါသည့် minimalist top bar ဖြစ်သည်။ အပိုင်းများကြားရှိ ကွာဟချက်များသည် အတော်လေး ကြီးမားသည် (၆၄px)၊ သို့သော် အပိုင်းများကြားရှိ အကူးအပြောင်းများသည် ချောမွေ့သည်—နွေးသော footer မှလွဲ၍ ပိုင်းခြားခြင်း သို့မဟုတ် နောက်ခံအရောင်များ အပြန်အလှန် မပါဘဲ။ အလုံးစုံ စည်းချက်မှာ- ဓာတ်ပုံ၊ စာသား၊ ဓာတ်ပုံ၊ ဇယားကွက်၊ ဓာတ်ပုံ - ဖက်ရှင်မဂ္ဂဇင်းတစ်စောင်ကို လှန်လှောကြည့်သကဲ့သို့ ဖြစ်သည်။
ဓာတ်ပုံပညာသည် အဓိကအမြင်အာရုံဘာသာစကားဖြစ်သည်။ ကြည့်ရှုသည့်နေရာတစ်ခုလုံးသည် လူနေမှုပုံစံပုံရိပ်များနှင့် ပုံတူများ—နွေးထွေးသော ရွှေရောင်အချိန်အလင်းရောင်၊ အသားအရေ၏ နူးညံ့သောအနီးကပ်ပုံများ၊ နေရောင်ခြည်နောက်ခံတွင် ထုတ်ကုန်ပုလင်းများကို ကိုင်ဆောင်ထားသော လက်များဖြင့် ပြည့်နှက်နေသည်။ ဓာတ်ပုံများရှိ အရောင်ပေါင်းစပ်မှုများသည် နွေးထွေးပြီး မပြည့်ဝပါ- မက်မွန်ရောင်ကောင်းကင်၊ မြေရိုင်းအသားအရေ၊ နက်ရှိုင်းသောပင်လယ်ပြာရောင်။ ရုပ်ပုံများသည် စာမျက်နှာမျက်နှာပြင်တစ်ခုလုံးကို အဝိုင်းထောင့်များ၊ ဘောင်များ သို့မဟုတ် အလွှာများမပါဘဲ အမြဲတမ်းနေရာယူထားပြီး အဖြူရောင်စာသားကတ်များ သို့မဟုတ် အဝါရောင်လိုဂိုမှလွဲ၍။ ကတ်တလောက်ကတ်များပေါ်ရှိ ထုတ်ကုန်ဓာတ်ပုံများကို ဖြူဖွေးသန့်စင်သော ချောမွေ့သောနောက်ခံတွင် ပြားချပ်ချပ်နှင့် ညီညာသောအလင်းရောင်ဖြင့် ရိုက်ကူးထားသည်။ ပုံနှင့်စာသားအချိုးမှာ ၇၀/၃၀ ခန့်ရှိပြီး ပုံများသည် စိတ်ခံစားမှု၊ စာသား၊ လုပ်ဆောင်ချက်ကို ဖော်ပြပေးသည်။ ရုပ်ပုံများ မပါဝင်ပါ၊ abstract ဂရပ်ဖစ်များ မပါဝင်ပါ၊ 3D ပုံစံများ မပါဝင်ပါ။
ရောင်စုံ
အမှတ်တံဆိပ်
- Glossier Yellow
#fff116— အဝါရောင်ကို အလှဆင်အသေးစိတ်အချက်အလက်များအတွက် ဒုတိယအသားပေးအရောင်အဖြစ် အသုံးပြုပြီး အသုံးနည်းသော ရှာဖွေမှုများကို မီးမောင်းထိုးပြရန်အတွက် အသုံးပြုသည်။ ၎င်းကို လုပ်ဆောင်ရန် လှုံ့ဆော်မှုအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။
ကြားနေ
- Ink
#000000— ကိုယ်ထည်စာသား၊ လမ်းညွှန်လင့်ခ်များ၊ အဓိကစာသား၊ အောက်ခြေစာသား၊ အိုင်ကွန်အကြမ်းဖျင်းများ၊ ပါးလွှာသောဘောင်များ၊ ထင်ရှားသောစာလုံးပုံစံနှင့်ဖွဲ့စည်းပုံဆိုင်ရာအရောင်။ - Paper
#ffffff— ထုတ်ကုန်ကတ်မျက်နှာပြင်များ၊ ဖြည့်ဧရိယာများ၊ မြှင့်တင်ထားသော ပြားများ၊ အထပ်တွင် အတောက်ပဆုံး မျက်နှာပြင်အဆင့်။ - Fog
#f7f7f7— စာမျက်နှာကင်းဗတ်၊ အပိုင်းနောက်ခံများ၊ စာမျက်နှာပေါ်ရှိ ရုပ်ပုံများအကြား အကူးအပြောင်းများ၊ ဝဘ်ဆိုက်တစ်ခုလုံးတည်ရှိရာ အခြေခံမျက်နှာပြင်။ - Blush
#faf2f4— အောက်ခြေနောက်ခံ၊ နူးညံ့သော နွေးထွေးသည့် အပိုင်းခွဲကိရိယာများ၊ သိမ်မွေ့သော ပန်းရောင်-အဖြူရောင်သည် စာမျက်နှာများ၏ အောက်ခြေကို နွေးထွေးမှု ထပ်လောင်းပေးသည်။ - Mist
#f0f0f0— မမြင်သာသောနောက်ခံဖန်တီးရန်နှင့် အပိုင်းများကို ခွဲထုတ်ရန်အတွက် ပေါ့ပါးသောထောက်ပံ့မှုမျက်နှာပြင်။ ၎င်းကို လုပ်ဆောင်ရန် လှုံ့ဆော်မှုအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။ - Ash
#e8e8e8— ထည့်သွင်းအကွက်ဘောင်များ၊ အိုင်ကွန်နောက်ခံများ၊ ပါးလွှာသော ခွဲထုတ်မျဉ်းများ၊ ကတ်များနှင့် ပုံစံဒြပ်စင်များအတွက် ဖွဲ့စည်းပုံဆိုင်ရာ ဘောင်အရောင်။
စာလုံးပုံစံ
၁၂ မှ ၃၂px အထိ · အဆင့် ၅ ဆင့်
- Apercu — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 500, 700 · အဓိက စာလုံးပုံစံကို user interface တစ်လျှောက်လုံးတွင် အသုံးပြုထားသည်—body copy 16px/400၊ navigation နှင့် captions 12–14px/500၊ subheadings များကို 20px/500 နှင့် အယ်ဒီတာ့အာဘော် ခေါင်းစဉ်များကို 32px/700 တို့တွင် အသုံးပြုထားသည်။ Apercu ၏ geometric၊ humanistic ဒီဇိုင်းသည် brand ကို ခေတ်မီသော ပုံစံဖြင့် ပေးစွမ်းသည်။ စာလုံး သုညနီးပါးအကွာအဝေး (0.002–0.003em) သည် စာလုံးပုံစံကို လေဝင်လေထွက်ကောင်းခြင်း သို့မဟုတ် ဖော်ရွေခြင်းထက် ကျစ်လစ်ပြီး မဂ္ဂဇင်းကဲ့သို့ ဖြစ်စေသည်။ 700 အလေးချိန်ကို UI element များအတွက်မဟုတ်ဘဲ အယ်ဒီတာ့အာဘော်များတွင် display element များအတွက်သာ သီးသန့်ထားရှိသည်။
- Apercu Mono — အစားထိုးခြင်း: JetBrains Mono or IBM Plex Mono · မျဉ်းကြောင်းများ 400 · ကုဒ်ဘေးရှိ အော်ဒါမက်တာဒေတာ၊ ခြေရာခံနံပါတ်များနှင့် အညွှန်းများအတွက် အသေးစားအသုံးဝင်သော စာစီစာရိုက်ပုံစံ၊ monospaced ဗားရှင်းသည် အချိုးကျသော ခန္ဓာကိုယ်အမျိုးအစားနှင့် ဆန့်ကျင်ဘက်ဖြစ်သော နည်းပညာဆိုင်ရာ texture ကို ဖန်တီးပေးသည်။
- GTStandard-M — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400 · GTStandard-M - ထုတ်ယူထားသောဒေတာတွင် တွေ့ရှိသော်လည်း AI မှ မဖော်ပြထားပါ။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ပျမ်းမျှ |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 0px |
| ကတ်အချင်းဝက် | 0px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 64px |
| စာမျက်နှာအကျယ် | 1440px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Glossier ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Lightship — လမ်းမကြီးရဲ့ ရုပ်ရှင်ပုံစံ ဒိုင်ယိုရာမာတစ်ခု။ နီးကပ်စွာ တပ်ဆင်ထားတဲ့ ရှုခင်းဓာတ်ပုံကြီးတွေနဲ့ အလှဆင်ထားတဲ့ နွေးထွေးတဲ့ ခရင်မ်ရောင်ပြခန်းနံရံတွေ၊ ဘောင်တွေမှာ မမြင်ရတဲ့ ပါးလွှာတဲ့ အနက်ရောင်စာလုံးတွေနဲ့ မြက်ခင်းပြင်ထဲက မီးပုံလို တောက်ပတဲ့ လိမ္မော်ရောင်တစ်ခုတည်းက monochrome ကို ဖြိုခွင်းနေတယ်။
- Faire ES — နွေးထွေးသောခရင်မ် လက်ကားရောင်းချသည့်ကတ်တလောက်
- Adanola — အဖြူရောင်စက္ကူပေါ်တွင် ရေးသားထားသော အယ်ဒီတာ့အာဘော် lookbook။ စာလုံးပုံစံနှင့် ဓာတ်ပုံများသည် သန့်ရှင်းသော အဖြူရောင်မျက်နှာပြင်များပေါ်တွင် အသက်ဝင်နေသော ဖက်ရှင်ရိုက်ကူးမှုတစ်ခု၊ စာလုံးအတွက် အနက်ရောင်မင်နှင့် အမှတ်တံဆိပ်၏ အလုံးစုံစတိုင်ကို ထင်ဟပ်စေသော သိမ်မွေ့သော sans-serif ဖောင့် (Favorit)။
- Oura Ring — နေရောင်ဖျော့ဖျော့အောက်မှာ နွေးထွေးတဲ့ ඕ့မီးလ်လုပ်တဲ့ အလုပ်ရုံလေး
- Stykka — အဖြူရောင်မီးရောင်အောက်ရှိ စကင်ဒီနေးဗီးယားအလုပ်ရုံတစ်ခု - တစ်ခုတည်းသောအသံမှာ ဓာတ်ပုံပညာသာရှိသည့် တိတ်ဆိတ်ငြိမ်သက်သော လက်မှုပညာပြခန်းတစ်ခု
- DJI — လျှပ်စစ်အပြာရောင်တစ်ခုတည်းဖြင့် မီးမောင်းထိုးပြထားသော အာကာသယာဉ်သုံး အနက်ရောင်ကင်းဗတ်စ်
- Altitude Beverages — မိုနိုခရုမ်း မဂ္ဂဇင်း ပြန့်ကျဲမှု။ ဓာတ်ပုံများမှလွဲ၍ အရောင်အားလုံး ချွတ်ထားသော ဖက်ရှင်မဂ္ဂဇင်း ပြန့်ကျဲမှုကို မြင်ယောင်ကြည့်ပါ - စာသားနှင့် အဖြူရောင်နေရာလွတ်က ဇာတ်လမ်းတစ်ခုလုံးကို ပြောပြသည်။
- AATHER — ပွင့်နေတဲ့ လက်ဖဝါး၊ မီးတောက်တစ်ခုတည်း - တိတ်ဆိတ်ငြိမ်သက်မှုထဲမှာ ပါဝင်တဲ့ တိတ်ဆိတ်ငြိမ်သက်တဲ့ ဇိမ်ခံမှုတစ်ခု
- Cowboy — နှင်းကဲ့သို့ဖြူဖွေးသော ကြွေထည်ပရိဘောဂများဖြင့် တည်ဆောက်ထားသော ဘယ်လ်ဂျီယံ စက်ဘီးပြခန်း။ မက်တီမျက်နှာပြင်များ၊ အယ်ဒီတာ့အာဘော်များတွင် အသုံးပြုထားသော စာလုံးကြီးများနှင့် အလှဆင်မှု မရှိခြင်းတို့သည် စက်ဘီးနှင့် ၎င်း၏ပစ္စည်းများကို ဆွဲဆောင်သည့် အရောင်းပြခန်းတစ်ခု။
- Refero — အဖြူရောင်စကျင်ကျောက်ပေါ်တွင် အယ်ဒီတာ့အာဘော် အပြင်အဆင် - စာစီစာကုံးရေးသူမှ ဖန်တီးထားသော ထုတ်ကုန်စာမျက်နှာတစ်ခုဖြစ်ပြီး serif ခေါင်းစဉ်သည် အမှတ်တံဆိပ်၏ အမှတ်အသားဖြစ်ပြီး ကျန်အရာအားလုံးသည် မမြင်သာအောင် ရိုးရှင်းပါသည်။
- Face Formula — စကင်ဒီနေးဗီးယား အယ်ဒီတာ့အာဘော်ပုံတူ။ တည်ငြိမ်သော မဂ္ဂဇင်းပုံစံ ပျံ့နှံ့မှုတစ်ခုတွင် မော်ဒယ်၏ အကြည့်နှင့် ခေါင်းစဉ်ကို တိုတောင်းသော serif ဖောင့်ဖြင့် ရေးသားထားပြီး အေးမြပြီး မြူခိုးများဖုံးလွှမ်းနေသော နောက်ခံတွင် ဖော်ပြထားသည်။
- Shupatto — အဖြူရောင်စကျင်ကျောက်ပေါ်တွင် ပြတိုက်ပြခန်း