Allbirds
အဖြူရောင်ပိတ်ချောပေါ်တွင် သဘာဝပစ္စည်းများ
Allbirds သည် တည်ငြိမ်ပြီး သဘာဝကျသော ယုံကြည်မှုဖြင့် လုပ်ဆောင်သည်—အရောင်မခွဲခြားနိုင်သော ပတ္တူတစ်ခုဖြစ်ပြီး နွေးထွေးသောသဲ (#e0dacf) နှင့် ထုတ်ကုန်ဓာတ်ပုံမှ တိုက်ရိုက်ရေးဆွဲထားသော မြေသားအရောင်ဖျော့ဖျော့တို့ဖြင့် ဖြည့်စွက်ထားသည်။ အသုံးပြုသူမျက်နှာပြင်သည် ထုတ်ကုန်အတွေ့အကြုံကို အနှောင့်အယှက်မဖြစ်စေပါ- အဖြူရောင်မျက်နှာပြင်များ၊ ပါးလွှာသောဘောင်များ၊ စာလုံးကြီးအားလုံးပါသော လမ်းညွှန်ချက်နှင့် ဝဘ်ဒြပ်စင်များထက် ရုပ်ပိုင်းဆိုင်ရာခလုတ်များကဲ့သို့ ခံစားရသော ဆေးပြားပုံသဏ္ဍာန်ထိန်းချုပ်မှုများ။ Self Modern (စိတ်ကြိုက် serif ဖောင့်) ကို အယ်ဒီတာ့အာဘော်အာရုံစိုက်မှုလိုအပ်သော အရေးကြီးသောအချိန်အနည်းငယ်အတွက် အသုံးပြုသည်—ခေါင်းစဉ်များနှင့် စုစည်းမှုအမည်များ—နှင့် Geograph ကို စာလုံးတစ်ခုစီ၊ ကိုယ်ထည်မိတ္တူနှင့် ခလုတ်တစ်ခုစီအတွက် ဟန်ချက်ညီသောအလေးချိန်သုံးခုဖြင့် အသုံးပြုသည်။ အမျိုးအစားကတ်များသည် အရောင်စနစ်တစ်ခုဖြစ်လာသည်- တစ်ခုချင်းစီသည် ဖော်ပြထားသောထုတ်ကုန်မှ ၎င်း၏နောက်ခံအရောင်ကိုယူ၍ လမ်းညွှန်ချက်ကို အသက်ဝင်သော Pantone palette အဖြစ်သို့ ပြောင်းလဲပေးသည်။
အများဆုံးအကျယ်က ~1200px ဖြစ်ပြီး အလယ်မှာ ဘေးတစ်ဖက်တစ်ချက်စီမှာ ကျယ်ဝန်းတဲ့ အခင်းအကျင်းနဲ့ ရှိနေပါတယ်။ အဓိကအစိတ်အပိုင်းကတော့ နွေးထွေးတဲ့သဲနောက်ခံပေါ်မှာ အပြည့်အဝအကျယ်ရှိတဲ့ အယ်ဒီတာ့အာဘော် မျဉ်းကြောင်းတစ်ခုဖြစ်ပြီး အလယ်ကနေ ဖြာထွက်နေတဲ့ ကြီးမားတဲ့ ထုတ်ကုန် carousel တစ်ခုပါ။ အမျိုးအစား လမ်းညွှန်ချက်က ကော်လံလေးခုနဲ့ တူညီတဲ့အရောင်ကတ်လေးခုရဲ့ grid တစ်ခုဖြစ်ပြီး တစ်ခုစီမှာ အလယ်မှာ ရှိတဲ့ ဖိနပ်မော်ဒယ်တစ်ခုတည်းပါဝင်ပါတယ်။ ခေါက်အောက်မှာ layout က အပြည့်အဝအကျယ်ခွဲထားတဲ့ panel တွေ (ဘယ်ဘက်က လူနေမှုပုံစံဓာတ်ပုံ + ညာဘက်က ထုတ်ကုန်နမူနာ) နဲ့ သေးငယ်တဲ့၊ အောက်ခံမျဉ်းသားထားတဲ့ အပိုင်းခေါင်းစဉ်အောက်မှာ အလယ်မှာ ရှိတဲ့ ထုတ်ကုန် carousel တွေကြားမှာ တစ်လှည့်စီ ပြောင်းလဲနေပါတယ်။ အလုံးစုံစည်းချက်ကတော့- အပြည့်အဝအကျယ်ရှိတဲ့ အယ်ဒီတာ့အာဘော် panel → ကော်လံလေးခု grid → အလယ်မှာ ရှိတဲ့ ထုတ်ကုန် carousel → ကော်လံနှစ်ခုခွဲ → အလယ်မှာ ရှိတဲ့ ထုတ်ကုန် carousel။ အပိုင်းတွေကြားက အကွာအဝေးက 40-56px ဖြစ်ပြီး လေဝင်လေထွက်ကောင်းပေမယ့် အလွန်အကျွံမဟုတ်တဲ့ အကူးအပြောင်းတွေကို ဖန်တီးပေးပါတယ်။ လမ်းညွှန်ချက်က အလယ်မှာ ရှိတဲ့ အဓိကလင့်ခ်တွေပါတဲ့ minimalist၊ fixed top bar တစ်ခုပါ။
ဓာတ်ပုံရိုက်ကူးခြင်းသည် အမြင်အာရုံစနစ်တစ်ခုလုံးဖြစ်သည်။ ထုတ်ကုန်ဓာတ်ပုံအားလုံးကို ဖိနပ်၏ အသားပေးအရောင်နှင့် ကိုက်ညီသော သို့မဟုတ် ဖြည့်စွက်ပေးသော ခိုင်မာသောနောက်ခံတွင် အနည်းငယ်ထောင့်မှ အနီးကပ်ရိုက်ကူးထားပြီး ဓာတ်ပုံတစ်ခုစီကို အရောင်လေ့လာမှုတစ်ခုအဖြစ် ထိရောက်စွာပြောင်းလဲပေးသည်။ လူနေမှုပုံစံဓာတ်ပုံများကို နွေးထွေးပြီး နေသာသောအရောင်များဖြင့်၊ သဘာဝပတ်ဝန်းကျင် (agave လယ်ကွင်းများ၊ သစ်သားကုန်းပတ်များ၊ ကြမ်းတမ်းသောမြေပြင်) တွင် ရိုက်ကူးထားပြီး၊ အရောင်ဖျော့ဖျော့အရောင်နှင့် ကိုက်ညီစေရန် အနည်းငယ်ဖျော့ဖျော့ပြုလုပ်ထားသည်။ ရုပ်ပုံများ၊ 3D render များ၊ abstract ဂရပ်ဖစ်များ မရှိပါ။ Pantone နှင့် ပူးပေါင်း၍ စာသားအတိုင်းအရောင်ဖျော့ဖျော့ကို ဂရပ်ဖစ်ဒြပ်စင်အဖြစ် အသုံးပြုထားသည်။ အိုင်ကွန်ဂရပ်ဖီသည် minimalist နှင့် monochrome (လမ်းညွှန်နှင့် အရန်နေရာများတွင် outline အိုင်ကွန်များ) ဖြစ်သည်။
ရောင်စုံ
ကြားနေ
- Canvas White
#ffffff— စာမျက်နှာနောက်ခံပုံများ၊ ကတ်မျက်နှာပြင်များ၊ ထုတ်ကုန်ကတ်နောက်ခံပုံများ။ - Charcoal
#212121— ဒုတိယ UI အစိတ်အပိုင်းများ၊ ပိုင်းခြားကိရိယာများနှင့် အသံတိတ်အညွှန်းများအတွက် ကြားနေအရောင်ကို ပံ့ပိုးပေးပါသည်။ ၎င်းကို လုပ်ဆောင်ချက်တောင်းဆိုမှုများအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။ - True Black
#000000— ခေါင်းစဉ်များ၊ အိုင်ကွန်များ၊ ဆန့်ကျင်ဘက်အရောင်မြင့်မားသော ဖရိမ်များ၊ လမ်းညွှန်စာသား။ - Warm Sand
#e0dacf— အဓိကအပိုင်းနောက်ခံ၊ အပိုမျက်နှာပြင်အရိပ်၊ ကြီးမားသော အယ်ဒီတာ့အာဘော်အကန့်များ။ - Olive Char
#222519— ဒုတိယ UI အစိတ်အပိုင်းများ၊ ပိုင်းခြားကိရိယာများနှင့် အသံတိတ်အညွှန်းများအတွက် ကြားနေအရောင်ကို ပံ့ပိုးပေးပါသည်။ ၎င်းကို လုပ်ဆောင်ချက်တောင်းဆိုမှုများအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။ - Iron Gray
#525252— ဒုတိယစာသား၊ အရန်စာသား၊ မမြင်သာသောဘောင်များ။
စာလုံးပုံစံ
၁၂ မှ ၄၀ px အထိ · အဆင့် ၆ ဆင့်
- Self Modern — အစားထိုးခြင်း: Playfair Display · မျဉ်းကြောင်းများ 400 · ခေါင်းစဉ်များနှင့် အယ်ဒီတာ့အာဘော်များကို ချွေတာစွာအသုံးပြုထားပြီး အဓိကစကားစုများနှင့် စုစည်းမှုခေါင်းစဉ်များကို မီးမောင်းထိုးပြထားသည်။ Serif နှင့် italic စာလုံးပုံစံများသည် sans-serif စာလုံးပုံစံများ၏ ငြီးငွေ့ဖွယ်ကောင်းသော အခြေအနေကို ဖြိုခွင်းပြီး "ဤသည်မှာ ဇာတ်လမ်း၏ အနှစ်သာရဖြစ်သည်" ဟူသော መልእክትကို ဖော်ပြသည်။
- Geograph — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 500, 700 · အသုံးပြုသူမျက်နှာပြင်အတွက် အဓိကဖောင့်တွင် ကိုယ်ထည်စာသား၊ လမ်းညွှန်တံဆိပ်များ၊ ခလုတ်များ၊ ထုတ်ကုန်ခေါင်းစဉ်များ၊ အောက်ခြေများ၊ ထည့်သွင်းရန်နေရာများနှင့် အိုင်ကွန်များ ပါဝင်သည်။ မီးမောင်းထိုးပြထားသော ခေါင်းစဉ်များအတွက် 500၊ ထုတ်ကုန်အမည်များအတွက် 700။ လမ်းညွှန်တံဆိပ်များနှင့် အမျိုးအစားများတွင် စာလုံးကြီးများတွင် စာလုံးအကွာအဝေးကျယ် (0.025em–0.10em) သည် တသမတ်တည်းရှိသော အမှတ်တံဆိပ်စတိုင်ကို တည်ဆောက်ပေးသည်။
- HurmeGeometricSans3 — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400 · ခလုတ်အတွက် အရန်အဖြစ် သို့မဟုတ် သီးသန့်အညွှန်းအဖြစ် ရှားရှားပါးပါးသာ အသုံးပြုပါသည်။ Geograph သည် ဤစနစ်ကို နေ့စဉ်အသုံးပြုသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 8-16px |
| ခလုတ်အချင်းဝက် | 9999px (pill) |
| ကတ်အချင်းဝက် | 16px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 40-56px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Allbirds ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- 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 — အဖြူရောင်စကျင်ကျောက်ပေါ်တွင် ပြတိုက်ပြခန်း