UI/ UX Designer တယောက်ဖြစ်ဖို့ ‘ဘာ’တွေကိုလေ့လာရမလဲ? ဘယ်က’စ’ လေ့လာရမလဲ??
(A Complete Guide to Become a UI/ UX Designer)(လမ်းညွှန် အပြည့်အစုံ)
ကျနော့ကို နယ်ပယ်အစုံက UI /UX Designerလုပ်ချင်လို့
- ဘာတွေလေ့လာရမလဲ?
- ဘာတွေတတ်ဖို့လိုလဲ??? လို့ လာမေးတဲ့သူတွေအတော်များပါတယ် ။
အများစုကတော့ Web Developers နဲ့ Graphics Designers တွေဖြစ်ပါတယ်။ Chat Box ကနေဆိုတော့ တိုတိုလေးပဲပြောပြလိုက်နိုင်ပါတယ်။ လာမေးတဲ့အချိန်တိုင်းလိုလိုကလည်း ကျနော် အလုပ်ရှုပ်နေတာများလို့ပါ။ ဒါ့ကြောင့် ကျနော် ဒါတွေကိုသေချာရှင်းပြချင်၊ ပြောပြချင်ပါသေးတယ်။ အခုတော့ ကျနော်လည်း အချိန်ရတုန်း သေချာ ရေးသားဖော်ပြပေးလိုက်ပါတယ် ။
အရင်ဆုံး UI Design၊ UX Designဆိုတာဘာလဲဆိုတာ အတိုချုံး ရှင်းပြပါမယ်။
UI Designဆိုတာဘာလဲ??
UI Design ဆိုတာ Digital Product တွေပေါ်မှာမြင်ရတဲ့ Designတွေအားလံုးကို UI Designလို့ခေါ်ပါတယ် ။
Digital product တွေထဲမှာ ကွန်ပျူတာ၊ အိမ်အသုံးအဆောင်၊ mobile devices နှင့်အခြားအီလက်ထရောနစ်ပစ္စည်းများကဲ့သို့သောစက်များနှင့်ဆော့ဝဲများ ပါပါတယ်။
Computer ပေါ်ကနေမြင်ရတဲ့ Software (သို့) Websiteတွေ ရဲ့ Design တွေကလည်း UI Design ပါပဲ။ ဖုန်းပေါ်မှာဆိုရင် Application မှာမြင်ရတဲ့ Designတွေကလည်း UI Designပါပဲ။
အခြား smart home , POS Deviceတွေပေါ်မှာမြင်ရတာတွေကလည်း UI Designပါပဲ။
အများသောအားဖြင့်တော့ UI Designဆိုတာကို Website UI Designနဲ့ Mobile phone Application UI Design တွေပဲလို့ထင်လေ့ရှိပါတယ် ။
ပြီးတော့ UI Designမှာ user တွေ အသုံးပြုလို့ရဖို့အတွက် interaction တွေပါပါတယ်။ interactionဆိုတာ … ဥပမာ — Mobile Application မှာဆိုရင် နှိပ်လို့ရတဲ့ လင့်ကလေးတွေ၊ buttonလေးတွေပါပါတယ်။ သူတို့ကိုနှိပ်ရင် action လေးတခုဖြစ်သွားပါတယ်။ တခြားpage ကိုသွားတာပဲဖြစ်ဖြစ် .. downloadချတာပဲဖြစ်ဖြစ်..ကိုယ်လုပ်လိုက်လို့ တခုတခုဖြစ်သွားတဲ့ action ကိုပြောချင်တာပါ။
UI Designer ဆိုတာကတော့ အ ေပါ်ကဖော်ပြထားတဲ့ digital product တွေရဲ့ UI Designကို ဆွဲတဲ့သူပါ။
UX Design ဆိုတာဘာလဲ???
အပေါ်က ဖော်ပြထားတဲ့ UI Design (သို့) ဘယ် Product design ကိုမဆို userတွေ သုံးတဲ့ အခါမှာ သုံးလို့ အဆင်ပြေအောင်၊ အသုံးပြုရလွယ်အောင်၊ လိုအပ်တဲ့ information အချက်အလက်တွေကိုသေချာပြပေးပြီး user တွေအတွက် အခက်အခဲမရှိေအာင်လုပ်ဆောင်ပေးတာကို ux design လို့ခေါ်ပါတယ်။
UI designကတော့ ဆွဲပြီးရင် Designနည်းနည်းထပ်ပြင်တာကလွဲလို့ UI designက ပြီးပြီဆိုပေမယ့် UX အတွက်ကတော့ processက အခုမှစမှာပါ။ သူက product တခုကို နောက်ကွယ်ကနေ လက်ရှိထက် အသုံးပြုလို့လွယ်အောင် ၊ ပိုကောင်းအောင် researchတွေလုပ် ၊ testingတွေအမြဲတမ်း လုပ်နေရပါတယ်။
ဒါကတော့ အပေါ်ယံခြုံပြောတာပါ။ (UX အကြောင်း ရေးရင် အရှည်ကြီးဖြစ်သွားမှာမို့လို့ နောက်မှ သပ်သပ်ရေးမယ်လို့ စိတ်ကူးထားပါတယ်)
UI/ UX Designerတစ်ယောက်ဖြစ်ဖို့ဘာတွေလိုမလဲ ??
1. Passion (စိတ်အားထက်သန်မှု)
Careerတခုကနေ တခုကို ကူးတော့မယ်ဆိုရင် (သို့ ) တခုခုကိုစတော့မယ်ဆိုရင် အရင်ဆုံးလုပ်ရမှာက ကိုယ့်ကိုယ်ကို ပြန်မေးပါ။
- ငါဘာလို့ UI/UX Designer လုပ်ချင်တာလဲ???
- ငါတကယ် ဒီအလုပ်ကိုလုပ်ချင်တာလား??
- တကယ် စိတ်၀င်စားလား??
- ရေရှည် ဒါကိုပဲလုပ်နိုင်မလာ???
ဆိုတာတွေပါ။ ဒါကတော့ ဘယ် အလုပ်ကို စလုပ်စလုပ်မေးရမှာတွေပါပဲ။ တကယ်လုပ်ချင်တာသေချာတော့မှ ပြောင်းပါ၊ စလုပ်ပါ။ ဘာလို့လည်းဆိုတော့ UI/ UX Designer ဆိုတာ Passion ရှိမှ ရေရှည်လုပ်နိုင်တဲ့ အလုပ်မို့လို့ပါ။ သူက Design Trends တွေနဲ့ UX Methods တွေကို အမြဲတမ်းလေ့လာနေရပါတယ်။ တနှစ်နဲ့တနှစ် Trendတွေပြောင်းတာမြန်သလို ၊ တခြားလေ့လာစရာ အသစ် တွေကလည်း အမြဲရှိနေတာမို့လို့ပါ။ အဲ့တော့ passion မရှိရင် ရေရှည် ရပ်တည်ဖို့ မလွယ်ပါဘူး။
2. Learn Design Principles and Theory
UI Design ဆိုတာလည်း Design ဆွဲရတာပဲဖြစ်တဲ့အတွက် Designမှာရှိတဲ့ principles တွေ Theoryတွေသိရပါမယ်။ (Color Theory, Visual Hierarchy, Font, Contrast, Consistency, အစရှိတာတွေပါ။)
ဒါတွေကိုသိရဖို့အတွက် internet မှာ Graphics Design course, UI/UX Design Course တွေအများကြီးရှိပါတယ်။
အပြင်က တတ်ချင်သူတွေကတော့ UI/UX Design (သို့) Graphics Design သင်တန်းတွေတတ်လို့ရပါတယ် ။
Graphics Design Course ကတော့ Design Principlesတွေကို သေချာသင်ပါတယ်။
UI/ UX Design Courseကတော့ Codingနဲ့ UI Design ကို သင်တာပါ။ Design Principlesကို Knowledge အရခြံုသင်ပါတယ်။ UI/UX Design course ကိုတတ်ပြီးရင်တော့ UI Elements တွေနဲ့ UI Designတွေဘယ်လို အလုပ်လုပ်သလဲ၊ ဘယ်လိုဆွဲရလဲ ဆိုတာကို နားလည်မှာပါ။အစကတည်းက Graphics Design တတ်ရင်တော့ UI/UX Design ကို ကိုယ့်ဘာသာကို internetမှာ လွယ်လွယ်ကူကူလေ့လာလို့ရပါတယ်။ UI/UX Design Toolsတွေသုံးပုံကိုတော့ ပြန်လေ့လာရမှာပါ။
Online ကနေပဲလေ့လာချင်သူတွေအတွက် အောက်မှာဖော်ပြပေးလိုက်ပါတယ်။ (ကျနော်ဒါတွေက အပေါ်ယံတော့ကြည့်ဖူးပေမယ့် ပြီးတဲ့အထိမ try ဖူးပါဘူး။ ဒါပေမယ့် internet ကနေ လေ့လာရသလောက်တော့ တော်တော်များများက ကောင်းတယ်လို့ ညွှန်းတဲ့ course တွေပါ)
careerfoundry.com/ ,
interaction-design.org/
Course တို့ကတော့ UI/ UX Design နယ်ပယ်မှာ ဆရာကြီးတွေပဲ၊ ဒါပေမယ့် ဈေးကြီးပါတယ်။ ဒါကြောင့် အကုန်အဆင်ပြေမယ့် courseလေးတွေကို ပဲေဖာ်ပြပေးလိုက်ပါတယ် ။
- www.coursera.org/specializations/ui-ux-design
(Price: Paid) - www.skillshare.com/browse/ui-ux-design
(Price: Paid, free 2 months of unlimited classes) - https://www.udemy.com/courses/search/?q=ui%2Fux%20design&src=sac&kw=UI%2F
(Price: Paid) - https://www.khanacademy.org/search?page_search_query=web%20design
(Price: Free)
အကုန်လံုးက English လိုဖြစ်တဲ့အတွက် English listening skill တော့ နည်းနည်းလိုပါတယ်။ Englishစာ ကလည်းသင်ရင်တတ်တဲ့ အရာပါ။
English စာအတွက် လေ့လာဖို့လည်း အောက်မှာ လင့်ထည့်ပေးလိုက်ပါတယ်။ ဒါတွေကတော့ YouTube ကနေ ကျနော်လေ့လာပြီး အမြဲတမ်းကြည့်ဖြစ်တဲ့ vlogs တွေပါ။ မြန်မာလိုပါ။ အခြေခံကနေ သေချာသင်ပေးတာဖြစ်တဲ့အတွက် အတော်လေး အဆင်ပြေပါတယ်။
- English in Burmese
https://www.youtube.com/channel/UCtlhl6SDedYsvjO5I6MGCBQ - Edulistic English Channel
https://www.youtube.com/channel/UCwSaNc_fvtPBUhFZQugcEfA
3. Responsive Design
Devices(Mobile Phone, Tablet, Ipad, Desktop, Laptop)ပေါ်လိုက်ပြီး လိုက်လျောညီထွေစွာ လိုက်ပြောင်းလဲပေးတဲ့ Design ကို Responsive Designလို့ခေါ်ပါတယ် ။ Website UI ဆွဲရင် Responsive Designကို သိထားဖို့လိုပါတယ်။ ဘာလို့လည်းဆိုတော့ ကျနော်တို့ website ကို Laptop တခုထဲမှာပဲ ကြည့်တာမဟုတ်လို့ပါ။ ကျနော်တို့Website ကို Mobile Phone ,Tablet, iPad အစရှိတယ် Device မျိုးစုံကနေ အသုံးပြုကြမှာပါ။ အာ့ဒီအခါ အသုံးပြုတဲ့ Deviceပေါ်လိုက်ပြီး မြင်ရတဲ့ UI က အနည်းငယ်ပြောင်းလဲမှုရှိပါတယ်။
ဥပမာ-ကျနော်တို့ website ကိုခေါ်ကြည့်တဲ့သူဟာ Mobile Phone ပေါ်ကနေ ကြည့်တဲ့သူဆို Laptopမှာ ပြထားတဲ့ UI ကိုပြလို့မရပါဘူး။ အရမ်းကြီးပြီး ဘယ်လိုပြကြည့်ရတာ အဆင်မပြေတဲ့အတွက် Responsive Designဆိုပြီး ဘယ် Device မှာမဆိုအဆင်ပြေအောင် လုပ်လာကြတာပါ။
ပြီးတော့ စစ်တမ်းအရလည်း အခုနောက်ပိုင်းမှာ websiteတွေကို Laptop, Desktop(Large Devices)တွေထက် mobile phone (Small Device)ပေါ်ကနေ သုံး(browse)တဲ့သူပိုများပါတယ်။ ရှေ့လျောက်လည်း mobile phoneပေါ်ကနေ အသုံးပြုသူပိုများလာမယ်လို့ခန့်မှန်းထားတဲ့အတွက် Responsive Designကတော့ သိရပါမယ်။
အောက်က ပုံလေးကိုကြည့်ကြည့်ပါ။ ပိုနားလည်လောက်မယ်ထင်ပါတယ် ။
My self-study method
ကျနော်ရဲ့ Responsive Design လေ့လာနည်း ကိုလည်းဖော်ပြပေးလိုက်ပါတယ် ။
ကိုယ်ကြိုက်ပြီး အမြဲသုံးနေတဲ့ websiteတွေရှိရင် အရင်ဆုံး Laptop or desktop ကနေ ခေါ်ကြည့်ပါ ။ ပြီးရင် အဲ့ဒီ websiteကိုပဲ mobile phoneပေါ်ကနေခေါ်ကြည့်ပါ။ Laptop နဲ့ mobile phoneပေါ်ကနေမြင်ရတဲ့ UI တွေက ဘာကွာသွားလဲ ကြည့်ပါ။လေ့လာပါ။ ဘာတွေကို mobile မှာအလေးေပးပြလဲ?၊ ဘာတွေကို မပြဘဲထားလဲ?ဘာလို့လဲ ?? ဆိုတာလိုက်တွေးပါ။
ဒီနေရာမှာ တချို့ website တွေက version (2) မျိုးရေးထားတာတွေလည်းရှိပါတယ်။
- Website ကိုခေါ်ကြည့်တဲ့ Device ပေါ်လိုက်ပြီး Mobile UI သပ်သပ်ပြတဲ့ Mobile Site Version
(Device Detection သုံးထားတဲ့ Website/ Mobile Version အတွက်သပ်သပ်ရေးထားတဲ့ version)
Laptop or Desktop (Large Device ) browser ကနေခေါ်ရင် ဒီ Design ပြပေးပြီး Mobile phone (Small Device) ပေါ်ကနေခေါ်ရင် ဒီ Design ပြဆိုပြီး ခွဲထားပြီးပြပေးတာပါ။ ဒါမျိုးက mobile အတွက်သေချာရေးထားတာပါ။ browser ပေါ်ကနေ mobile Application ကိုသုံးနေရသလိုပါပဲ ။ အတော်လည်းသုံးရတာအဆင်ပြေပါတယ်။ သူ့ UI ကတော့ laptop မှာ မြင်ရတဲ့ UI နဲ့ ကွာပါတယ်။ Application UI နဲ့ပိုတူပါတယ်။ ပိုသုံးလိုကောင်းပါတယ် ။
အောက်က ပုံလေးကိုကြည့်ကြည့်ပါ။ ပိုနားလည်လောက်မယ်ထင်ပါတယ် ။
2. Website တခုတည်းကိုပဲ deviceအကုန်မှာအဆင်ပြေအောင် ပြပေးတဲ့ Responsive Website Version
(သပ်သပ်ကြီး mobileအတွက်မရေးဘဲ တခုတည်းနဲ့ device အကုန်အဆင်ပြေတဲ့ version)
သူကတော့ ဘယ် deviceကနေခေါ်ကြည့်ကြည့် laptop မှာ မြင်ရတဲ့ UI ကို ပဲ mobile မှာ hideသင့်တာhideပြီး ချုံ့ထားတဲ့ပုံစံလေးမျိုးမြင်ရမှာပါ ။ Laptopမှာမြင်ရတဲ့ UI နဲ့ သိပ်မကွာပါဘူး။
အောက်က ပုံလေးကိုကြည့်ကြည့်ပါ။ ပိုနားလည်လောက်မယ်ထင်ပါတယ် ။
4. Understanding coding (Optional-မလုပ်လည်းရ)
Code(HTML, CSS, Javascript and Some Css Framework such as Bootstrap) ရေးစရာမလိုပေမယ့် code တွေကိုနားလည်ထားရင် ပိုအဆင်ပြေပါတယ် ။ UI Design ဆွဲရင် (သို့) Frontend Developer တေွနဲ့ ပူးပေါင်းလုပ်ရတဲ့အခါမှာ Codingအကြောင်းနားလည်ထားရင် ပိုအဆင်ပြေပါတယ်။ Codingအကြောင်းနားလည်ထားမှ သူတို့(Frontend Development)မှာရှိတဲ့ Limitationsတွေကိုလည်းနားလည်မှာပါ။ ဒါ့ကြောင့် UI/ UX Design Course (or) Web Design Essential Course ကိုတတ်ကတည်းက သင်တဲ့ coding တွေကိုသေချာလိုက်လုပ်သင့်ပါတယ်။
UI/UX Design course က UI Design အပိုင်းကို အဓိကထားသင်ပါတယ် ။ codingတွေကိုလည်း သင်ပေမယ့် Knowledgeအရလောက်ပဲသင်တာပါ။ Designဆွဲလို့ရအောင် အပေါ်ယံနားလည်လွယ်လောက်အောင်ပဲသင်ပါတယ်။
Web Design Essential Course က တော့ coding ကိုအဓိကထားသင်တာပါ။ Designဆွဲတာ အနည်းငယ် ပါပေမယ့် Knowledgeအရလောက်ပဲသင်ပါတယ်။
အဓိက ကတော့ ဆွဲထားတဲ့ website UI တခုကို Coding (HTML, CSS, JAVASCRIPT) နဲ့ ပြန်ရေးရတာကိုသင်တာပါ။
ကျနော် အကြံပေးရရင်တော့
- Graphices Designer (or) Photoshop တတ်ထားတဲ့သူတွေကတော့ Web Essential Course ကိုတတ်သင့်ပြီး ၊
- Web Developer ကနေ ေပြာင်းမယ်ဆိုရင်ေတာ့ UI/UX Design Courseကိုတတ်သင့်ပါတယ်။
- အခုမှ စလေ့လာမယ့်သူများကတော့ ၂ခုလုံးတတ်နိုင်ရင်ပိုကောင်းပါတယ် (အချိန်တော့ကြာပါတယ်) ။
အစပိုင်းကတော့ Web Essential Course or UI/UX Designer Course ဆိုရပါတယ်။ နောက်ပိုင်း ဒီထက် ပိုပြီး developerတွေနဲ့ deal လုပ်ချင်ရင်တော့ Backend Development Course တွေတတ်သင့်ပါတယ် ။ web developer fundamentals course, Professional Web Developer Course လိုမျိုးပါ။
5. Understanding the UX process
(Ux ဖက်ကိုစသွားနေပါပြီနော်)UX processတွေကိုသိပြီး processတွေကို နားလည်နေရပါတယ်။ ( ဒီမှာတော့ UI/UX Designer ဆိုရင် အရှေ့က processတော်တော်များများ ကျော်လေ့ ၊ မလုပ်ရလေ့ရှိပါတယ်။ ဒါပေမယ့် သိထားရပါမယ်) UX Designer သီသန့်ပဲ ဆိုရင်ေတာ့ UX Design processအတိုင်းအကုနလုပ်ရပါတယ်ေနာ် ။
UX processတွေက များသောအားဖြင့် 5 steps ရှိပါတယ်။ (တယောက်နဲ့တယောက် processတူချင်မှတူပါလိမ့်မယ် ဒါပေမယ့် အများကြီးမကွဲပါဘူး)
တကယ့် processကဒီလိုပါ
ဒါပေမယ့် UI/UX Designerဆိုရင် တကယ် လုပ်ရတဲ့ process (ကျနော့အတွေ့အကြုံအရေရာ) ဒီ ၂ခုပါပဲ
( ဒီမှာတော့ UI/UX Designer ဆိုရင် အရှေ့က processတော်တော်များများ ကျော်လေ့ ၊ မလုပ်ရလေ့ရှိပါတယ်။ ဒါပေမယ့် သိထားရပါမယ်)
6. Emapthy (စာနာ နားလည်ခြင်း)
အပေါ်က အရာတွေ(UI Design)သိပြီး၊ ရပြီး ဆိုရင်တော့ Userတွေအတွက် empathy ထားဖို့လိုပါတယ်။ UX Designer ရဲ့ အဓိကBasic ကတော့ User တွေအတွက် Empathy ထားဖို့ပါပဲ။
Empathyဘယ်လိုထားရမလဲဆိုတော့ Design တခုဆွဲရင် Designလှဖို့ပဲမဟုတ်ဘဲ ကိုယ်ထည့်ပြလိုက်တဲ့အရာက User အတွက် တကယ် အသုံးလိုတဲ့ အရာလား??? ဆိုတာကိုစဉ်းစားပါ။
- ငါသာ User ဆိုရင်ကော ဒီ informationကို လိုအပ်မလား???
- ငါသာ Userဆိုရင်ကော ဒါကို ဘယ်လို လုပ်ရမလဲ သိပါ့မလား??
- ငါသာ end userဆိုရင် ဒီ အသုံးအနှုန်း တွေသိပါ့မလား???
- ငါသာ User ဆိုရင်…..???? ဆိုတဲ့ အတွေမျိုး နဲ့ user ေနရာမှာ ၀င်ခံစား၊ နေကြည့်ပေးတာမျိုးကို ပြောတာပါ။
(တခါတလေ ကိုယ့်တိုင် user လိုတွေးတယ်ဆိုပေမယ့်လည်း တချို့ အထင်အမြင်တွေကလည်းလွဲနိုင်ပါတယ် (ကိုယ်က imagine user လေ၊ တကယ့် user မှ မဟုတ်ဘဲ) ။ အဲ့ဒီတော့ ကိုယ် confuse ဖြစ်နေတယ်ဆိုရင် ရုံးမှာ or ကိုယ့်ပါတ်၀န်းကျင်မှာရှိတဲ့ Target user groupနဲ့ ဆင်တူတဲ့ သူတွေကိုမေးကြည့်လို့ရပါတယ်။
Take Away
Tools — UI Designဆွဲရင် သုံးတဲ့ Tools တွေကတော့ Adobe XD ( window and Mac), Sketch (Mac user), Figma ( window and Mac) တွေများပါတယ်။
Wireframing — Wireframe အတွက်ကတော့ Balsamiq (သို့) စာအုတ်နဲ့ ဘောလ်ပင်ရှိရင် အဆင်ပြေပါတယ်။
Prototyping — Prototyping အတွက်ကတော့ Invision နဲ့ Figma ကတော့ ထိပ်ဆုံးပြေးနေပြီး သုံးလို့အကောင်းဆုံးပါပဲ ။ (Adobe XD လည်းရပါတယ်၊window user တွေအတွက်လည်း တော်တော် အဆင်ပြေတယ်လို့ပြောကြပါတယ်၊ ကျနော်က sketchပဲသုံးလို့ Adobe XD အပိုင်း သိပ်မပြောတာပါ)
UI/ UX Designer လုပ်မယ်လို့ ဆုံဖြတ်ချက်ချပြီးရင်တော့ Websiteတွေ app တွေကိုများများသုံးကြည့်ဖို့လိုပါတယ်။ ဒါမှ website flowနဲ့ app flow တွေကကိုသိမှာဖြစ်ပါတယ်။
flowတွေကိုကြည့်ဖို့ website တွေကို ကျနော် အရင်ကရေးခဲ့တဲ့ Article မှာဖတ်နိုင်ပါတယ်။
Article လေးကတော့ ဒီမှာပြီးပါပြီ။
သိချင်တာ၊ မရှင်းတာရှိရင်လည်း comment မှာမေးခဲ့လို့ရပါတယ်။ဒါဆို နောက် တပါတ် ကျနော့ Medium က နောက် Article လေးမှာ ပြန်တွေ့ကြပါမယ်။
Ref:
https://digitaldefynd.com/best-ui-ux-design-course-training-certification/#1_UIUX_Design_Certification_by_Calarts_Coursera
https://uxplanet.org/top-10-online-platforms-to-learn-ui-ux-design-dcfb613d097a
http://cindyology.com/process/
My Previous Articles
