Myanmar Tutorials’ Web Design Contest [Review 2]

အပိုင်း ၁ ကိုတော့ ဒီမှာ ဖတ်နိုင်ပါတယ်။

Color Pattern

လက်ရှိ ပြိုင်ပွဲဝင် site တွေက color တွေက မလိုက်ဖက်သလို ခံစားရတယ်။ အများအားဖြင့် ကိုယ်ကြိုက်တဲ့ အရောင်တွေ ထည့်ထားသလိုပဲ။ အချို့ site တွေကတော့ မှောင်သလို ခံစားရတယ်။ Color တွေထဲမှာတော့ Romantic wedding plan လေးကတော့ မဆိုးဘူး။ သို့ပေမယ့် သုံးထားတဲ့ graphic တွေ နောက်ပြီး font တွေကို ပြင်လိုက်ရင် တော်တော်လေးကို လှသွားမယ့် site ပါ။ Mobile Network လေး ရဲ့ Color လေးကိုလည်း သဘောကျတယ်။ Music For Living က မှောင်လွန်းနေတယ်။ နောက်ပြီး အနီရောင် သုံးထားတော့ နည်းနည်း ကြည့်ရတာ ခက်သွားတယ်။ Graphic Designer idea ကလည်း ထိုနည်းတူပဲ။ အစိမ်းရောင်သုံးထားတာ အရမ်းများလွန်းနေတယ်။ Color က တစ်ရောင်တည်းနဲ့ဆိုတော့ ကြာကြာမကြည့်နိုင်ဘူး။ အခြား လိုက်ဖက်မယ့် color တွေ ရွေးချယ်သုံးနိုင်ရင် ကြည့်လို့ ကောင်းလာနိုင်ပေမယ့် တစ်ရောင်တည်းနဲ့က ရေရှည်ကြည့်ဖို့ နည်းနည်းခက်တယ်။ ပုံမှန် အားဖြင့် site တစ်ခုက color ၃ ရောင် သို့မဟုတ် ၄ ရောင် အသုံးပြုတတ်ပါတယ်။ Color Pattern ကို ကောင်းကောင်း မသိရင် Kular လိုမျိုး website တွေကို သုံးပြီး Color တွေ ရွေးချယ် အသုံးပြုလို့ရပါတယ်။

Typography

ကြည့်လိုက်တော့ အများအားဖြင့် HTML4 နဲ့ CSS 2 လောက်ပဲ အသုံးပြုထားတယ်။ HTML 5 နဲ့ CSS 3 မှာ text shadow တွေ ထည့်လို့ရပြီ။ နောက်ပြီး font embed တွေ ပါလာပြီ။ အဲဒါတွေကို အသုံးပြုပြီး စာလုံးတွေ အဖောင်းအကြွ အလှအပတွေကို ဖန်တီးလို့ရပါတယ်။ ဥပမာ ပြရင်တော့ ကိုမျိုးကျော်ထွန်း ရဲ့ http://kophyo.com/ ကို သွားကြည့်သင့်တယ်။ ပုံမှန် စာလုံးကို Cambria သုံးထားပြီး #coding ကိုတော့ Courier New ပြန်သုံးထားပါတယ်။

text shadow ဥပမာ ပြရင်တော့ appcelerator ရဲ့ site ကို ပြရမယ်။ Developer Stats ကို အဖောင်းအကြွလေးနဲ့ ပြဖို့အတွက် text shadow နဲ့ပဲ ကစားသွားပါတယ်။ my_portfolio ဆိုတဲ့ site မှာ title တွေကို header သုံးပြီး sans-serif font လှလှ လေးတွေ နဲ့ အသုံးပြုသင့်တယ်။ ဥပမာ ။။ Google web font က Amaranth ကို အသုံးပြုလိုက်ရင် အခု ထက်ကြည့်ရတာ ပိုကောင်းသွားမယ် လို့ ထင်တယ်။ ShanPyaeBo ဆိုတဲ့ site လေးက font တွေ shadow တွေ သုံးထားပေမယ့် title ShanPyaeBo ကို သုံးထားတာ ကြည့်ရဆိုးသွားတယ်။ အရိုးရှင်းဆုံး လုပ်ထားပေမယ့် ရှေ့ စာမျက်နှာမှာ font တွေ color တွေက နည်းနည်း ရှုပ်ထွေးနေတယ်။

နောက်ပြီး knowledge_shelfမှာ image တွေ အရမ်းသုံးထားတယ်။ အဲဒီ စာလုံးပုံစံကို font embed နဲ့ လုပ်ပြီး ရေးလိုက်ရင် ပိုမိုကောင်းမွန်သွားပြီး မြန်ဆန်သွားလိမ့်မယ်။ ပြင်ရ ဆင်ရတာလည်း ပိုလွယ်မယ်ထင်တယ်။ မြန်မာတွေ အနေနဲ့ကလည်း ဇော်ဂျီ တမျိုးတည်းနဲ့ နေခဲ့တာကြောင့်လည်း font အလှအပ အမျိုးမျိုးကို မခံစားတတ်တော့ဘူး။ မမြင်တတ်တော့တာလည်း ပါလိမ့်မယ်။ ဇော်ဂျီ စာလုံး ပုံစံ တစ်မျိုးတည်းနဲ့ နေရာ အစုံ သုံးထားလို့ typography ကို စိတ်မဝင်စားကြတော့လား မသိဘူး။

Quality Image ?

လက်ရှိ ပြိုင်ပွဲဝင်တဲ့သူတွေထဲမှာ ကိုယ်တိုင် လက်နဲ့ ရေးဆွဲထားတဲ့ ပုံပါတဲ့ site ကိုတော့ မတွေ့ဖြစ်ဘူး။ နောက်ပြီး online ကနေ ပေးပို့တာ ဖြစ်တဲ့အတွက်ကြောင့်ပဲလားမသိ။ Image quality တွေက လုံးဝ မကောင်းဘူး။ jpg ထက်စာရင် png ကို ပြောင်းအသုံးပြုသင့်တယ်။ နေရာသစ်ဆိုတဲ့ site မှာ menu တွေကို jpg နဲ့ အသုံးပြုထားပြီး quality တွေကို တော်တော်လေး လျော့ထားတော့ ပုံတွေ အားလုံးက ဖွာနေတယ်။ တော်တော်များများကတော့ ပုံတွေကို လှလှ ပပ နဲ့ အသုံးပြုထားပါတယ်။ hand drawing လေး တစ်ခုမှ မပါတာကတော့ မကျေနပ်မိဘူး။ Web Designer တစ်ယောက် အနေနဲ့ ပုံဆွဲတတ်ဖို့ လိုမလိုတော့ ကျွန်တော်လည်း သေချာ မပြောတတ်ဘူး။ သို့ပေမယ့် ပုံဆွဲတတ်ရင် အကောင်းဆုံးပေါ့။ ပွဲတစ်ပွဲမှာ ထူးတေဇာ design လုပ်တော့ ဘာမှ မလုပ်ရသေးတာနဲ့ ပုံတွေ ကောက်ဆွဲပြီး venyl ထုတ်လိုက်တော့လည်း ကြည့်ကောင်းသွားတာပဲ။ ပုံဆွဲ တတ်ခြင်းဟာ design ပိုင်းမှာ အခြား site တွေထက် ပိုမိုထူးခြားပြီး unique ဖြစ်စေပါတယ်။ ဥပမာ ပြရရင်တော့ Open Atrium လေးကို ပြချင်တယ်။

ရိုးရှင်းပြီး ဆွဲဆောင်မှုရှိပါစေ

အချို့ design တွေက ဆန်းသစ်မှုတွေ ပါတယ်။ အချို့ design တွေကတော့ ရိုးရှင်းတယ်။ ရိုးရှင်းတာ ကောင်းတယ်။ သို့ပေမယ့် ဆွဲဆောင်မှုရှိဖို့လိုတယ်။ ပြန်ပြောရရင်တော့ kophyo.com က ရိုးရိုးလေးနဲ့ ရှင်းရှင်းလေး။ ဒါပေမယ့် ကြည့်လိုက်ရင် ဆွဲဆောင်မှုရှိတယ်။ Web Design Studio ဆိုတာလေးက ကောင်းတယ်။ ရေးထားတာလေးတွေ မဆိုးဘူး။ ဒါပေမယ့် ဟိုးအရင်တုန်းက Design မျိုးဖြစ်နေတယ်။ ၂၀၀၀ လောက်တုန်းက ကောင်းတဲ့ Design တစ်ခုဖြစ်ပေမယ့် အခု ၂၀၁၁ မှာတော့ အရမ်းကို နောက်ကျနေပြီ။ knowledge_shelf ကတော့ information တွေကို သေသေချာချာ ကြည့်လို့ရတယ်။ သို့ပေမယ့် အရောင်တွေနဲ့ ရှုပ်ထွေးကုန်တယ်။ ဒီထက် ရိုးရှင်းအောင် ဖန်တီး နိုင်ရင် ပိုကောင်းမယ်။ မလိုအပ်ပဲ အရောင်တွေ သုံးလိုက်တာက စာဖတ်ရာမှာ အနှောင့်အယှက်တွေ ဖြစ်တတ်တယ်။ ရိုးရိုးလေးနဲ့ သဘောကျဖို့ ကောင်းတဲ့ website နောက်တစ်ခုကို ပြောရရင်တော့ http://openpublishapp.com/ ကို ညွှန်းချင်တယ်။ ရိုးတယ်။ ရှင်းတယ်။ ဒါပေမယ့် ဆွဲဆောင် မှု အပြည့်ရှိတာကို တွေ့ရလိမ့်မယ်။

ကျွန်တော် ဟိုးအရင်တုန်းက ပြောဘူးပါတယ်။ Website ကို လှချင်လွန်းလို့ အရောင်တွေ အများကြီးသုံး။ javascript တွေ effect တွေ အများကြီးသုံးထားတာက ဘာနဲ့ တူသလဲဆိုတော့ အရမ်းလှချင်လို့ မိတ်ကပ်တွေ အများကြီးလိမ်း … နှုတ်ခမ်းနီ ရဲရဲဆိုးထားတဲ့ မိန်းကလေးတွေ နဲ့ တူတယ်။ ရိုးရိုးလေးနဲ့ လှအောင် ပြင်တတ်ဖို့လိုတယ်။ site ကို ကြည့်လိုက်ရင် အေးချမ်းသွားပြီး ဆွဲဆောင်မှု ရှိနေဖို့ လိုအပ်တယ်။ အရမ်းလှအောင် နောက်ခံတွေ အရောင်တွေ ထည့်တာမျိုးထပ် အရောင်နုနု လေးမှာ noise လေးတွေ ထည့်ထားတဲ့ texture မျိုး နဲ့ ဆိုရင် အဆင်ပြေပါတယ်။ အဲလိုမျိုး background နဲ့ ဥပမာ ပြရရင်တော့ http://kennymeyers.com/ ကို သဘောကျတယ်။ အရမ်းရှင်းတယ်။ သို့ပေမယ့် information ပြည့်စုံတယ်။

Conclusion

အကုန်လုံးကတော့ ကြိုးစားထားတာ တွေ့ရတယ်။ မြန်မာနိင်ငံက ပြဿနာက အင်တာနက်နှေးနေတဲ့အတွက် တကယ်လှပတဲ့ website တော်တော်များများကို ကြည့်ခွင့်မရဘူး။ ဒါကြောင့် နောက်ပိုင်း ပြောင်းလဲနေတဲ့ web design တွေကို မျက်ခြေမပြတ် မလေ့လာနိုင်တာတွေကြောင့်လည်း ပါတယ်။ အဓိကတော့ website များများ ကြည့်ဖို့ လိုတယ်။ showcase တွေ များများ လိုက်ကြည့်ဖို့ လိုသေးတယ်။ HTML 5 + CSS3 ကို အသုံးချတတ်ဖို့ လိုတယ်။ Typography ကို ကောင်းကောင်း အသုံးချတတ်ဖို့ လိုတယ်။ ကျွန်တော် ရွေးလိုက်တဲ့ ၃ ခုကတော့

၁။ Knowledge Shelf Book Store

information တင်ပြပုံကောင်းတယ်။ သို့ပေမယ့် စာတွေကို ပုံတွေ နဲ့ ထည့်ထားတာနဲ့ background color ကိုတော့ သိပ်သဘောမကျဘူး။ Information မြင်သာအောင် ပြထားတာလေးကို သဘောကျလို့ နံပတ် ၁ ပေးလိုက်တာ။

၂။ shanpyaebo

နည်းပညာပိုင်းမှာ အားကောင်းတယ်။ လိုအပ်နေတာက graphic ပဲ။ Graphic ပိုင်းလေး ကောင်းကောင်း သုံးတတ်ပြီး website တော်တော်များများ ကြည့်ဖူးရင်တော့ ဒီထက်မက အများကြီး ကောင်းသွားလိမ့်မယ်။

၃။ Mobile Network

ရိုးတယ်။ ရှင်းတယ်။ သို့ပေမယ့် information တင်ပြပုံ သဘောမကျဘူး။ အရောင်လေးတွေကတော့ မဆိုးဘူး။ Icon image လေးတွေကို ဒီထက်လှတာလေးတွေ သုံးနိင်ရင် ပိုကောင်းလာနိုင်တယ်။ နောက်ပြီး ခေါင်းစဉ် က အစိမ်းရောင် ဖြစ်နေတာ တစ်မျိုးကြီးဖြစ်နေတယ်။ အခြား ဒီထက် လိုက်ဖက်မယ့် အရောင်လေး ရွေးသင့်တယ်လို့ထင်တယ်။

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

8 Comments

  1. Jia_Li (Knowledge_Shelf) says:

    Thanks for the review .. appreciate that ..
    hope to get more reviews from pros

  2. အခုလိုပြောပြတဲ့အတွက်အများကြီးကျေးဇူးတင်ပါတယ်ဗျာ …
    ကျနော်တို့လို self-study သမားတွေအတွက် အားနည်းချက်၊ လိုအပ်ချက်တွေကို အခုလိုထောက်ပြပေးမယ့်သူရှိတာ တကယ်ဝမ်းသာစရာပါ …

  3. He is cool course he isn’t beginner-level ,yet =P

  4. Your facebook Recent Activities is might not working correctly. ’cause when I click login, to login faceebook it’s nothing happen.It may be not working.I’m not sure ’cause internet connection also poor down here.

    1. saturngod says:

      Hmmm ? it’s working fine for me =(

  5. Hein Zaw Htet says:

    “လက်ရှိ ပြိုင်ပွဲဝင်တဲ့သူတွေထဲမှာ ကိုယ်တိုင် လက်နဲ့ ရေးဆွဲထားတဲ့ ပုံပါတဲ့ site ကိုတော့ မတွေ့ဖြစ်ဘူး။”

    Mobile Network က Mobile ပုံ (http://www.myanmartutorials.com/upload/web_contest/mobile_network/images/frontph.png) နဲ့ Logo (http://www.myanmartutorials.com/upload/web_contest/mobile_network/images/logo.png) ကို ကိုယ်တိုင်ဆွဲထားတာပါ။ ကို ကိုယ်တိုင်ဆွဲထားတာပါ။ Logo က Mobile Network ဆိုတဲ့ စာကိုတော့ Font တစ်ခုရွေးသုံးလိုက်တာပါ။ ကိုသီဟဆီကို Photoshop File နဲ့ပို့ထားပါတယ်။

  6. Hein Zaw Htet says:

    “Image quality တွေက လုံးဝ မကောင်းဘူး။ jpg ထက်စာရင် png ကို ပြောင်းအသုံးပြုသင့်တယ်။”

    ျမန္မာနိုင်ငံအတြက် အဓိကထားဆြဲတာဆိုတော့ PNG သုံးရင် Loading ကြာလိမ့်မယ်။

    1. saturngod says:

      အင်း… ဟုတ်ပါတယ်.. ဒါပေမယ့် png ကို အတတ်နိုင်ဆုံး optimize လုပ်လို့ရပါတယ်။ အချိန်မပေးနိုင်ရင်လည်း photoshop က save for web နဲ့ သိမ်းလည်း အဆင်ပြေပါတယ်။ png ပဲ ဖြစ်ဖြစ် jpg ပဲ ဖြစ်ဖြစ် same quality ဖြစ်ပြီး file size သက်သာတဲ့ဟာ သုံးသင့်တယ်လို့ ထင်တယ်။ နောက်ပြီး png သုံးတဲ့ အခါမှာပဲ ဖြစ်ဖြစ် jpg သုံးတဲ့အခါမှာ ဖြစ်ဖြစ် လိုအပ်တဲ့ size အတိအကျကို resize လုပ်ပြီး သုံးရင် အကောင်းဆုံးပဲ။ ပုံသေးသေးလေးကို အကြီးကြီးချဲ့လိုက်တဲ့အခါ ကြည့်မကောင်းတော့သလို low quality ပုံတွေက ကိုယ်ဆွဲထားတဲ့ design ကို ပျက်စီးသွားစေတတ်တယ်။

      http://www.smashingmagazine.com/2009/07/25/png-optimization-guide-more-clever-techniques/

      မှာ ရေးထားတာလေး တော်တော်ကောင်းပါတယ်။

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.