Design

How To Create Wireframe

မဂၤလာပါ။
ညီမကေတာ့ Spiceworks Myanmar မွာ Web Designer အျဖစ္ဝင္ေရာက္လုပ္ကိုင္ေနတဲ႔ ဆုရည္ထြန္း ျဖစ္ပါတယ္။
Web Production ပိုင္းႏွင္႔ပတ္သက္ျပီး အသံုးဝင္မည္႔အေၾကာင္းအရာမ်ားကို အဓိကထားျပီး Spiceworks Myanmar Blog Page ကေန ညီမသိသေလာက္ knowledge sharing လုပ္လာခဲ႔ ျပီးေတာ႔ ဒီတေခါက္မွာေတာ႔ Wireframe နဲ႔ ပတ္သက္ျပီး sharing လုပ္ေပးခ်င္ပါတယ္ရွင္႔။

ကိုယ္႔ရဲ႕အလုပ္ Career ကို Web Developer တစ္ေယာက္အေနနဲ႔ ျဖစ္ျဖစ္၊ Web Designer တစ္ေယာက္အေနနဲ႔ ျဖစ္ျဖစ္ လုပ္ကိုင္ေနၾကတဲ႔သူအမ်ားစုကေတာ႔ ညီမရဲ႕ blog ကိုမဖတ္ခင္ထဲက Wireframe ဆိုတဲ႔ေဝါဟာရနဲ႔ အက်ြမ္းတဝင္ရွိျပီးေတာ႔ Wireframe လို႔ေျပာလိုက္တာနဲ႔ မည္သည္႔အေၾကာင္းအရာကိုေျပာခ်င္တာလဲႏွင္႔သူ႕ရဲ႕ရည္ရြယ္ခ်က္ကို အၾကမ္းဖ်င္းစိတ္ကူးထားျပီးျဖစ္မွာပါ။

Wireframe ကိုမိမိရဲ႕လုပ္ငန္းခြင္မွာ အထက္လူၿကီးရဲ႕ေစခိုင္းမွုေၾကာင့္ပဲျဖစ္ျဖစ္၊ မိမိကိုယ္တိုင္လိုအပ္လာလို႔ပဲျဖစ္ျဖစ္ ဘယ္ကေနစလုပ္ရမယ္ဆိုတာ မသိေသးတဲ႔ ညီ္ိ္္္္ငယ္၊ ညီမငယ္ေလးေတြအတြက္ ရည္ရြယ္ျပီးေျပာျပေပးခ်င္ပါတယ္ရွင္႔။

Wireframe ႏွင္႔ ပတ္သက္ျပီး
(၁) Wireframe ဆိုတာ ဘာလဲ?
(၂) Wireframe ကို ဘာေၾကာင္႔ ျပဳလုပ္သင္႔တာလဲ?
(၃) Wireframe ကို အခုမွ စတင္ျပဳလုပ္မည္႔သူမ်ားအတြက္
(၄) Wireframe ျပဳလုပ္ေတာ႔မယ္ဆိုလ်ွင္ သတိထားရမည္႔အခ်က္မ်ား စသည္ျဖင္႔ sharing လုပ္ေပးသြားပါမယ္။

(၁) Wireframe ဆိုတာဘာလဲ?

ညီမအေနနဲ႔ ကေတာ႔ Wireframe ဆိုတာက

“အမ်ားအားျဖင္႔ UX Designer သို႔မဟုတ္ Client ေတြအေနျဖင္႔ အသံုးျပုသူ user ေတြဆီကေန အဆင္႔ဆင္႔သုေတသနလုပ္ထားတဲ႔ အခ်က္အလက္ေတြေပၚအေျခခံျပီး User ေတြ အတြက္ အဆင္ေျပေစမည္႔ Website တစ္ခု၊ Application တစ္ခု (သို႔မဟုတ္) ထုတ္ကုန္ product ေတြအတြက္သူတို႔၏ Design အခ်က္အလက္အဆင္႔ဆင္႔ကို သတ္မွတ္စီမံရန္”

