Design system ဆိုတာဘာလဲ?? နဲ့ သူ့ကိုအသုံးပြုခြင်းရဲ့ Benefitsများ..
Design System က UI Styleguide ထက်ပိုကျယ်ပြန့်ပါတယ်..ပိုကောင်းပြီး သေချာအချိန်ပေးရပါတယ်။ Designအပိုင်းရော.. Developmentအပိုင်းနဲ့ပါတ်သက်တာတွေရော. အကုန်အစုံ ပါပါတယ်။
ပြီးခဲ့တဲ့အပါတ်က “UI Style Guide ဆိုတာဘာလဲ?? ဘယ်နေရာတွေမှာသုံးတာလဲ??” ရေးခဲ့ပြီး နောက်ရေးမယ့် articleက “What’s the difference betweent UI Style Guide & Design System” ဖြစ်တယ်လို့ပြောခဲ့ပါတယ် ..ဒါပေမယ့် Design System က ဘာလဲဆိုတာအရင်သိထားမှ သူတို့ရဲ့ ကွဲပြားပုံကို ပြောပြရင်ပိုမြင်မယ် ၊ ပိုအဆင်ပြေမယ်ဆိုတာ..တွေးမိလို့ “Design System”ကို အရင်ရေးလိုက်ပါတယ်။ တကယ်တော့ UI Style Guide ဆိုတာ Design System ထဲမှာပါတဲ့ အခွဲလေးတခုလို့ပြောလို့ရပါတယ်။ Design systemမရှိလို့သေးလို့ Designer တွေနဲ့ Front-End Developerတွေအတွက် collaboration လုပ်လို့အဆင်ပြေအောင်လုပ်ထားတဲ့ အသေးစား file/ပုံလေး တစ်ခုလို့ ပြောလို့ရပါတယ်။
Design System ကတော့ UI Styleguide ထက်ပိုကျယ်ပြန့်ပါတယ်..ပိုကောင်းပြီး သေချာအချိန်ပေးရပါတယ်။ (UI Style Guide အကြောင်းဖတ်ရန်)Designအပိုင်းရော.. Developmentအပိုင်းနဲ့ပါတ်သက်တာတွေရော. အကုန်အစုံ ပါပါတယ်။ အသေးစိတ်ကို အောက်မှာ သေချာရှင်းပါထားပါတယ်။
What’s a Design System?
Design System ဆိုတာ productနဲ့ပါတ်သတ်တဲ့ Design standard တွေ , Style Guide တွေ, ပြန်လည်အသုံးပြုနိုင်တဲ့ code အစိတ်အပိုင်းတွေ(Reusable Code)တွေကို တနေရာတည်းမှာ စုစည်းဖော်ပြပေးထားတာဖြစ်ပါတယ် ။
Products Team(Developer, Designer, Product Manager) တွေအချင်းချင်း collaborate/communicate လုပ်တဲ့နေရာမှာအသုံးပြုတဲ့ common language တခုလည်းဖြစ်ပါတယ်။
Design နဲ့ Development (2)ခုလုံးအတွက် rules တွေ standardေတွ သတ်မှတ်ပေးထားတဲ့ စနစ်ဆိုလည်းမမှားပါဘူး ။ သူမှာ Platformsမျိုးစုံ (Ios, Android, Website) consistency ဖြစ်ဖို့အတွက် Rulesတွေ အပြည့်အစုံနဲ့ documentation တွေ သေချာဖော်ပြထားတွေ ပါပါတယ် ။
Design Systemက တစ်ခုနဲ့တခု မတူကြပါဘူး။ ဘာတွေပါရမယ်လို့ အသေသတ်မှတ်ထားတာမရှိပါဘူး။
Design System မှာ အများသောအားဖြင့်တော့
1. Style & Design Guidelines
2. Pattern library (or) Components library
တွေပါပါတယ်။
ကိုယ့် Workflow အလိုက် အဆင်ပြေသလို တည်ဆောက်သွားလို့ရပါတယ်။
Style & Design Guidelines (or UI Style Guide)
Style & Design Guidelines (or UI Style Guide) က သူဘာသာဆိုရင်တော့ code မပါတဲ့ UI Components ပုံအချပ်ကြီးပေမယ့် Design System ထဲမှာပါတဲ့ UI Style Guide ကတော့ UI Components တွေကို code တွေနဲ့သေချာဖော်ပြပေးထားတာပါပါတယ်။
UI Componentsတွေမှာ Style Guide မှာ Grids, Color, Icon,Typography , Brand, Padding, Margin, Layout, Illustrations နဲ့ အခြား အစရှိတာတွေ ပါပါတယ်။
ဥပမာ ..ဒီ CTA ဆို ဒီ code Snippet သုံးဆိုတာမျိုးကို ဖော်ပြပေးထားပါတယ်။ Bootstrap ကဖော်ပြပေးသလိုမျိုးပါပဲ။ တခုပဲကွာပါတယ်။ Bootstrap က open-source ဆိုတော့ အများက(Public)သုံးလို့ရတယ်၊ မြင်ရတယ် ။ ကျနော်တို့ Design system ကတော့ private ဖြစ်ပြီး ရုံးတွင်းပဲ အသုံးပြုရမှာဖြစ်ပါတယ်။
Pattern Library (or) Components Library
Pattern Library (or) Components Library ထဲမှာ Websiteတခုမှာ ထပ်ခါတလဲလဲ ပြန်ပြီးအသုံးပြုနေရတဲ့ အရာ(Common Block, Cards)တွေကို code snippet တွေနဲ့ အတူဖော်ပြထားတာပါပါတယ်။ UI Component လေးတွေကိုစုပြီး pattern တခုရလာတဲ့သဘောပါ။
Pattern Library or Components Library တွေမှာ Menu ,Naviagtion , Tooltips, Alart Dialogs, Breadcrumb, Common Actons, Empty States, Form and Form Elements , Search, Filering, Slider, Hero Banner, Listing, Image ,နဲ့ အခြား အစရှိတာတွေ ပါပါတယ်။
Design System ကို ဘယ်နေရာတွေမှာသုံးတာလဲ??
Design Systemကို companyကြီးတွေမှာအသုံးများပါတယ်။ Team(Developer, Designer, Product Manager)တခုနဲ့တခုကြားဆက်သွယ်လို့ရအောင်,အချိန်မကုန်အောင်, ပြီးတော့ Productတခုနဲ့တခု consistency ရှိအောင် အဓိကသုံးတာဖြစ်ပါတယ်။ (projectတခုတည်းကို Teamတွေ လူတွေခွဲပြီးလုပ်နေတဲ့ သူတွေပိုသုံးလေ့ရှိကြပါတယ်။)
Design System ကိုအသုံးပြုခြင်းရဲ့အကျိုးကျေးဇူးများ
သူ့ကိုသုံးရင် ရတဲ့ benefits တွေကတော့ အများကြီးပါ။ အဲ့ဒီထဲကမှ အများမြင်သာတဲ့အချက်လေးတွေကိုဖော်ပြပေးလိုက်ပါတယ်။
- Code တွေကိုခဏခဏပြန်ရေးစရာမလိုတဲ့အတွက် အချိန်ကုန်အရမ်းသက်သာပါတယ်။
- Design, Product Brand တွေကိုသာမက Codeတွေကိုပါ consistencyရှိစေပါတယ်
- Design Consistancy ရှိတဲ့အတွက် User Exprience ပိုကောင်းပါတယ်
- Projectတခုတည်းကိုပဲ Teamတစ်ခုနဲ့တစ်ခုအလုပ်လုပ်တဲ့အခါ Design system ရှိခြင်းအားဖြင့် ပိုကောင်းတဲ့ workflowနဲ့ collaboration လုပ်နိုင်ပါတယ်
- အသစ်၀င်တဲ့ Team members တွေကိုလည်း Design systemကိုလေ့လာစေခြင်းအားဖြင့် productရဲ့ Standardတွေ rulesတွေကိုသိစေပြီး code ကို consistencyဖြစ်ေအာင် ရေးပြီး ဆက်လက်ထိန်းသိမ်းနိုင် ပါတယ်။ ( Design systemမရှိရင် — Button တခုတည်းကိုပဲ ပထမ developers က class/id တခုရေး နောက်တယောက်ကတခုရေးနဲ့ code တွေက ဖြစ်ချင်သလိုတွေဖြစ်တတ်ပါတယ်)
How to create a Design System?
Design Systemကို Developer တွေကိုယ်တိုင် create လုပ်နိုင်သလို (အချိန်ပေးရပါတယ်).. ၊ သူများ Open Source တွေဆီကနေ(Bootstrap, Foundation, Google Material Design) ယူသုံးလို့လည်းရပါတယ်။ (Companyအကြီးကြီးတွေကလွဲရင်တော်တာ်များများကတော့ ရှိပြီးသား Open Source Design systemတွေကိုသုံးကြတာများပါတယ်။)
အခုမှ Design systemကိုစလုပ်ကြည့်မယ်ဆိုရင်တော့ Bootstrapကိုအရင် Try ကြည့်ပါလို့ အကြံပေးချင်ပါတယ်။ သူက အခြား Design System တွေထက်နားလည်ရပိုလွယ်တယ်လို့ ကျနော်မြင်ပါတယ်။ ပြီးမှ တကယ် Master Design System (Lightning Design System, Carbon Design System, Fluent Design System) တွေကိုသွားကြည့်ပေါ့လေ။
My Final Thoughts
ကျနော့အမြင်အရဆိုရင်လည်း Digital Product Company တခုအနေနဲ့ Design System ရှိသင့်ပါတယ် ။ company ကြီးကြီးသေးသေးပေါ့လေ။ ဒါပေမယ် foreign company တွေတောင်မှ အခုထိ Design System မရှိကြတဲ့ companyတွေအများကြီးရှိသေးပါတယ်။ နောက်နှစ်အတွင်းတွေမှာ ဒါတွေကို companyတိုင်းလိုလို လုပ်ဖြစ်လိမ့်မယ်လို့တော့ ပြောထားတာတွေတွေ့ရပါတယ်။ တကယ်ကောင်းတဲ့ solution မို့ အချိန်တန်ရင်တော့ value သိပြီး Create လုပ်လာကြမှာပါ။ ကျနော်တို့ဆီမှာလည်း Design System ရှိတဲ့ companyတချို့ကိုေတွ့လာရပါပြီ။ တချို့က Documentations websiteလိုမျိုး သေချာကျကျနန ၊ တချို့က PDF နဲ့ တချို့က MS fileတွေပုံစံမျိုးတွေပါ။ ဘာပဲဖြစ်ဖြစ် လုံး၀မရှိတာထက်စာရင် ကောင်းပါတယ်။
အဓိကအကျဆုံးကတော့ Design System ကိုအမြဲတမ်း updateဖြစ်အောင် maintain လုပ်နေဖို့ပါပဲ။
နာမည်ကြီးတဲ့ Design Systemတွေကိုလည်းလေ့လာနိုင်အောင် အောက်မှာဖော်ပြပေးလိုက်ပါတယ်။
- Lightning Design System
- Carbon Design System
- Material Design System
- Fluent Design System
- Polaris Design System
ကျနော် Article တွေကို အမြဲတမ်း ကိုယ့်အတွေအကြုံအပေါ် အခြေခံပြီးရေးပါတယ် ဒါပေမယ် မရေးခင်အမြဲတမ်း research လုပ်ပါတယ် .. misleading information မပေးချင်လို့ပါ.. ကျနော် research လုပ်ပြီး ရှာတွေတာတွေကိုလည်း reference ယူရတာတွေလည်းရှိပါတယ် .. အောက်မှာ reference ယူထားတဲ့လင့်တွေကိုလည်း ဖတ်ကြည့်လို့ရအောင်ဖော်ပြပေးလိုက်ပါတယ်..
https://www.invisionapp.com/inside-design/guide-to-design-systems/
https://medium.com/rangle-io/what-is-a-design-system-7a3d63edfcf7
https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969
https://www.uxpin.com/studio/blog/future-design-systems/
https://www.futurelearn.com/info/blog/maintaining-organising-pattern-library
https://www.youtube.com/watch?v=wc5krC28ynQ&list=WL&index=6&t=0s
https://www.youtube.com/watch?v=3TpiNrZlzt4&list=WL&index=4
https://boagworld.com/design/pattern-library/
https://trydesignlab.com/blog/pattern-libraries-what-they-are-and-why-you-need-o/
https://dev.to/graphqleditor/what-s-design-system-and-why-you-need-one-31fh
https://medium.muz.li/what-is-a-design-system-1e43d19e7696
Article လေးကတော့ ဒီမှာပြီးပါပြီ။
မရှင်းတာရှိရင်လည်း comment ပေးခဲ့လို့ရပြီး နောက်တောင်းဆိုချင်တဲ့ Articleအကြောင်းအရာများရှိရင်လည်း ဒီ form လေးမှာမေးခဲ့လို့ရပါတယ်။ ကျနော်လည်းလေ့လာသင်ယူဆဲမို့ ကျန်ခဲ့တာ၊ အမှားပါရင်ရှိရင် ထောက်ပြပေးပါ။
ဒါဆို နောက်တပါတ် ကျနော့ Medium က Article လေးမှာ ပြန်တွေ့ကြပါမယ်။ အားလုံးပဲ ကျန်းမာပျော်ရွင်ကြပါစေ။
My Previous Article
