Caldera
နွေးထွေးသောထုံးကျောက်ပေါ်တွင် မီးသွေးဖြင့် ကြိတ်ပါ။ ပတ္တူသည် ကြမ်းတမ်းပြီး နွေးထွေးသော ကျောက်စရစ်ဖြစ်ပြီး လိမ္မော်ရောင်ဒြပ်စင်တစ်ခုစီသည် မျက်နှာပြင်ထဲသို့ ဖိထားသော မီးခိုးတလူလူ မီးခဲများကဲ့သို့ ထင်ရသည်။
Caldera သည် အရည်ပျော်နေသော လိမ္မော်ရောင်ဖြင့် ဖုံးလွှမ်းနေသော နွေးထွေးသော ထုံးကျောက်ပတ္တူပေါ်တွင် လည်ပတ်သည်။ မျက်နှာပြင်သည် ပြားချပ်ပြီး အရိပ်မရှိသောကြောင့် အလွန်ရဲရင့်သော၊ ဗိသုကာပုံစံအတိုင်းအတာ (189px အထိ) တွင် အကျဉ်းချုံးထားသော အမျိုးအစားသည် ဖွဲ့စည်းပုံဆိုင်ရာ ဝန်တစ်ခုလုံးကို သယ်ဆောင်နိုင်သည်။ တစ်ခုတည်းသော တောက်ပသော လိမ္မော်ရောင် (#fc5000) သည် monochrome၊ နွေးထွေးသော မီးခိုးရောင်၊ plasma purple ကို အဓိက halftone ပုံအတွက် သီးသန့်ထားပြီး၊ tags အတွက် sulfur yellow ဖြင့် နောက်ခံတွင် ပြင်းထန်သော chromatic accent အဖြစ် လုပ်ဆောင်သည်။ အမြင်အာရုံဘာသာစကားသည် မီးတောင်ဘာသာစကားဖြစ်သည်- အကျဉ်းချုံးထားသော၊ လေးလံသောစာလုံးများ၊ halftone dot ပုံစံများ၊ ကတ်များနှင့် ခလုတ်များပေါ်ရှိ 40px radii နှင့် 800px ဆေးပြားပုံသဏ္ဍာန် ထိန်းချုပ်မှုများ—နွေးထွေးမှုကို နူးညံ့သော စက္ကူကဲ့သို့သော မျက်နှာပြင်တွင် ဖုံးအုပ်ထားသည်။
အမြင်အာရုံ palette က minimalist ဖြစ်ပြီး စဉ်းစားဆင်ခြင်စရာကောင်းပါတယ်။ အဓိက window က ဓာတ်ပုံအစား abstract halftone dot pattern (ခရမ်းရောင်မှ လိမ္မော်ရောင် gradient ပေါ်ရှိ လိမ္မော်ရောင်အစက်များ) ကို အသုံးပြုထားပါတယ်။ အလှဆင်ပစ္စည်းအဖြစ် မဟုတ်ဘဲ brand ရဲ့ အနုပညာဆန်တဲ့ ဖော်ပြချက်တစ်ခုအဖြစ် အသုံးပြုပါတယ်။ ထုတ်ကုန်အချက်အလက်နဲ့ ကြေငြာချက်တွေပါတဲ့ card တွေက image fill အနေနဲ့ Ember blocks ဒါမှမဟုတ် halftone Plasma Violet ကို အသုံးပြုပြီး စုစည်းထားတဲ့ graphic system ကို ပေးစွမ်းပါတယ်။ Partner/integration logo တွေက light background ပေါ်မှာ monochrome icon တွေအဖြစ် ပေါ်လာပါတယ်။ ဓာတ်ပုံတွေ၊ 3D render တွေ ဒါမှမဟုတ် lifestyle image တွေ မရှိပါဘူး။ icon တွေက သေးငယ်ပြီး monochrome ဖြစ်ပြီး minimalist ဆန်ပါတယ်။ Discord၊ X နဲ့ Telegram navigation မှာ ရိုးရှင်းတဲ့ glyphs တွေအဖြစ် ထားရှိပါတယ်။ visual language က graphic နဲ့ editorial ပါ။ stock image တွေထက် poster design နဲ့ ဆင်တူပါတယ်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Ember
#fc5000— အဓိကလုပ်ဆောင်ချက်ခလုတ်များ၊ စာရင်းဇယားကတ်များနှင့် အဓိကအမြင်အာရုံဆိုင်ရာ အသားပေးမှုများသည် တစ်ခုတည်းသော ပြင်းထန်သောအရောင်အသားပေးမှုဖြစ်ပြီး နွေးထွေးသောမီးခိုးရောင်နှင့် ရောနှောနေသော ၎င်း၏ကြွယ်ဝမှုသည် အပိုအလှဆင်ပစ္စည်းများ မလိုအပ်ဘဲ အရေးတကြီးဖြစ်မှုကို ဖန်တီးပေးသည်။ - Plasma Violet
#524ae9— အဓိက Halftone Gradient Base၊ နောက်ထပ်ကတ်မျက်နှာပြင်တစ်ခု - အဓိကအစက်ပုံစံနှင့် သီးသန့်ကတ်တစ်ခုတွင်သာ အသုံးပြုသည်။ ထိန်းချုပ်ကိရိယာများအတွက် ဘယ်သောအခါမှ အသုံးမပြုပါ။
ကြားနေ
- Sulfur
#f5f28e— tag နှင့် category icon များအတွက် နောက်ခံ၊ သေးငယ်သော highlight များသည် blog post အမျိုးအစားများနှင့် program ကြေငြာချက်များကို ဖော်ပြရန်အသုံးပြုသော နူးညံ့သော အဝါရောင်ဖြစ်သည်။ - Limestone
#f7f6f2— ကတ်မျက်နှာပြင်များ၊ အကြောင်းအရာဘလောက်နောက်ခံများနှင့် အပိုခလုတ်ဖြည့်များသည် စာမျက်နှာကင်းဗတ်တွင် အစိတ်အပိုင်းများကို ထင်ရှားစေသည့် အဖြူရောင်၏ ဖျော့ဖျော့နှင့် နွေးထွေးသောအရိပ်ဖြစ်သည်။ - Pumice
#e2e2df— စာမျက်နှာ၏ အဓိကနောက်ခံမှာ အပိုင်းတစ်ခုစီအတွက် အခြေခံအဖြစ် ဆောင်ရွက်သည့် နွေးထွေးသော အလယ်အလတ်မီးခိုးရောင်ဖြစ်သည်။ ၎င်းသည် ကတ်ထူပြားမျက်နှာပြင်ထက် အနည်းငယ်မှောင်သောကြောင့် အရိပ်များမပါဘဲ ပုံနှင့် နောက်ခံကို သိမ်မွေ့စွာ ခွဲခြားနိုင်သည်။ - Obsidian
#070607— အဓိကစာသား၊ ခေါင်းစဉ်များ၊ လင့်ခ်စာသားနှင့် ခလုတ်ဘောင်များသည် အနက်ရောင်နီးပါးဖြစ်ပြီး ပတ္တူ၏ နွေးထွေးသောအရောင်များနှင့် လိုက်ဖက်သော နွေးထွေးသောအရောင်ကို မသိသာစေဘဲ ရှိနေသည်။ - Chalk
#ffffff— မှောင်သောအပိုင်းများတွင် စာသားထည့်ခြင်း၊ မှောင်သောနောက်ခံများတွင် စာသားထည့်သွင်းခြင်း၊ ဆန့်ကျင်ဘက်အရောင်မြင့်မားသော အပေါ်ယံလွှာများ - မှောင်သောမျက်နှာပြင်များနှင့် ဆန့်ကျင်ဘက်အရောင်အများဆုံးလိုအပ်သည့်နေရာတွင်သာ ဖြူစင်သောအဖြူရောင်ကို အသုံးပြုသည်။
စာလုံးပုံစံ
၁၂ မှ ၁၈၉px အထိ · ၁၀ ဆင့်
- PP Neue Corp Compact — အစားထိုးခြင်း: Bebas Neue · မျဉ်းကြောင်းများ 400 (Ultrabold cut) · ခေါင်းစဉ်များနှင့် မျက်နှာပြင်စာသားအားလုံး။ စိတ်ကြိုက်ဒီဇိုင်းထုတ်ထားသော၊ အကျဉ်းချုပ်ထားသော၊ အလွန်ထင်ရှားသောဖောင့်သည် ခေါင်းစဉ်များကို စက်မှုလုပ်ငန်းဆိုင်ရာ၊ ဆိုင်းဘုတ်ကဲ့သို့သော အလေးချိန်ကို ပေးစွမ်းသည်။ အဓိကဘလောက်ရှိ 189px အရွယ်အစားသည် အမှတ်တံဆိပ်၏ ထူးခြားသောစတိုင်ကို ထင်ဟပ်စေသည်- အကျဉ်းချုပ်ထားသော၊ စာလုံးပုံစံထက် ဖွဲ့စည်းပုံဆိုင်ရာနီးပါးဖြစ်သည်။ "ss06" နှင့် "ss10" ဆက်တင်များသည် ပိုမိုပြင်းထန်ပြီး အကျဉ်းချုပ်ထားသော စည်းချက်အတွက် အခြားစာလုံးပုံစံများနှင့် နေရာလွတ်ကို အသက်သွင်းပေးသည်။ အပေါင်းစာလုံးနေရာလွတ် (+0.02em) သည် မျက်နှာပြင်အရွယ်အစားများအတွက် ပုံမှန်မဟုတ်ဘဲ 80–189px တွင် ကျဉ်းကျပ်သောစာသားခံစားချက်ကို ကာကွယ်ပေးသည်။
- DM Sans — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 500 (Medium only — never Regular or Bold) · အဓိကစာသား၊ လမ်းညွှန်လင့်ခ်များ၊ ခလုတ်တံဆိပ်များနှင့် ဒုတိယခေါင်းစဉ်များသည် 30px အထိရှိသည်။ အလတ်စားဖောင့်အလေးချိန်ကို တမင်ရွေးချယ်ခဲ့သည် - Regular သည် အလွန်ထူသော ခေါင်းစဉ်ဖောင့်နှင့် ယှဉ်လျှင် အလွန်ပါးလွှာနေမည်ဖြစ်ပြီး Bold သည် ၎င်းနှင့် ယှဉ်ပြိုင်လိမ့်မည်။ DM Sans သည် စက်မှုလုပ်ငန်းခေါင်းစဉ်ဖောင့်နှင့် လူသားဆန်သော၊ အနည်းငယ်ဂျီဩမေတြီဆန်သော ဆန့်ကျင်ဘက်အချက်ကို ဖန်တီးပေးသည်။
- System sans-serif — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400 · စာတန်းထိုးများ၊ မက်တာစာသားများ၊ ရက်စွဲများ၊ မိုက်ခရိုတဂ်များ။ အရွယ်အစားချွေတာခြင်းထက် အလေးချိန်နှင့် အမှတ်တံဆိပ်အသိအမှတ်ပြုမှုသည် အရေးမကြီးသည့် 12px တွင်သာ အသုံးပြုသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ပျမ်းမျှ |
| အခြေခံအဆင့် | 16px |
| ခလုတ်အချင်းဝက် | 40px |
| ကတ်အချင်းဝက် | 40px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 80px |
| စာမျက်နှာအကျယ် | 1280px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Caldera ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- teenage engineering — စတူဒီယိုအလင်းရောင်ဆိုင်ရာ စက်မှုလုပ်ငန်းကတ်တလောက် - ထုတ်ကုန်သည် စာမျက်နှာပေါ်ရှိ တစ်ခုတည်းသော အရေးကြီးသော အရာဝတ္ထုဖြစ်ပြီး ကျန်အရာအားလုံးကို ၎င်းနှင့်ပတ်သက်ပြီး ဆွေးနွေးထားသည်။
- basement — မနက် ၃ နာရီတွင် ဗလာပုံနှိပ်စက်တစ်လုံး - မည်းမှောင်နေသော မျက်နှာပြင်ပေါ်တွင် ကြီးမားသော၊ ချုံ့ထားသော ဖောင့်များသည် ပြန့်ကျဲနေပြီး၊ လမ်းညွှန်ဘားတွင် လိမ္မော်ရောင်အလင်းတန်းတစ်ခုသာ ရှိနေပြီး၊ ကျန်အရာအားလုံးသည် အဖြူရောင် သို့မဟုတ် မီးခိုးရောင်ကဲ့သို့ ဖြစ်နေသည်။
- amra — အဖြူရောင်နောက်ခံပေါ်ရှိ ရောင်စုံစက်ဝိုင်းတစ်ခု—ခရမ်းရောင်အငွေ့အသက်သည် အရောင်လုံးဝမပါဝင်သော စာမျက်နှာတွင် တစ်ခုတည်းသော အရောင်လှိုင်းဖြစ်ပြီး တစ်ခုတည်းသော gradient စက်ဝိုင်းသည် အဓိကပုံဥပမာက ပုံမှန်လုပ်ဆောင်သည့်အလုပ်ကို လုပ်ဆောင်သည်။
- Stink Studios — သန်းခေါင်ယံမှာ ရုပ်ရှင်စတူဒီယိုတစ်ခု - ပရိုဂျက်တာရဲ့ အသံမြည်နေတယ်၊ အခန်းက မှောင်နေတယ်၊ ရုပ်ရှင်ပဲ မီးထွန်းထားတယ်
- Andrei Rybin — အဖြူရောင်နံရံကဲ့သို့ ကွန်တက်ချပ်များတွင် ဖုန်းမျက်နှာပြင်များကို ချိတ်ဆွဲထားသည့် ဒီဇိုင်နာမှတ်စုစာအုပ် တစ်မျိုးဖြစ်သည်။
- Uniswap Cup — eSports ပြိုင်ပွဲထုတ်လွှင့်မှုကို mock-up site တစ်ခုမှာ ပြုလုပ်ပါတယ် - ပန်းရောင်အမှတ်အသားက အဖြူရောင်စတုရန်းတွေနဲ့ ပါးလွှာတဲ့မျဉ်းကြောင်းတွေနဲ့ ဖွဲ့စည်းထားတဲ့ grid တစ်ခုကို ပုံဖော်ထားပါတယ်
- Freytag Anderson — ရုပ်ရှင်ရုံက စကားလုံးတစ်လုံးတည်းနဲ့ ပွင့်ဟသွားတယ်။ ကြီးမားတဲ့ ရွေ့လျားနေတဲ့ ပုံရိပ်တစ်ခုက မျက်နှာပြင်တစ်ခုလုံးကို နေရာယူထားပြီး အမှတ်တံဆိပ်နာမည်က ထောင့်မှာ ခေါင်းစဉ်တစ်ခုလို နေရာယူထားပြီး တခြားဘာကမှ အာရုံလွဲစေတာ မရှိပါဘူး။
- Integrated Biosciences — သန်းခေါင်ယံတွင် ဇီဝအလင်းဓာတ်ခွဲခန်း
- Vercel — အဖြူရောင်စက္ကူပေါ်တွင် ရိုက်နှိပ်ထားသော တာမီနယ်
- Mintlify — ဖန်စားပွဲပေါ်က တိမ်ဥယျာဉ်။ လက်ဖြင့်ရေးဆွဲထားသော ကောင်းကင်နှင့် မှတ်တမ်းရုပ်ရှင်ကို အတူတကွ ဘောင်ခတ်ထားသည် - စာမျက်နှာသည် ဘုန်းကြီးကျောင်း၏ အဖြူရောင်အဖြစ် မှေးမှိန်မသွားမီ အရောင်နှင့် အယူအဆတို့ ထိပ်တိုက်တွေ့သည့် တစ်ခုတည်းသောနေရာ။
- Gleap — ဂရပ်ဖိုက်အသားပေးများဖြင့် နွေးထွေးသောခရင်မ်ရောင်များဖြင့် အလှဆင်ထားသော အလုပ်ခွင်တစ်ခု—ပိတ်ချောထည်ဗိသုကာလက်ရာပေါ်တွင် မှိန်ဖျော့ဖျော့အနက်ရောင်မင်စက်များ ပေါလောမျောနေသယောင်ရှိသည့် စတူဒီယိုတစ်ခု။
- ClickUp — အဖြူရောင်စကျင်ကျောက်ပေါ်ရှိ အစွမ်းထက်သော ဒိုင်ခွက်။ ဤစာမျက်နှာသည် ထုတ်လုပ်မှုကိရိယာအတွက် ထုတ်ကုန်လက်ကမ်းစာစောင်တစ်ခုဖြစ်သောကြောင့် အမြင်အာရုံဘာသာစကားကို ထုတ်ကုန်ကိုယ်တိုင်မှ ယူထားသည်- သိပ်သည်းသောစာရင်းများ၊ အခြေအနေညွှန်ပြချက်များ၊ avatar အုပ်စုများနှင့် ပြသထားသော ထုတ်ကုန်သတ်မှတ်ချက်ကဲ့သို့ ထင်ရစေသော ရဲရင့်သော စာလုံးပုံစံဖော်ပြချက်များ။