လို႔ အဓိပၸါယ္ဖြင္႔ခ်င္ပါတယ္။


(၂) Wireframe ကိုဘာေၾကာင္႔ ျပဳလုပ္သင္႔တာလဲ?

Wireframe ကိုဘာေၾကာင္႔ ျပုလုပ္ရန္လိုအပ္တာလဲ ဆိုတာကေတာ႔သူ႔ရဲ႕အဓိပၸါယ္ဖြင္႔ဆိုခ်က္ကို ဖတ္ျပီးေတာ႔ အနည္းငယ္ေတာ႔ နားလည္သြားလိမ္႔မယ္ထင္ပါတယ္ရွင္႔။
ညီမတို႔ Website တစ္ခုကို coding စမေရးခင္မွာ ကိုယ္႔ Website ရဲ႕လုပ္ေဆာင္ပံုအဆင္႔ဆင္႔ကို နားလည္ထားဖို႔လိုအပ္ပါတယ္ရွင္႔။ Client ဆီကေနရရွိလာတဲ႔ product ႏွင္႔ပတ္သက္ျပီး အဆင္႔ဆင္႔သုေတသနလုပ္ထားတဲ႔ အခ်က္အလက္ေတြေပၚအေျခခံ၍ User ေတြအဆင္ေျပေစမည္႔ Website တစ္ခုကို မိမိကိုယ္တိုင္ Design ျပဳလုပ္ရန္ေသာ္လည္းေကာင္း၊ Coder (သို႔မဟုတ္) Project Member ေတြကိုရွင္းလင္းေျပာျပရာမွာ အသံုးျပုဖို႔အတြက္ေသာ္လည္းေကာင္း Wireframe ကမရွိမျဖစ္လိုအပ္ပါတယ္။

ဒီေနရာမွာ အဓိကေျပာခ်င္တာကေတာ႔

“Wireframe ျပဳလုပ္ဖန္တီးျခင္းအားအခ်ိန္ျဖဳန္းသည္”

ဟု မယူဆသင္႔ပါဘူးရွင္႔။

Wireframe ဆိုသည္မွာ Website တစ္ခုတြင္ပါဝင္မည္႔ Menu တစ္ခုခ်င္းစီ၏အလုပ္လုပ္ပံု၊ Button တစ္ခုခ်င္းစီ၏အလုပ္လုပ္ပံုကို Design ဖန္တီးေပးမည္႔ Designer အျပင္၊ Website အားသက္ဝင္လာေစရန္ျပုလုပ္ေပးမည္႔ Coder မ်ားကို project flow အားရွင္းရွင္းလင္းလင္းျမင္သာေစရန္ ျပုလုပ္ေပးမည္႔အရာျဖစ္ပါတယ္ရွင္႔။
Wireframe ေကာင္းတစ္ခုဖန္တီးထားျခင္းျဖင္႔ Designer ၊ Developer မ်ားႏွင္႔ Business Partner Client မ်ား၏ အခ်ိန္ႏွင္႔အားထုတ္မွဳကို အမ်ားၾကီးသက္သာေစပါတယ္ရွင္႔။

(၃) Wireframe ကိုအခုမွစတင္ျပဳလုပ္သူမ်ားအတြက္

Wireframe တစ္ခုကို အခုမွစတင္ဖန္တီးမည္ဆိုလွ်င္ “စာရြက္”ေပၚတြင္ “ခဲတံ” ျဖင္႔ေရးဆြဲျခင္း (သို႔မဟုတ္) Whiteboard တို့အား အသံုးျပဳနိုင္ပါတယ္ရွင္႔။ Wireframe ျပဳလုပ္သည္႔ tool မ်ားႏွင္႔ မရင္းႏွီးေသးေသာ beginner မ်ားအတြက္ paper prototype ကိုအသံုးျပုျခင္းသည္ ျပင္ဆင္ရပိုမိုလြယ္ကူေစပါတယ္ရွင္႔။

