For designer who start learning App Design

App Design စတင်လေ့လာသူများအတွက်
ရေးသားသူ : saturngod

App design ဟာ web site design နဲ့ မတူပါဘူး။ ဒီလိုပါပဲ Android Appp Design ဟာ iOS app design နဲ့ မတူဘူး။ နည်းနည်းလေးတော့ ကွာတယ်။ iOS အတိုင်း Android မှာ ပုံစံ တူဖြစ်အောင် လုပ်မယ်ဆို လုပ်လို့ရပေမယ့် user experience နဲ့ android မှာ အသုံးပြုပုံနဲ့ iOS မှာ အသုံးပြုပုံ ကွာပါတယ်။ ကျွန်တော် ကိုယ်တိုင် designer နဲ့ တွဲလုပ်တဲ့ အခါ အချို့ designer တွေက web designer ကနေ app design ကို ဆွဲတဲ့ အခါမှာ အဆင်မပြေတာလေးတွေ ရှိပါတယ်။ တကယ်လို့ web designer က နေ app designer ကို ပြောင်းမယ် ဆိုရင် အောက်က အချက်လေးတွေက အထောက် အကူပြုပါလိမ့်မယ်။

Read design pattern

Android Design Patterns နှင့် iOS Human Interface Guidelines ကို မဖတ်ဖူးလျှင် ဖတ်ထားသင့်ပါတယ်။ Web Design နဲ့ App Design မတူပါဘူး။ ဒါကြောင့် designer အနေနဲ့ web design က လာတဲ့ အခါမှာ သက်ဆိုင်ရာ platform ရဲ့ Design Patterns ကို ဖတ်ထားကြည့်ဖို့ လိုပါလိမ့်မယ်။

ဒါ့အပြင် iOS အတွက် အခြားသူတွေ ဘယ်လိုဖန်တီးထားလဲဆိုတာကို pttrns မှာ လေ့လာနိုင်ပါတယ်။ Android အတွက်ကိုတော့ androidpttrns မှာ လေ့လာနိုင်ပါတယ်။

Use PNG for all images

Designer တွေ အနေနဲ့ Developer ကို icon တွေ ပုံတွေ ဖြတ်ပြီး ပေးတဲ့ အခါမှာ PNG ကို သုံးပါ။ PNG ကို အသုံးပြုတဲ့ အခါမှာ ဖြစ်နိုင်လျှင် background ကို transparent ထားပါ။ JPG ကို မသုံးပါနှင့်။

Use background tranparent for icons

Icons တွေ အားလုံးကို background ကို အကြည်ထားပေးပါ။ backgorund color ထည့်လိုက်တဲ့ အခါမှာ နောက်ထပ် design ပြောင်းသွားတဲ့ အခါမှာ developer ကိုယ်တိုင် icons တွေကို ပြန်ရွှေ့လို့ မရဖြစ်သွားပါလိမ့်မယ်။ အဲဒီ အခါ designer ကို ပြန်ပြီး ပြောရတဲ့ အခါ နှစ်ဖက် စလုံး အချိန်ကုန် လူပင်ပန်းဖြစ်ပါလိမ့်မယ်။ ဒါကြောင့် icons တွေ အားလုံးကို background မသုံးပါနှင့်။

High resoultion

iPhone အတွက် retina display resoultion က 1136 px X 640 px ပါ။ iPad အတွက် retina ကတော့ 2048 px X 1536 px ပါ။ ဒါကြောင့် iOS အတွက် design ဆွဲတဲ့ အခါမှာ retina display size ပေါ်မှာ မူတည်ပြီး ဆွဲပါ။ ဖြစ်နိုင်လျှင် desing တစ်ခုလုံးကို vector ကို အသုံးပြုသင့်ပါတယ်။ ယခု အချိန်မှာ 2048 က အများဆုံး ဆိုပေမယ့် နောင်တချိန်ကို ကျွန်တော်တို့ မပြောနိုင်ပါဘူး။ iPhone Retina ထွက်လာခဲ့တုန်းက design တွေက vector မဟုတ်ပဲ ပုံမှန် bitmap ကို သုံးပြီးဆွဲခဲ့မိလို့ high resoultion တွေ အကုန်ပြန်ဆွဲခဲ့ရတဲ့ အတွေ့အကြုံတွေကို မမေ့သင့်ပါဘူး။

Try sketch

Photoshop file တစ်ခုလုံးကို developer ကို ပေးလိုက်တဲ့ အခါ ပုံမှန်အားဖြင့် developer တွေ အနေနဲ့ ဘာမှ လုပ်လို့ မရပါဘူး။ photoshop ကို pirate ဒါမှမဟုတ် ဝယ်သုံးထားတဲ့ သူမှ သာ photoshop ကို ဖွင့်နိုင်လိမ့်မယ်။ မဝယ်သုံးနိုင်တဲ့သူ pirate မသုံးချင်တဲ့ developer တွေ အနေနဲ့ psd က အဆင်မပြေလှဘူး။ နောက်ပြီး photoshop ဟာ mobile app development အတွက် design ဆွဲထားတာ မဟုတ်ပါဘူး။ ဒါကြောင့် sketch ကို ဝယ်ပြီး သုံးကြည့်ပါ။ သုံးရတာ လွယ်သလို vector format ဖြစ်တာကြောင့် size အရွယ်အစားက လိုအပ်သလို ပြောင်းလဲ နိုင်ပါတယ်။ Sketch မှာ Art board တွေ ခွဲပြီး ဆွဲခြင်းဟာ export လုပ်တဲ့ အခါမှာ အတော်လေးကို အဆင်ပြေပါတယ်။ developer ကော designer အတွက်ပါ အချိန်ကုန် လွယ်ကူစေပါတယ်။

Cut images for developer

Designer အနေနဲ့ ပုံတစ်ခုလုံးကို photoshop မှာ ဆွဲထားပြီးတော့ PSD file ကို developer ကို ပေးလိုက်ရင် developer အများစုက ဘာမှ လုပ်တတ်မှာ မဟုတ်ပါဘူး။ သူတို့အနေနဲ့ photoshop ကို ထပ်ပြီး လေ့လာဖို့ အချိန်ထပ်ပေးနေရပါလိမ့်မယ်။ ဒါကြောင့် လိုအပ်တဲ့ ပုံတွေ အားလုံးကို cut လုပ်ပြီး ပေးပါ။ ဖြစ်နိုင်လျှင် folder တွေ ခွဲပြီးတော့ ပေးပါ။ Home , Profile စသည် ဖြင့် folder တွေ ခွဲပြီး folder ထဲမှာ သက်ဆိုင်ရာ image တွေ cut လုပ်ထားတာတွေ ထည့်ပြီး ပေးခြင်းအားဖြင့် developer အနေနဲ့ ပုံတွေ လိုက်ရှာရတဲ့ အချိန် သက်သာစေပါတယ်။ တကယ်လို့ sketch သုံးမယ်ဆိုရင် sketch file name ကို category အနေနဲ့ ပေးထားပြီး sketch file တစ်ခုထဲမှာ art box တွေ ခွဲပြီး ထည့်ထားခြင်းဟာ ရေရည်အတွက် အဆင်ပြေပါတယ်။

Check Dribble

Dribbble မှာ နိုင်ငံတကာ designer တွေရဲ့ app design တွေ website design တွေ ရှိပါတယ်။ ပုံမှန် နေ့စဉ် ကြည့်သင့်တဲ့ site ဆိုလည်း မမှားပါဘူး။ Desing ဝါသနာ ပါတဲ့ သူတွေ အတွက် အသုံးဝင်ပါလိမ့်မယ်။

Are you using iOS or Android ?

တကယ်လို့ သင့် အနေနဲ့ Android ကို အသုံးပြုနေကြဆိုရင် iOS design ဆွဲတဲ့ အခါမှာ android က use experience တွေကို အပြည့်အဝ ထည့်သွင်း စဉ်းစားလို့မရဘူး။ ဒီလိုပါပဲ iOS ကို အသုံးပြုတဲ့ designer အနေနဲ့ Android design ဆွဲတဲ့ အခါမှာ iOS က user experience ကို အပြည့်အဝ ထည့်သွင်းလို့ မရပါဘူး။ iOS မှာ ဘာတွေ လုပ်နိုင်တယ် Android မှာ ဘာတွေ လုပ်နိုင်တယ်ဆိုတာကို နားလည်ထားဖို့လိုပါတယ်။ platform ၂ ခု လုံးရဲ့ UX ပိုင်းကတော့ နီးစပ်မှုတော့ ရှိပါတယ်။ အနည်းငယ် ကွဲပြားတယ်ဆိုတာကို သိဖို့ လိုပါတယ်။