နိဒါန်း

                ပြီးခဲ့တဲ့ Minimalist Web Design အခြေခံ အပိုင်း (၁) တုန်းကတော့ ညီညွတ်မှုနဲ့ နေရာလွတ် အကြောင်းကို ရေးခဲ့ပါတယ်။ ဒီအပိုင်းမှာတော့ Alignment (နေရာယူမှု) နဲ့ Hierarchy (အဆင့်ဆင့် ချိတ်ဆက်မှု) အကြောင်းနဲ့ တစ်ခြား အကြောင်းတွေကို ဆွေးနွေးသွားမှာ ဖြစ်ပါတယ်။

Alignment (နေရာယူမှု)

                Minimalist Design တွေမှာ Alignment ဆိုတာ အလွန်အရေးပါတဲ့ အခန်းကဏ္ဍမှာ ရှိပါတယ်။ Alignment အနေနဲ့ Website တွေမှာ ပုံစံမျိုးစုံထား နိုင်ပါတယ်။ ဒါပေမယ့် Minimalist Design တွေမှာတော့ Clean, Simple, Minimal ဆိုတဲ့ ဂုဏ်သတ္တိသုံးခုကို အားဖြည့်ပေးနိုင်ပြီး၊ ညီညွတ်မှုရှိတဲ့ နေရာလွတ်တွေကို အထောက်အပံ့ပေးနိုင်တဲ့ ဒီဇိုင်းတွေ ဖြစ်ဖို့လိုပါတယ်။ 

                Grid တွေသုံးပြီး စနစ်တကျ Alignment ထားပေးဖို့ လိုသလို၊ နေရာလွတ်တွေကိုလည်း မမေ့ဖို့ လိုပါတယ်။ နမူနာတွေနဲ့ လေ့လာကြည့်ရအောင် ...

                ဒါကတော့ 5-Squared က ဒီဇိုင်းပါ။ အင်မတန် ရိုးရှင်းတဲ့ ပုံစံပါ။ ကိုယ်လုပ်ထားတဲ့ Project တွေကို Grid ထဲမှာ Left Alignment ကိုယ်စီနဲ့ ထည့်ထားပေးပါတယ်။ jQuery ကို သုံးပြီး Lightbox နဲ့ Project တွေကို ထပ်ဖော်ပြပေးပါတယ်။

                နေရာလွတ်တွေကိုလည်း သေသေချာချာ ချထားပြီး အရောင်ကိုလည်း အနည်းဆုံး သုံးထားပြီး သိစေလိုတဲ့ Project တွေကို ရှေ့တန်းတင်ထားပါတယ်။ နောက်ခံမှာ Shadow ချနေတဲ့ ပုံစံလေးတွေ ဖန်တီးထားပြီး Project Thumb တွေကို ပိုပြီး ကြွလာအောင် ဖန်တီးထားပါတယ်။ Alignment နေရာချထားမှုရဲ့ အားသာချက်ကို စနစ်တကျ အသုံးချထားတာ တွေ့ရမှာ ဖြစ်ပါတယ်။

                Buffalo Website ဟာလည်း Minimalist Website တွေရဲ့ Alignment နဲ့ ပတ်သက်တဲ့ နမူနာ ပုံစံတစ်ခုပါပဲ။ Div တွေကို တစ်ခုခြင်းစီ စနစ်တကျ ခွဲထားပြီး အရောင်သုံးထားတာလည်း အင်မတန်နည်းပါတယ်။ ဒါပေမယ့် ပေါ်လွင်စေချင်တဲ့ အချက်တွေ ဖြစ်တဲ့ Asia, 11.42%, Water Buffali, Unique စတာတွေကိုတော့ အနီရောင်နဲ့ ရှေ့တန်းတင်ထားပါတယ်။ 

                Color အတွဲ အစပ်မှာလည်း အရောင်သုံးရောင်ခန့်သာ သုံးထားတာ တွေ့ရပါလိမ့်မယ်။ အဲဒီ Website မှာ အဓိက အကျဆုံး အစိတ်အပိုင်းကတော့ Grid Based Layout ပါပဲ။ နှစ်ကန့်ခွဲသင့်တဲ့နေရာမှာ နှစ်ကန့်ခွဲထားပြီး၊ သုံးကန့်၊ လေးကန့် စသည်ဖြင့် ခွဲဖို့လိုတဲ့နေရာမှာ လိုသလိုခွဲထားပါတယ်။ 

                နောက်၊ နေရာလွတ်တွေကိုလည်း ပေးထားပြီး Website ကို လာရောက် လည်ပတ်သူတွေအတွက် စိတ်မွန်းကျပ်မှုတွေကို ဖြေလျော့ပေးနိုင်စွမ်း ရှိပါတယ်။ Slider ကိုလည်း ရိုးရိုးရှင်းရှင်းနဲ့ အောက်ဖက်ကနေ တစ်ခုခြင်းတက်လာတဲ့ ပုံစံကို ရွေးထားပါတယ်။