” Wireframe ျပဳလုပ္ခ်ိန္တြင္ ကုန္က်ေသာျပင္ဆင္စရိတ္မ်ားသည္ coding ျပဳလုပ္ျပီးမွ ျပန္လည္ျပင္ဆင္သည္႔စရိတ္ထက္ အမ်ားၾကီးသက္သာပါတယ္ရွင္႔။”

Website Production ျပဳလုပ္ရာမွာလည္း

  1. Wireframe > Interactive Prototype > Visual > Design > Code
  2. Sketch > Code
  3. Sketch > Wireframe > Hi-Def Wireframe > Visual > Code
  4. Sketch > Wireframe > Visual > Code

စသည္ျဖင္႔ မိမိ project လိုအပ္ခ်က္ေပၚလိုက္ျပီး Processing Structure အမ်ိုးမ်ိုးကြဲျပားနိုင္ပါတယ္။

မိမိ၏ project မွာဖန္တီးမွဳအခ်ိန္နည္းၿပီး System ပိုင္းအဓိကထားေသာ project ျဖစ္ပါက Design Wireframe အား Sketch သာဆြဲ၍ coding ျပဳလုပ္ျခင္းကအဆင္ေျပနိုင္ပါတယ္။သို႔ေသာ္ မိမိ၏ project မွာဖန္တီးမွဳအခ်ိန္အတြက္ အလံုအေလာက္ရရွိရံုသာမက UI ပိုင္းကိုအဓိကထားေသာ Project ျဖစ္ပါက

Hi-Def Wireframe > Interactive Prototype > Visual > Design > Code

စသည္ျဖင္႔ Wireframe ပိုင္းကိုဦးစားေပးလုပ္ေဆာင္ျပီးမွသာ Coding ဖန္တီးမွုအပိုင္းသို႔သြားပါမွ ပိုမိုအဆင္ေျပမွာျဖစ္ပါတယ္။

Web Production တြင္ Designer တစ္ေယာက္ႏွင္႔တစ္ေယာက္ ေတြးေခၚပံုမတူညီနိုင္သလို Design ဆြဲရာတြင္ အသံုးျပုသည္႔ Tool မ်ားလည္း မတူညီျကတဲ႔အတြက္ေျကာင္႔ Wireframe ဆြဲရာတြင္လည္းအသံုးျပုသည္႔ Tool ႏွင္႔ ဖန္တီးမွဳအဆင္႔ဆင္႔သည္အမ်ိုးမ်ိုးကြဲျပားနိုင္ပါတယ္။

2020 မွာ Wireframe ဖန္တီးရန္အတြက္ အေကာင္းဆံုးလို႔ သတ္မွတ္ျခင္းခံထားရတဲ႔ Tool ေလးေတြကိုလည္း မိတ္ဆက္ေပးခ်င္ပါတယ္ရွင္႔။

The 8 Best Wireframe Tools for UX Designers in 2020

  1. Balsamiq Wireframes
  2. Wireframe.cc
  3. Figma
  4. Pencil Project
  5. NinjaMock
  6. FluidUI
  7. Mockflow
  8. Cacoo

အထက္ပါ Tool (၈)ခု ႏွင္႔ပတ္သက္ျပီး အားသာခ်က္၊ အားနည္းခ်က္၊ ေငြေပးေခ်မွုအေၾကာင္းအရာမ်ားကို ေအာက္ပါ link တြင္အေသးစိတ္ေလ႔လာနိုင္ပါတယ္ရွင္႔။
https://careerfoundry.com/en/blog/ux-design/free-wireframing-tools/

အထက္ပါ Tool (၈)ခုလံုးက Free အသံုးျပဳနိုင္မည္႔အခ်ိန္ပါဝင္တဲ႔အတြက္ေၾကာင္႔ မိမိအေနျဖင္႔ အသံုးျပဳရလြယ္ကူရံုသာမက ေရရွည္အသံုးျပဳလိုသည္႔ Tool အားေသခ်ာစြာသိရွိေစရန္ Tool (၈)ခုလံုးကို အစမ္းအသံုးျပဳၾကည္႔ဖို႔ ညီမအေနနဲ႔အၾကံေပးခ်င္ပါတယ္။

