FRANKY'S
စကိတ်ဆိုင်တစ်ဆိုင်ရဲ့ ကောင်တာပေါ်က ရှေးဟောင်းဂိမ်းဆိုင်တစ်ဆိုင်
Franky ရဲ့ visual language က retro arcade နဲ့ skateboard shop ပေါင်းစပ်ထားတာပါ- နွေးထွေးတဲ့ cream canvas (#f3e5df) တစ်ခု၊ တောင့်တင်းတဲ့ pixel ဘောင်တွေ၊ နေရာတိုင်းမှာရှိတဲ့ အဖြူအမည်း checkerboard တစ်ခုနဲ့ ဝက်ဘ်ဆိုက်ပေါ်က စကားလုံးတိုင်းအတွက် Arcade ဆိုတဲ့ pixel ဖောင့်တစ်ခုတည်းကို အသုံးပြုထားပါတယ်။ palette က ရည်ရွယ်ချက်ရှိရှိ ရှားပါးပါတယ်—chromatic color နှစ်ခုပဲ ကျန်တော့တယ် (signal orange #faa21f က ဆိုင်းဘုတ်အတွက်ဖြစ်ပြီး rich green #128e44 က buy button အတွက်ပါ)၊ Arcade font weight ကို 400 ကနေ 700 အထိ တိုးမြှင့်ပြီး cream background မှာ အနက်ရောင်ကို အသုံးပြုခြင်းအားဖြင့် အဆင့်ဆင့်တစ်ခုလုံးကို ဖော်ပြပါတယ်။ မျက်နှာပြင်တွေက ပြားချပ်ပြီး monolithic ဖြစ်နေပါတယ်။ ခလုတ်တွေမှာ 1px cream line ထည့်ထားတာနဲ့ checkerboard ရဲ့ tonal play ကနေတစ်ဆင့်သာ အနက်ကို ရရှိပါတယ်။ အစိတ်အပိုင်းတွေက ၁၉၉၀ ခုနှစ်တွေက storefront sprite တွေနဲ့ ဆင်တူပါတယ်- ထူထဲတဲ့ black border တွေ၊ ကျဉ်းမြောင်းတဲ့ 6-12px border radii၊ ကျစ်လစ်တဲ့ 4-8px padding နဲ့ chrome element တွေထက် pixelated icon တွေလို ထင်ရတဲ့ 3D/AR toggles တွေပါ။ စာမျက်နှာအသစ်များသည် arcade ကဲ့သို့သော လေထုကို ထိန်းသိမ်းရန် ရည်ရွယ်ထားသည်- လိမ္မော်ရောင် scroll လုပ်သည့် စာသားမှလွဲ၍ အခြား gradient များ မပါဝင်ပါ၊ နူးညံ့သော အရိပ်များ မပါဝင်ပါ၊ အလှဆင်ထားသော စာလုံးပုံစံ မပါဝင်ပါ - ခရင်မ်ရောင်စက္ကူ၊ အနက်ရောင် pixelated မျဉ်းကြောင်းများနှင့် နွေးထွေးသော လိမ္မော်ရောင်တစ်ခုတည်းသာ ပါဝင်သည်။
ဒက်စ်တော့တွင်၊ ထုတ်ကုန်စာမျက်နှာသည် အများဆုံး 1200px အကျယ်ရှိသော full-width၊ အလယ်ဗဟိုပြု layout ကိုပြသသည်။ အပေါ်မှအောက်သို့ စည်းချက်မှာ- လိမ္မော်ရောင် scrolling text → အနက်ရောင်မျဉ်းပါသော cream-color header → ကော်လံနှစ်ခုခွဲခြင်း (ပင်မစာမျက်နှာတွင် checkerboard ၅၅% / ထုတ်ကုန်ကတ်များ၏ ကော်လံနှစ်ခု grid ၄၅%) → footer ရှိ cream-color stripe။ မိုဘိုင်းတွင်၊ ပင်မစာမျက်နှာသည် full-width checkerboard အဖြစ်ပြိုကွဲသွားပြီး grid သည် single-column layout ဖြစ်လာသည်။ ကတ်များကို မီးခိုးရောင် Pixel (#e5e7eb) ပိုင်းခြားထားသော ကော်လံနှစ်ခု grid တွင် ညီညာစွာဖြန့်ဝေထားသည်။ အပိုင်းများအကြား အကွာအဝေးမှာ အနည်းဆုံးဖြစ်သည် (43–61px)၊ interface သည် စာမျက်နှာ၏ အကျယ်တစ်ခုလုံးကို လွှမ်းခြုံထားသော မှောင်မိုက်သော stripes များကို ဘယ်သောအခါမှ အသုံးမပြုပါ - cream canvas ကို အနှောင့်အယှက်မရှိဘဲ ပြသထားသည်။
သန့်ရှင်းသော ခရင်မ်နောက်ခံတွင် ဦးထုပ်များပါရှိသော ဓာတ်ပုံတစ်ပုံ၊ အလယ်တွင် တင်းကျပ်စွာ ဖြတ်တောက်ထားပြီး အောက်တွင် နူးညံ့သော မီးသွေးရောင်အရိပ်တစ်ခု ပါရှိသည်။ လူနေမှုပုံစံ၊ မော်ဒယ်များ၊ အကြောင်းအရာများ မပါရှိပါ - ဦးထုပ်သည် ကြယ်ပွင့်ဖြစ်သည်။ အဓိကဒြပ်စင်နောက်ကွယ်ရှိ ကွက်စိပ်ပုံစံသည် ဂရပ်ဖစ်မျက်နှာပြင်အဖြစ် ဆောင်ရွက်သည်။ ရုပ်ပုံများ၊ augmented reality toggle မှလွဲ၍ 3D rendering များ မပါဝင်ပါ၊ လိုဂိုရှိ pixelated cross မှလွဲ၍ အလှဆင်အိုင်ကွန်များ မပါဝင်ပါ။
ရောင်စုံ
အမှတ်တံဆိပ်
- Marquee Orange
#faa21f— မျက်နှာပြင်ရဲ့ထိပ်မှာရှိတဲ့ အသိပေးချက်ဘား၊ အသားပေးဒြပ်စင်များ၊ အမှတ်တံဆိပ်။ - Buy Green
#128e44— "လှည်းထဲသို့ထည့်ရန်" ခလုတ်ကို ဖြည့်ထားသည် - အစိမ်းရောင်ဖြင့် အမှတ်အသားပြုထားသော တစ်ခုတည်းသော ဝယ်ယူမှုလုပ်ဆောင်ချက်။
ကြားနေ
- Arcade Cream
#f3e5df— စာမျက်နှာနောက်ခံ၊ ထုတ်ကုန်ကတ်မျက်နှာပြင်များ၊ ခလုတ်ထည့်သွင်းမှုများ။ - Ink Black
#000000— အဓိကစာသား၊ ချက်စကတ်အပြင်အဆင်၊ UI ဘောင်အားလုံး၊ ကတ်အပြင်အဆင်များ၊ အိုင်ကွန်ဘောင်များ။ - Pixel Gray
#e5e7eb— အနားသတ်ပါးများ၊ ကတ်ပိုင်းခြားစနစ်များ၊ ဇယားကွက်ဆဲလ်များအကြား ဖွဲ့စည်းပုံဆိုင်ရာ စည်းမျဉ်းများ။ - Charcoal
#333333— ဒုတိယ မျက်နှာပြင်အရောင်၊ ကွက်ကျားအရိပ်စတုရန်းများ၊ အရိပ်အရောင် - Carbon
#151515— သရုပ်ဖော်ပုံများကို ဖြည့်စွက်ရန်အတွက် ကြွယ်ဝသော ကြားနေအရောင်များနှင့် အသိပ်သည်းဆုံး ကွက်လပ်များ။ - Muted Gray
#737373— ခလုတ်များနှင့် ကိုယ်ထည်စာသားတွင် ပိတ်ထားသည်/အသံတိတ်ထားသည်
စာလုံးပုံစံ
၁၀ မှ ၁၈ ပစ်ဇယ်အထိ · အဆင့် ၄ ဆင့်
- Arcade — အစားထိုးခြင်း: VT323 · မျဉ်းကြောင်းများ 400, 700 · interface တစ်လျှောက်မှာ ဖောင့်တစ်ခုတည်းကိုပဲ အသုံးပြုထားပါတယ် - ခေါင်းစဉ်တွေ၊ အညွှန်းတွေ၊ ဈေးနှုန်းတွေ၊ ခလုတ်တွေ၊ ကိုယ်ထည်စာသားတွေနဲ့ အိုင်ကွန်တွေအားလုံး Arcade မှာ ရှိပါတယ်။ ၄၀၀ ကနေ ၇၀၀ ကို အကူးအပြောင်းလုပ်တာက အဆင့်ဆင့်တည်ဆောက်ပုံဖန်တီးဖို့အတွက် တစ်ခုတည်းသောကိရိယာပါ။ ဒုတိယဖောင့်ကိုသုံးတာက kiosk illusion ကို ပျက်စီးစေပါလိမ့်မယ်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 4-8px |
| ခလုတ်အချင်းဝက် | 6px |
| ကတ်အချင်းဝက် | 12px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 43-61px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို FRANKY'S ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- 099 SUPPLY — အဖြူအမည်း အရာဝတ္ထုတွေနဲ့ ပြည့်နေတဲ့ ပြခန်းနံရံ
- teenage engineering — စတူဒီယိုအလင်းရောင်ဆိုင်ရာ စက်မှုလုပ်ငန်းကတ်တလောက် - ထုတ်ကုန်သည် စာမျက်နှာပေါ်ရှိ တစ်ခုတည်းသော အရေးကြီးသော အရာဝတ္ထုဖြစ်ပြီး ကျန်အရာအားလုံးကို ၎င်းနှင့်ပတ်သက်ပြီး ဆွေးနွေးထားသည်။
- Custo — တစ်ထပ်တည်းကျတဲ့ ဖောင့်နဲ့ သေနတ်ရောင်ပြခန်း။ မီးခိုးရောင်-အစိမ်းရောင် ရောစပ်ထားတဲ့ ပြခန်းတစ်ခု၊ အဲဒီမှာ မှောင်မိုက်တဲ့ အရာဝတ္ထုတစ်ခုတည်းနဲ့ 57px ဖောင့်က သူ့အလိုလို ပြောပြနေတယ်။
- Walden — သစ်တောကြမ်းပြင်ရဲ့ တိတ်ဆိတ်မှု - ထုတ်ကုန်တိုင်းဟာ ကျောက်တုံးတစ်တုံးဖြစ်ပြီး၊ pixel တိုင်းဟာ ရေညှိတွေနဲ့ တိတ်ဆိတ်မှုပါပဲ။
- Fiverr — ဒစ်ဂျစ်တယ်ဈေး၏ အဓိကအချက်မှာ မှောင်မိုက်သော ပြဇာတ်ရုံစင်မြင့်များကြားတွင် တက်ကြွသော အစိမ်းရောင်လှိုင်းတစ်ခု ဖြစ်သည်။ နီယွန်အစိမ်းရောင် အစက်တစ်စက်သည် လိုဂိုအတွက် ကျောက်ဆူးအဖြစ် ဆောင်ရွက်ပေးပြီး ကျန်အရာများမှာ ပေးဆောင်သော ဝန်ဆောင်မှုများ၏ ဆွဲဆောင်မှုကို မီးမောင်းထိုးပြရန် ဒီဇိုင်းထုတ်ထားသော monochrome ဖြစ်သည်။
- Peloton — မှောင်မည်းနေသော ပြေးလမ်းပေါ်ရှိ အနီရောင် မီးပြတိုက်။ ကျယ်ပြန့်ပြီး မှောင်မိုက်သော ပြပွဲနေရာကို ဖြတ်၍ တောက်ပသော အနီရောင် CTA ဆိုင်းဘုတ်တစ်ခုတည်းသာ ဖြတ်၍ သန့်ရှင်းဖြူဖွေးသော ထုတ်ကုန်အခန်းများဆီသို့ ဦးတည်နေသော ကြံ့ခိုင်ရေးပြခန်း။
- HOUSEPLANT — ပိတ်ချောစက္ကူပေါ်မှာ အခွံမာသီးတွေနဲ့ စာအုပ်ဆိုင်တစ်ဆိုင်
- Adam Lippes — ခရင်မ်စက္ကူပေါ်တွင် monochrome အယ်ဒီတာ့အာဘော်စတူဒီယိုတစ်ခု - Vogue ပျံ့နှံ့မှုတစ်ခုဖြစ်ပြီး အရောင်ဖျော့ဖျော့မဟုတ်ဘဲ အပြင်အဆင်ဇယားကွက်သာ အလှဆင်ထားသည်။
- Elektron — သန်းခေါင်ယံအချိန်တွင် စက်ပစ္စည်းထိန်းချုပ်မှုပြားသည် အနက်ရောင်နီးပါးရှိသော ပတ္တူတစ်ခုဖြစ်ပြီး ထုတ်ကုန်ဓာတ်ပုံများသည် တောက်ပနေသော်လည်း အင်တာဖေ့စ်မှာမူ မမြင်နိုင်သလောက်ဖြစ်နေသည်။
- Sigmaphoto — တိကျသောတူရိယာများ၏ မိုနိုခရုမ်းပြခန်းသည် တိတ်ဆိတ်ငြိမ်သက်သော အဖြူရောင်အခန်းတစ်ခုဖြစ်ပြီး အရေးကြီးသည့် တစ်ခုတည်းသောအရောင်မှာ သင့်အား လုပ်ဆောင်ရန် ဖိတ်ခေါ်သည့် အရောင်ဖြစ်သည်။
- Channel Studio — သန္တာကျောက်မီးအုပ်တစ်ခုပါသော စတူဒီယိုဓာတ်ပုံဓာတ်ခွဲခန်း
- Specht Studio — လျှို့ဝှက်ဆန်းကြယ်သော စူးစမ်းလိုစိတ်များဖြင့် ပြည့်နှက်နေသော ပြခန်းနံရံ။ စတူဒီယို၏ ကိုယ်ပိုင်ခရုမ်းအပြီးသတ်သည် အဖြူရောင်မျက်နှာပြင်နှင့် အနက်ရောင်စာလုံးများဖြစ်ပြီး အမြင်အာရုံမီးရှူးမီးပန်းများသည် ပရောဂျက်၏ကြွေပြားလုပ်ငန်းများတွင် အပြည့်အဝစုစည်းထားသည်။