Hierarchy (အဆင့်ဆင့် နေရာချထားမှု)

                အဆင့်ဆင့် နေရာချထားမှု ဆိုတဲ့ အပိုင်းကတော့ အပေါ်ဖက်က Alignment နဲ့ မတူပါဘူး။ Alignment မှာတုန်းက စာမျက်နှာ တစ်ခုတည်းမှာ နေရာချထားတဲ့ ပုံစံကို အဓိကထားပါတယ်။ Hierarchy ဆိုတာကတော့ နောက်စာမျက်နှာတွေကို ဆွဲခေါ်တဲ့ အပိုင်းပါ။

                “Website ကို လာလည်သူ ကိုဆွဲဆောင်ဖို့ ရတဲ့အချိန်က စက္ကန့်ပိုင်းပဲ ရှိတယ်” လို့ အပိုင်း-(၁) မှာ ပြောခဲ့ပြီး ဖြစ်ပါတယ်။ Website ကိုလာကြည့်တယ်။ ဟာ ရှုပ်နေတာပါပဲ။ မကြည့်တော့ဘူးဆိုပြီး လှည့်ပြန်သွားနိုင်သလို၊ ကိုယ်ပေးချင်တဲ့ Message က ဘာမှန်းမသိပဲ လှည့်ပြန်သွားတာလဲ ဖြစ်နိုင်ပါတယ်။ 

                အဲဒါမျိုး ဆိုရင်တော့ One-time Visit တွေများပြီး Website Traffic လည်း လျော့ကျလာပါလိမ့်မယ်။ ဒါကြောင့် စက္ကန့်ပိုင်းအတွင်း ရတဲ့အချိန်လေးမှာ နောက်ဖက်မှာ အဆင့်ဆင့်ရေးဆွဲထားတဲ့ Web Page တွေ ဝင်ရောက် လေ့လာအောင် ဆွဲဆောင် နိုင်ဖို့လည်း အင်မတန် အရေးကြီးပါတယ်။ First Page တွေမှာ Brief အနေနဲ့ ကိုယ်ပေးချင်တဲ့ Message ကို ထိထိမိမိပေးဖို့ လိုသလို Second Page တွေမှာတော့ ပိုပြီး Detail ကျတဲ့ Message တွေကို ပေးဖို့ လိုပါတယ်။ 

                ဒီတော့ Website Visitor အနေနဲ့ ပထမဦးဆုံး ထိတွေ့ရမယ့် First Page ကနေ Second Page တွေကို ရှေ့ဆက်သွားဖို့ Hierarchy တွေရဲ့ အခန်းကဏ္ဍက အင်မတန် အရေးကြီးပါတယ်။

                PandaWeb ဆိုတဲ့ Website မှာတော့ ပထမစာမျက်နှာမှာ ဘာမှကို ထည့်မထားပါဘူး။ Slider ရိုးရိုးရှင်းရှင်း တစ်ခုနဲ့ သူတို့ဘာလုပ်တဲ့အကြောင်း ဖော်ပြထားပါတယ်။ အရှေ့ဆုံးမှာ ပေးချင်တဲ့ Message ဖြစ်တဲ့ we craft website, print & multimedia. more about pandaweb. ဆိုပြီး Second Page ကို ဆွဲခေါ် ထားပါတယ်။ 

                PANDAWEB ဆိုတဲ့ Logo ရယ် About, Work, Services, Contact ဆိုတာတွေ အကုန်လုံးကို ခပ်မှိန်မှိန် ထားထားပြီး အဓိက ပေါ်လွင်စေချင်တာ Slider ပါ။ အဲဒီအတွက် Slider မှာ Font ကို ကြီးထားပြီး Message ကို ထင်သာ မြင်သာ ရှိအောင် ဖော်ပြထားပါတယ်။ ဒီတော့ Website ကို လာလည်တဲ့သူ အနေနဲ့ အော်သူတို့က ဒါတွေ လုပ်တာကိုး ဆိုပြီး စက္ကန့်ပိုင်းအတွင်း သိသွားနိုင်ပါတယ်။ 

                ရှေ့ဆက်ပြီး သူတို့ ဘာတွေလုပ်ထားသလဲ သိချင်စိတ် ဖြစ်ပေါ်လာပါတယ်။ အဲဒီလို ဖြစ်ပေါ်လာအောင် Website ရဲ့ ညီညွတ်မှုက ဆွဲဆောင်ပါတယ်။ Minimalist Design တွေရဲ့ စံနှုန်းတွေနဲ့လည်း အင်မတန် ညီညွတ်တဲ့ ဒီဇိုင်းတစ်ခုပါပဲ။ 

                Hierarchy နဲ့ ပတ်သက်ရင် လေ့လာစရာက အင်မတန်များပါတယ်။ တစ်ခုနဲ့ တစ်ခု မတူညီတဲ့ အမြင်တွေနဲ့ မတူညီတဲ့ သဘောတွေ ရှိနေကြပါတယ်။ ဒါကြောင့် များများ လေ့လာမှသာ တန်ကာကျပါလိမ့်မယ်။

