Design Patternsတွေ ကြည့်ဖို့အတွက် အကောင်းဆုံး website (11)ခု
ကျနော်တို့လို Designerတွေအတွက် Inspirationေတွကြည့်နိုင်တဲ့နေရာဆိုတာ အပင်တစ်ပင်ရဲ့ ရေသောက်အမြစ်လိုပါပဲ၊ အပင်တစ်ပင်က ရေသောက်မှ အသက်ရှင်နိုင်သလို ကျနော်တို့လည်း inspirationတွေရှိမှ ပိုကောင်းတဲ့အရာတွေကိုဖန်တီးနိုင်မှာပါ။
( Inspiration ကအမျိုးမျိုးရှိပါတယ် ဥပမာ-စိတ်ဓါတ်ခွန်အား Motivational inspiration တို့ ဘာတို့ပါ၊ ကျနော့ inspirationကတော့ UI/UX အပိုင်းပါ)
Design Patterns ဆိုတာ App or website တစ်ခုရဲ့ UI structure နဲ့ Screen flow တွေကို ပြောတာပါ။ (UI structureထဲမှာ Content structure ချတာတွေ၊ Site Navigation structureချတာတွေ ၊ inputတွေ elementတွေကို arrangeလုပ်တာတွေ ပါပါတယ်)တခါတလေ ကိုယ်သိပ်မတွေ့ဖူးတဲ့ product (App or Website) တွေကို ဆွဲရတော့မယ်ဆိုရင် သူတို့ ရဲ့ design patterns တွေကြည့်ပြီး inspireယူလို့ရပါတယ်။
ကျနောအရင်တုန်းကတော့ အခုလို inspiration listရယ်လို့ လုပ်ထားတာမရှိပါဘူး ။ Googleကနေပဲရှာပြီးကြည့်လိုက်တာပါပဲ။ ရှာတွေပြီး ကြိုက်တာဆိုရင် Browserက bookmarkမှာပဲ ကြုံသလိုမှတ်ပြီး ထားလိုက်တယ် ။ အဲ့လိုကြုံသလိုမှတ်ထားတာ များလာတဲ့အခါ ပြန်ရှာမရ ၊မမှတ်မိ၊ ရှုပ်ပွနေတော့ Googleမှာထပ်ရှာရတာပါပဲ။
အခုတော့ တခုခုလုပ်မယ်ဆိုရင် စနစ်တကျနဲ့ အချိန်ပေးပြီး အောက်ခြေခိုင်အောင် အရင်လုပ်ဖြစ်ပါတယ် ။ Working folder namingတွေကို လည်းသေချာပေးဖြစ်သလို ၊ folderအဆင်ဆင့် ၊ categoryအဆင့်ဆင့်နဲ့ သေချာ ပြန်လုပ်ဖြစ်ပါတယ်။ (ကျနော့်ရဲ့ မြင်ဆရာ၊ သင်ဆရာဖြစ်တဲ့ Senior Designer ကြောင့်လည်း အခုလို Namingေတွသေချာ ပေးဖြစ်ခဲ့တာလည်းပါပါတယ်)
ဒီနေ့တော့ inspiration မကြည့်ရတာလည်းကြာနေလို့ ကျနော့ရဲ့ inspiration Bookmark folder ကိုဖွင့်ရင်း အဲ့ဒီအောက်က UI/UX Design Patternsဆိုတဲ့ listကို ကြည့်ပြီး ကျနော်သိထားတဲ့ကောင်းတဲ့ အရာတွေကို အတူမျှဝေပေးရင်ကောင်းမယ်လို့ အတွေးပေါ်လာတာနဲ့ ချရေးလိုက်တာပါ ။
UI/UX Design Patterns websiteေတွပေါ်ခင်က ကျနော်တို့ လေ့လာချင်တဲ့ App တွေကို downloadချ ြပီးတော့ screenတခုချင်းစီကိုလေ့လာ ၊ screenshotရိုက်ပြီး ဖုန်း galleryမှာ သပ်သပ်folderဆောက်ပြီး သိမ်းထားရပါတယ်။ သူ့app နာမည်နဲ့ပေါ့လေ။ ပြီးရင် ပြန်ကြည့်ပြီးတော့ လေ့လာရတာပေါ့။ ဒါက အလွယ်တကူ Registerလုပ်လို့ရတဲ့ appတွေကိုပဲ လေ့လာလို့ရတာပါ။ နိုင်ငံခြားက တချို့appတွေဆို Register လုပ်တာကို သူတို့ ဖုန်းနံပါတ်တွေထည့်ခိုင်း၊ ဘာတွေထည့်ခိုင်းပြီး verifyလုပ်ခိုင်းရင် ကျနော်တို့အဲ့ဒီapp ကို ၀င်ကြည့်လို့ မရတော့ပါဘူး။ ဘာလို့လည်းဆိုတော့ ကိုယ်မှာမှ သူတို့ အချက်အလက်တွေမရှိဘဲလေ။
အခုတော့ ဒါတွေအတွက် အဆင်ပြေမယ့်နည်းလမ်းတွေပေါ်လာပါပြီ။ Creator တွေကလည်း ကျနော်တို့နည်းတူ ခံစားရပြီး ဒါတွေကို develop လုပ်ထားတာလို့ ကျနော်မြင်မိပါတယ်။
ဘာလို့လည်းဆိုတော့ … Registerလုပ်မရလို့ ၀င်ကြည့်ခွင်မရတဲ့ appတွေဆိုရင် ကြည့်ခွင့်မရှိတော့ဘူးလားဆိုတဲ့ မေးခွန်းနဲ့၊ ဖုန်းက သိမ်းထားတာများလို့ storageြပည့်နေတာမျိုးတွေ ၊ ထည့်ထားတဲ့ app တွေများနေလို့ တခြားapp ထည့်ဖို့ မလုံလောက်တော့တဲ့အခါမျိုးတွေမှာ ဒါတွေကို ဖြေရှင်:ဖို့နည်းလမ်းမရှိဘူးလား ?? ြပီးတော့ ဘယ်လိုလုပ်ရမလဲလို့တွေးနေချိန်မှာ ….. သူတို့က ကျနော်တိုလိုအပ်ချက်ကိုသိနေသလိုမျိုးဖြေရှင်ပေးလိုက်သလိုမျိုးဖြစ်နေလို့ပါပဲ။
ကျနော် အမြဲပြောသလိုပါပဲ Googleမှာရှာကြည့်ရင် အများကြီးရှိပါတယ်။ ဒါပေမယ် ကျနော့ list ကတော့နည်းပါတယ်။ ဘာလိုလည်းဆိုတော့ အခုဖော်ပြပေးထားတာတွေက ကျနော့ အကြိုက်၊ လက်ရွေးစင်၊ data အစုံဆုံးနဲ့ သုံးလို့ကောင်းပြီး updateြဖစ်တဲ့ list တွေမို့လို့ပါပဲ (ကျနော်သိသလောက်ထဲမှာပေါ့)။
- mobbin.design (Mobile Design Pattern)
ကျနော့ရဲ့အကောင်းဆုံးသတ်မှတ်ထားတဲ့ websiteပါ၊ သုံးရတာ အရမ်းကောင်းပြီး UI UXကအစပြေစရာမရှိပါဘူး၊အစုံဆုံးပါပဲ ။ app တစ်ခုချင်းစီရဲ့ screenေတွကို သေချာ screenshotရိုက်ပြီးပြပေးထားပါတယ် ။ App အလိုက် ပြပေးထားတော့ app တခုလုံးကိုသုံးနေရသလိုပါပဲ ။ နိုင်ငံခြားက ဖုန်းနံပါတ်နဲ့ verifyလုပ်ရတဲ့ app တွေကို ၀င်မကြည့်နိုင်လည်း အခုတော့ အဆင်ပြေသွားပါပြီ ။ အဲ့ဒါလေးကတော့ တော်တော်အဆင်ပြေတဲ့အချက်ပါ။
2. scrnshts.club (Mobile Design Pattern)
Play store ပေါ်က အကောင်းဆံုး ၊ Designအလန်း app တွေကို အဓိကထားပြီး ပြပေးတာပါ။ app category အလိုက်ရှာလို့ရလို့ အဆင်ပြေပါတယ် ။ app တွေကို mockup လေးတွေနဲ့ ပြပေးထားပါတယ်။ appတခုလုံးကို ပြေပးထားတာ မဟုတ်ပေမယ့် သုံးလို့အဆင်ပြေပါတယ်။ UI ကေတာ့ ကြည့်ရတာ အတော်လေးကာင်းပါတယ်
3. pttrns.com (Mobile Design Pattern)
Categorizeလုပ်ထားတာက တကယ် အသုံး၀င်ပါတယ် ၊ page အလိုက် category စီထားတာပါ ။ သူပြထားတဲ့ပုံစံက ဥပမာ — check out pageပံုစံကို ရှာချင်ရင် app အစုံ checkout page တွေကို ပြပေးထားပါတယ် ။ အချိန်မကုန်စေဘဲ ကိုယ်လိုချင်တာကို တခါတည်းနဲ့ app အစုံက၊ screen ပုံစံမျိုးစုံ ကိုတွေရမှာပါ။ app ထွက်တဲ့ yearအလိုက်လည်းရှာလို့ရတာက app design trendတွေကို ပြန်လေ့လာရာမှာ အတော်အသုံး၀င်ပါတယ်။ အရင်ကတော့ free ရပေမယ့် နောက်ပိုင်းတော့ premiumတွေရှိလာပါပြီ ဒါပေမယ့် free ကြည့်ရတဲ့ အပိုင်းကလည်းအသုံး၀င်ပါတယ်
4. mobile-patterns.com (Mobile Design Pattern)
interactionတွေကိုပါပြထားပေးထားတဲ့ နေရာပါ ၊ app တစ်ခုလုံးလိုလိုရဲ့ screen တွေကိုလည်းပြပေးထားပါတယ်။ Screenတွေကိုလေ့လာရင်း interactionတွေကိုလည်းလေ့လာပြီးသားဖြစ်မှာပါ။
5. www.uisources.com (Mobile Design Pattern)
UIရှင်းရှင်းလေးနဲ့တင်ပြပုံေတာ်ေတာ်ကောင်းပြီး အသုံး၀င်တဲ့ websiteတခုပါပဲ။ interactionတွေလည်းပြပေးထားပါတယ် ။
6. nicelydone.clubs (Website Design Patterns)
Website landing page ပဲပြထားတာမဟုတ်ပဲ ၊ websiteတခုလုံးရဲ့လိုအပ်တဲ့ patterns တွေကိုပြပေးထားပါတယ်။ အတော်လေး ကောင်းပြီး အသုံးတည့်ပါတယ် ။ (ဒါလေးကတော့ကျနော့အမျိုးသား share လို့ကြည့်ဖြစ်ပြီးကြိုက်သွားတဲ့ ဟာလေးပါ။ )
7. uigarage.net (Website and Mobile Design Patterns)
ဒီ websiteကတော့ Android IOS Website patternေတွ အတော် စုံပါတယ် ။ Articlesေတွနဲ့ UI Kits တွေပါရှိပါတယ်။ Website UI ကတော့ full-width UI ကိုသုံးထားလို့ ကြည့်ရတာသိပ်အဆင်မပြေပေမယ့် အတော် စုံပြီးအသုံး၀င်တဲ့site ပါ။
8. siteinspire.com (Website Design Pattern)
သူကတော့ searching အပိုင်း အရမ်းကောင်းပါတယ်။ လိုချင်တဲ့ website Patterns မျိုးကို အချိန်တိုအတွင်းရှာပေးနိုင်တဲ့ websiteပါ။ သူ့ search က သူများတွေနဲ့ မတူတာကို လည်းတွေရမှာပါ။
9. pageflows.com(Website and Mobile Design Pattern)
Design Patternsအကြောင်းပြောမယ်ဆိုရင်တော့ pageflowကမပါမဖြစ်ပါ။ Design Patternsတခုတည်းမဟုတ်ဘဲ user flowတွေကို interactionနဲ့ သေချာပြထားပေးတဲ့ websiteပါ။ Flowတခုချင်စီအလိုက်သေချာပြပေးထားပါတယ်။ interactionလေ့လာချင်သူတွေအတွက်က တော့ အကောင်းဆုံးပါပဲ။ Websiteနဲ့ app ၂ခုစလုံးအတွက် ရှိပါတယ်။freeကိုပဲကြည့်ပြီး လေ့လာလို့ရပေမယ့် သေချာလေ့လာချင်ရင် premium၀ယ်သုံးကြည့်ပါ။ သူတို့ကသေချာပြပေးထားတဲ့အတွက်ပေးရတာတန်တယ်လို့ခံစားရမှာပါ။
10. ecomm.design(Website Design Pattern)
E-commerce websiteတွေကို ပဲပြပေးထားတာပါ ။ e-commerceကိုမှ categoryအစုံ ကိုရှာလို့ရပါတယ်။ E-commerceအတွက် inspiration ဆိုရင် ဒီ websiteက အဆင်ပြေဆံုးပါပဲ။
11. landingfolio.com(Website Design Pattern)
သူက siteinspireနဲ့ flow တူပါတယ်။ဒါပေမယ့် သူက ပိုစုံပါတယ် ။ တခြား resources တွေလည်း ရှိသလို website color paletteလေးပြပေးထားပါတယ်။
(Website Design Patternsအတွက်ကတော့ landing page တွေကိုပဲlist လုပ်ထားတာများပါတယ်။ External Linkတွေကိုလည်းထည့်ပေးထားတော့ ကိုယ်ဘာသာဆက်လေ့လာလို့ရပါတယ်)။
Feel free to reach out to me on LinkedIn if you have any feedback or questions.
Originally posted on — MyanmarDevJobs.com/blog