Beginner မ်ားအေနနဲ႔ကေတာ႔ Wireframe ျပဳလုပ္ရန္ အထက္ပါ Tool မ်ားကို မျဖစ္မေန အသံုးျပဳရမည္လို႔ေတာ႔မဆိုလိုပါဘူးရွင္႔။ ဘာလို႔လဲဆိုေတာ႔ အေပၚမွာေျပာျပေပးခဲ႔တဲ႔အတိုင္း Wireframe ျပဳလုပ္ရန္အတြက္ “စာရြက္ႏွင္႔ခဲတံ” ကိုလည္းအသံုးျပဳလို႔ရတဲ႔အတြက္ေျကာင္႔ ျဖစ္ပါတယ္ရွင္႔။

Wireframe ဆိုတာဘာလဲ၊ Wireframe ကိုဘာေၾကာင္႔ ျပဳလုပ္သင္႔တာလဲ ဆိုတဲ႔အေၾကာင္းအရာမ်ားအျပင္ Wireframe ဖန္တီးႏိုင္ရန္အတြက္ Tool (၈)ခု ကိုပါမိတ္ဆက္ေပးျပီးျပီဆိုေတာ႔ အခု Wireframe တစ္ခုျပုလုပ္ရာမွာ သတိထားရမည္႔ အခ်က္ေလးေတြကိုလည္း တစ္ခါထဲ ေျပာျပေပးမယ္ေနာ္။

(၄) Wireframe ျပဳလုပ္ေတာ႔မည္ဆိုလွွ်င္ သတိထားရမည္႔အခ်က္မ်ား

Wireframe ျပဳလုပ္ေတာ႔မည္ဆိုလွွ်င္ ေအာက္ပါအခ်က္(၆)ခ်က္ကို သတိထားလုပ္ေဆာင္ေပးဖို႔လိုပါတယ္။

Step 1 : Make sure you know what you are building
ပထမအဆင္႔အေနနဲ႔ကေတာ႔ Wireframe အတြက္သာမက လုပ္ငန္းတစ္ခုစတင္ေတာ႔မည္ဆိုလွ်င္လည္းမျဖစ္မေန သိရမွာကေတာ႔ ကိုယ္ဘာလုပ္မွာလဲ? ဆိုတာပါပဲ။ဒါေၾကာင္႔ Wireframe မျပဳလုပ္ခင္ ပထမအဆင္႔အေနနဲ႔ ကိုယ္႔ရဲ႕project ႏွင္႔ပတ္သက္ျပီး Target ကဘာလဲဆိုတာကို နားလည္ထားရပါမယ္။ဒါေပမယ္႔ ပထမအဆင္႔မွာ Design Theory ေတြကိုေတာ႔ ေမ႔ထားေစခ်င္ပါတယ္။ Website ရဲ႕ Color ၊ Images ႏွင္႔ Font Style ေတြကို စဥ္းစားေနမည္႔အစား Page အေရအတြက္၊ button တစ္ခုခ်င္းစီ၏ Function ၊ Menu ၊ Search bar လိုမလို၊ Chat feature ၊ Social media အသံုးျပဳမျပု စသည္ျဖင္႔ Website ၏လိုအပ္ခ်က္မ်ားကို အရင္စဥ္းစားရမွာျဖစ္ပါတယ္ရွင္႔။

Step 2 : Focus on UX, not design
Wireframe အတြက္စဥ္းစားတဲ႔အခ်ိန္မွာ ပထမအဆင္႔မွာ ေျပာခဲ႔သလို ဒုတိယအဆင္႔မွာလည္း Design ထက္ UX ပိုင္းကို ပိုျပီးသတိထားလုပ္ေဆာင္ေပးရမွာျဖစ္ပါတယ္ရွင္႔။ UX ဆိုတာကေတာ့ Website တစ္ခုလံုးမွာပါတဲ႔ page တိုင္းအတြက္ content အျပည္႔လိုက္ျဖည္႔ျခင္းမဟုတ္ဘဲ ကိုယ္႔ Website ရဲ႕ Target User က ဘယ္သူလဲ? ဆိုတာေပၚမူတည္၍ သူတို႕စိတ္ဝင္စားနိုင္မည္႔ အခ်က္အလက္ေတြ၊ ကိုယ္ရဲ႕ Website ကိုျဖစ္နိုင္သမ်ွ ျမန္ျမန္ႏွင္႔အသံုးျပဳရလြယ္ကူေအာင္ မည္သို႔အသံုးခ်ရမလဲဆိုတာကို အဓိကထားစဥ္းစားျပီး လုပ္ေဆာင္ရမည္႔အခ်က္မ်ားကို list ထုတ္ရမွာျဖစ္ပါတယ္ရွင္႔။