မလိုသည်များကို ဖယ်ပစ်ပါ

                မလိုသည်များကို ဘယ်လို ဖယ်မှာလဲ။ အဲဒီလို ရဲရဲတင်းတင်း ဖယ်နိုင်ဖို့ ပြန်ကြည့်ရမယ့် အပိုင်းက အပိုင်း-(၁) မှာ ပြောခဲ့တဲ့ “Website ရဲ့ ရည်ရွယ်ချက်” ဆိုတဲ့ အပိုင်းပါ။ Website တစ်ခုရဲ့ ရည်ရွယ်ချက်ကို တိတိကျကျ ချထားပြီးတဲ့အချိန်မှာ Main Page (သို့) First Page မှာ ဘာတွေ ဖယ်ထုတ်ရမယ်ဆိုတာ သိပြီးဖြစ်ပါလိမ့်မယ်။ 

                ပေးချင်တဲ့ Message ကို စက္ကန့်ပိုင်းအတွင်းမှာ ပေးနိုင်စေဖို့ Minimalist Design တွေမှာ အားသာချက်တွေ အများကြီး ရှိနေပါတယ်။ Simple (ရိုးရှင်းရမယ်)၊ Minimal (မလိုတာ မပါရဘူး)၊ Clean (သပ်ရပ်မှု ရှိရမယ်) ဆိုကတည်းက ပေးချင်တာကို ထိထိမိမိ ပေးနိုင်ဖို့ အထောက်အပံ့ ပေးပြီးသားလို့ ဆိုနိုင်ပါတယ်။

                အဲဒီလို ရည်ရွယ်ချက်ကို ပံ့ပိုးပေးနိုင်တာပဲ ထည့်မယ်ဆိုတော့ တစ်ခုခုထည့်မယ်လို့ ကြံလိုက်တာနဲ့ 

• ဒါက တကယ်ကော လိုလို့လား? 
• ရည်ရွယ်ချက် အတွက် ဘယ်လောက်အထိ အထောက်အပံ့ ပေးနိုင်မှာလဲ? 
• ရည်ရွယ်ချက်ကို အကောင်းဆုံး ထိရောက်အောင် ပံ့ပိုးနိုင်ဖို့ ဘယ်လို အရောင်တွေ သုံးမလဲ? 
• အရောင်တွေ ပိုနေသလား? 
• jQuery Slider သုံးမယ်။ သုံးတာတော့ ဟုတ်ပါပြီ။ လိုလို့လား? 
• ကိုယ်ပေးချင်တာက စာတစ်ကြောင်းတည်း အဲဒါကို Slider နဲ့ ပြနေလို့ ဖြစ်ပါ့မလား?

စသည်ဖြင့် ရည်ရွယ်ချက်ကို အသေဆုတ်ကိုင်ထားပြီး မေးခွန်းတွေ မေးရပါလိမ့်မယ်။

                နောက် Website ကို လွင့်တင်လိုက်တဲ့ အခါမှာလည်း ဘယ်နေရာတွေကိုတော့ မဝင်ဘူး၊ အသုံးပြုမှု မရှိဘူးဆိုတာ Tracking လုပ်ထားပြီး ဖယ်သင့်တာဖယ် ပြောင်းလဲ သင့်တာ ပြောင်းလဲဖို့ လိုပါတယ်။

                သေသေချာချာ မှတ်ထားရမှာကတော့ Minimalist Design တွေဆိုတာ Clean, Simple, Minimal ဆိုတဲ့ သုံးခုကို ဦးထိပ်ပန်ဆင်ပြီး အခြေခံအကျဆုံးနဲ့ လာလည်တဲ့ သူတွေကို ဆွဲဆောင်ရမှာဖြစ်ပြီး ဘာတွေပေးချင်တယ်၊ ဘာတွေ သိစေချင်တယ်ဆိုတာကို ထိရောက်မှု အရှိဆုံး သက်တောင့်သက်သာ အရှိဆုံးပုံစံနဲ့ ချဉ်းကပ် ပုံဖော်ပေးရမယ် ဆိုတာပါပဲ။

Usability (အသုံးပြုရ လွယ်ကူမှု၊ အဆင်ပြေမှု) ဆိုတာ ရှောင်လွဲလို့မရပါ

                ဘယ်လို Web Design မဆို Usability (အသုံးပြုရ လွယ်ကူမှု၊ အဆင်ပြေမှု) ဆိုတဲ့ ဘောင်ကနေ လွတ်ထွက်သွားလို့ မရပါဘူး။ Website တစ်ခုလုံး အနေနဲ့ အားလုံး အချိတ်အဆက်မိမိ အလုပ်လုပ်နိုင်ရမှာ ဖြစ်သလို အားလုံး အဆင်ပြေပြေ ချောချာ မွေ့မွေ့ Navigate လုပ်နိုင်ဖို့လည်း လိုပါတယ်။ 

                ဒီဇိုင်းကို အကောင်းဆုံး ပုံစံချထားတယ်၊ အသုံးပြုသူတွေ အတွက်အလည်း လွယ်လွယ်ကူကူ အသုံးပြုနိုင်တယ် ဆိုရင် အဲဒီ Website မှာ လူတွေ အဝင်များပြီး အချိန်ကြာကြာ Content တွေ လည်ပတ်နိုင်မှာ ဖြစ်သလို Website လည်း လူသုံးများတဲ့ Website တစ်ခု ဖြစ်လာနိုင်ပါတယ်။ အဲဒီလိုပဲ Website ကပေးချင်တဲ့ Message ကိုလည်း ထိထိရောက်ရောက် ပေးနိုင်လာပါလိမ့်မယ်။

                Website တစ်ခုဟာ လာလည်တဲ့သူတွေကို သုံးတဲ့အခါမှာ လွယ်ကူမှု၊ သက်သောင့်သက်သာ ရှိမှုတွေကို ပေးစွမ်းနိုင်မယ် ဆိုရင် Website ကို လာလည်တဲ့ လူအပေါင်းကို စာတွေဖတ်ချင်လာအောင်၊ ပျော်ရွှင်စရာကောင်းတဲ့ နေရာလေးလို့ ခံစားလာရအောင် ဖန်တီးနိုင်ပါလိမ့်မယ်။

                Style အသစ်တွေ၊ နည်းစနစ် အသစ်တွေကို ဖန်တီးဖို့ နောက်တွန့်မနေပါနဲ့။ ဒါပေမယ့် အခြေခံလိုအပ်ချက်တွေကိုလည်း မမေ့ပါနဲ့လို့ ဆိုရမှာ ဖြစ်ပါတယ်။ အခြေခံလိုအပ်ချက်တွေကို လေ့လာကြည့်ရအောင်

• လင့် (Links) တွေ အနေနဲ့ လွယ်လွယ်ကူကူ သိနိုင်ရမယ်၊ နှိပ်နိုင်ရမယ်
• Home (ပင်မစာမျက်နှာ) ကို ပြန်သွားဖို့ အမြဲတမ်း အထောက်အပံ့ပေးရမယ်၊ လွယ်လွယ်ကူကူ ပြန်သွားနိုင်ရမယ်
• Browser က Back Button ကို ဘယ်တော့မှ Disable မလုပ်ပါနဲ့
• Pop-up Windows (Lightbox လိုမျိုး) တွေမှာ Close (အပိတ်) Button ပါပါစေ
• အသုံးပြုသူအနေနဲ့ ဘယ်စာမျက်နှာကို ရောက်နေတယ်ဆိုတာ သိသာအောင် ဆောင်ရွက်ပေးပါ

                တစ်ချို့သော Web Designer တွေ အနေနဲ့ Minimalist Design တွေ အပေါ်မှာ Font နဲ့ ပတ်သက်ပြီး အမြင်မှားတာတွေ ရှိနေတတ်ပါတယ်။ Minimalist ဆိုတာနဲ့ Font Size သေးသေးလေးတွေ သုံးရမယ်လို့ ထင်နေတတ်ပါတယ်။ 

                တကယ်တော့ Minimalist Design ဆိုတာ အနည်းဆုံး၊ အသေးဆုံး စတာတွေ မဟုတ်ပါဘူး။ မလိုတာတစ်ခုမှ မပါအောင် စီစဉ်တဲ့ အမြင်ဖြစ်ပါတယ်။ 

                ဒါကြောင့် အောက်မှာ ပေးထားတဲ့ အချက်တွေကိုလည်း ဂရုစိုက်ဖို့ လိုပါတယ်။

• Navigation (အဆင့်ဆင့် ချိတ်ဆက်ပို့ဆောင်မှု) တွေဟာ ညီညွတ်မှုရှိဖို့ လိုသလို၊ အသုံးပြုချင်လာအောင်လည်း ဆွဲဆောင်မှု ရှိရပါမယ်
• Content (Website အတွင်းမှာ ပါဝင်တဲ့ စာသား၊ ပုံ စသည်) တွေဟာ ဖတ်ရှုရ လွယ်ကူရပါမယ်၊ ခေါင်းစဉ် စာကိုယ် စသည်ဖြင့် ရှင်းရှင်းလင်းလင်း ခွဲခြားထားရပါမယ်
• ရေးသားထားတဲ့ Code တွေ အနေနဲ့လည်း ရှင်းလင်းပြီး နောက်ဆုံးပေါ် Web Standards တွေနဲ့လည်း ကိုက်ညီရပါမယ်
• Browser တိုင်းမှာ အလုပ်လုပ်တဲ့ Website တစ်ခု ဖြစ်အောင် တည်ဆောက်ဖို့ လိုပါတယ်

ပြဿနာရှိတဲ့ နေရာများကို ရှာဖွေခြင်း

                Website ကို ဒီဇိုင်းချတဲ့ နေရာမှာ Usability အတွက် အသေးစိတ် ပြင်ဆင်ပြီး လုံးဝ အဆင်ပြေချောမွေ့တဲ့ Website တစ်ခု ဖြစ်လာတယ် ဆိုပေမယ့် တကယ်တန်း Website တစ်ခုအဖြစ် Run တဲ့အခါမှာ Usability နဲ့ ပတ်သက်တဲ့ ပြဿနာတွေ ရှိနေနိုင်ပါတယ်။ အဲဒီအတွက် စစ်ဆေးဖို့ လိုပါတယ်။

                အဲဒီလို စစ်ဆေးနိုင်ဖို့အတွက် အကောင်းဆုံးနည်းကတော့ တစ်ခြားသူကို စမ်းသပ်စေခြင်းပါပဲ။ တစ်ခြား နေရာမှာတွေမှာ ရှိနေတဲ့ သူတွေကို ရွေးချယ်ပြီး နည်းလမ်းမျိုးစုံ စမ်းသပ်စေရပါမယ်။ Website မှာ ပါဝင်တဲ့ Feature တိုင်းကို စမ်းသပ်စေပြီး အသုံးပြုရ လွယ်ကူမှု အပိုင်းကို တိုင်းတာလေ့လာရမှာ ဖြစ်ပါတယ်။ 

                အဲဒီလို လေ့လာတဲ့အခါမှာလည်း

• Website က ဘယ်နေရာကို သွားကြည့်ပါ
• Email ပို့ကြည့်ပါ
• Contact လုပ်ကြည့်ပါ
• Website Loading အခြေအနေ ဘယ်လိုလဲ

စသည်ဖြင့် မေးခွန်းတွေ မေးပြီး စမ်းသပ်စေရပါမယ်။

                အဲဒီလို စစ်ဆေးစေတဲ့အခါမှာ တကယ့်ကို ထူးခြားတဲ့ အမြင်မျိုးစုံကို သင်ရလာပါလိမ့်မယ်။ သေသေချာချာ အသေးစိတ် စောင့်ကြည့်ပြီး

• သူတို့တွေ ဘယ်နေရာတွေကို ကလစ်ခေါက်ရမယ် ဆိုတာ သိရဲ့လား?
• တကယ့် အရေးကြီးတဲ့နေရာတွေကို သူတို့ မရောက်ဘူးလား?
• ဒီဇိုင်းချထားတဲ့ အစိတ်အပိုင်းတွေကို ကလစ်ခေါက်တဲ့အခါမှာ နောက်ထပ် Second Page တွေကို ရောက်မယ်ဆိုတာ သူတို့ သိသလား?
• Icon တွေကို ကလစ်ခေါက်ရာမှာ အခက်အခဲ ရှိနေသလား?

စသည်ဖြင့် လေ့လာဖို့ လိုပါတယ်။ အဲဒီလို လေ့လာတွေ့ရှိချက်တွေကို စုစည်း သုံးသပ်ပြီး ကိုယ့် Website အတွက် Usability ကို ပြန်လည် ပြင်ဆင်သင့်တာ ပြင်ဆင် ပြောင်းလဲ သင့်တာ ပြောင်းလဲဖို့ လိုပါတယ်။ 

နိဂုံး

                ကိုယ်လုပ်ထားတုန်းက အကုန်အကောင်း တင်လိုက်တော့မှ ပြဿနာတွေပဲဆိုပြီး စိတ်ဓာတ်မကျသွားပါနဲ့။ အဲဒီလို ရလာတဲ့ အတွေ့အကြုံတွေဟာ နောက်တစ်ချိန် Website ရေးဆွဲတဲ့နေရာမှာပဲ ဖြစ်ဖြစ်၊ ကိုယ့် Website ကို အကောင်းဆုံး ပြုပြင်ရာမှာပဲ ဖြစ်ဖြစ်၊ အကောင်းဆုံး အတွေ့အကြုံတွေ ရလာတယ်လို့ မှတ်သားထားဖို့ လိုပါတယ်။

Part-3