Step 3 : Find inspiration in existing sources
အဆင္႔ (၃) အေနနဲ႔ ကေတာ႔ Wireframe ျပဳလုပ္ရာမွာ အၾကမ္းျခစ္တဲ႔ပံုစံျဖင္႔မစတင္ဘဲ တစ္ျခားသူမ်ားျပုလုပ္ထားတဲ႔ Template မ်ားကိုအသံုးခ်ျပီး မိမိတို႔ company စည္းမ်ဥ္း၊ စည္းကမ္းမ်ားအတိုင္း ခ်ိန္ညိွေပးရမွာျဖစ္ပါတယ္။ကိုယ္႔ရဲ႕ Wireframe ကို Hi-Def Wireframe အဆင္႔မရရင္ေတာင္ အနည္းဆံုး medium-fidelity level ေလာက္ေတာ႔ေရးဆြဲသင္႔ပါတယ္ရွင္႔။

medium-fidelity level
medium-fidelity level

Step 4 : Build your wireframe
အဆင္႔ (၄) ေရာက္လာရင္ေတာ႔  အေပၚမွာေျပာျပခဲ႔တဲ႔ Wireframe tool မ်ားကို အသံုးျပဳျပီး Wireframe စတင္ျပုလုပ္ရမွာျဖစ္ပါတယ္ရွင္႔။

Hi-Def Wireframe
Hi-Def Wireframe

Step 5 : Make It Work
အဆင္႔ (၅) မွာေတာ႔ Website ၏လိုအပ္ခ်က္၊ User လိုအပ္ခ်က္မ်ားကို သံုးသပ္ၿပီးရရွိလာေသာ Wireframe အား Client ကိုျပသျပီး design အေခ်ာမေရးဆြဲမီ လိုအပ္ခ်က္မ်ားအားျပင္ဆင္နိုင္ရန္ feedback ေတာင္းရမွာျဖစ္ပါတယ္။

Step 6 : Test and present your idea
အဆင္႔ (၆) ေရာက္ရင္ေတာ႔ Website မွာထည္႔သြင္းမည္႔ function ေတြက ျဖစ္နိုင္မျဖစ္နိုင္ developer မ်ားႏွင္႔ ေဆြးေနြးတိုင္ပင္ျပီး Development ပိုင္းအတြက္ feedback ယူ၍ ရလာေသာအခ်က္အလက္မ်ားအား Client ႏွင္႔ Confirm လုပ္ရမွာျဖစ္ပါတယ္။Client နွင္႔ ေဆြးေႏြးၿပီး အဆင္ေျပပါက Wireframe ျပဳလုပ္ျခင္းျပီးစီး၍ Design အေခ်ာျပဳလုပ္ျခင္းအဆင္႔အား ကူးေျပာင္းရမွာျဖစ္ပါတယ္ရွင္႔။

ေအာက္ပါပံုကိုၾကည္႔၍လည္း Wireframe တစ္ခုျပုလုပ္ရာမွာပါဝင္တဲ႔ အဆင္႔ဆင္႔ကို ေလ့လာနိုင္ပါတယ္။

အားလံုးကိုေက်းဇူးတင္ပါတယ္။
Reference:
https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
https://careerfoundry.com/en/blog/ux-design/free-wireframing-tools/#1-balsamiq-wireframes
https://blog.capterra.com/how-to-create-wireframes/

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *