เมื่อไม่กี่ปีที่ผ่านมา Design System กลายเป็นคำที่คุ้นหูกันในหมู่ UI Designer องค์กรต่างๆ เริ่มให้ความสำคัญกับการวางผัง Design System ของตัวเองให้เป็นระบบ เพื่อรองรับการขยายตัวของทีมและผลิตภัณฑ์
ในบทความนี้จะพูดถึงประสบการณ์การออกแบบ ทั้งก่อนและหลังมี Design System รวมไปถึงการประยุกต์ใช้ในพัฒนาผลิตภัณฑ์ต่างๆ
ก่อนจะมี Design Systems
Designer แต่ละคนมี Preference ในการออกแบบที่ต่างกัน ซึ่งทำให้การออกแบบ UI Component ในบางครั้ง มีหน้าตาแตกต่างกันออกไป ซึ่งนอกจากจะทำให้เสียเวลาที่ต้องมานั่งเก็บงานให้ Consistent กันแล้ว ยังส่งผลกระทบต่อ Developer ตอนพัฒนาอีกด้วย
“หากมองในแง่ UX นั้น คนในทีมพัฒนาก็ไม่ต่างจาก User การมี Design System จะช่วย Align ทีมและเพิ่มประสิทธิภาพการ Communicate ต่างๆ ให้ง่ายขึ้น”
การมี Design System นอกจากคนในทีมจะได้ประโยชน์แล้ว ยังช่วยให้ประสบการณ์ของ User ที่เข้ามาใช้บริการผ่าน Device ต่างๆ สอดคล้องกัน ภายใต้ Branding เดียวกันอีกด้วย
สร้าง Design System
Design System นั้น สามารถทำได้ทั้งก่อนและหลังพัฒนาผลิตภัณฑ์ แต่สิ่งที่เหมือนกันในแง่ของ Documentation คือการเริ่มจาก Core Style ของผลิตภัณฑ์ก่อน
Core Styles คืออะไร
Core Styles คือสิ่งที่ทำให้ UI ของแต่ละ Website(ในโลก) ต่างกัน ซึ่งหลักๆ ประกอบด้วย
- Color — สี
- Typography — ฟอนต์
- Visual — ภาพและกราฟิก
- Interaction — การตอบสนอง
- Microcopy and Tone of voice — ภาษาและการสื่อสาร
Color — สี
สามารถ Document ทั้ง 2 แบบ
- Perceptual Color — สีที่ใช้ใน Branding หรือ Styling
- Functional Color — สีที่ใช้ใน Validation ต่างๆ
ซึ่งไม่ว่าสีนั้นจะมาในรูปแบบของ Fill, Stroke, Gradient หรือ Shadow ก็ควรจะ Document ให้ละเอียด
Typography — รูปแบบของฟอนต์
- Typeface อะไรบ้างที่ใช้ใน UI (ทั้งภาษาที่หนึ่งและสอง)
- ใช้ทั้งหมดกี่ Scale (ขนาด)
- ประกอบด้วยสไตล์อะไรบ้าง เช่น Align-left, Align-center หรือ Align-right ความหน้าหรือรูปแบบของตัวอักษร สีของตัวอักษรที่ใช้ทั้งบน Background อ่อนและเข้ม เป็นต้น
แนะนำให้ใช้ Scale ตาม Material Design หรือหากต้องการ Customized เอง แนะนำให้ลองใช้ Typescale หรือ Archetypeapp เป็นตัวช่วย
Visual — ภาพ กราฟิก และวีดีโอ
- Icons
- Images
- Graphic, Motion Graphic or Video Asset s
Reference ของ Mood and Tone เป็นสิ่งจำเป็นในการช่วยให้ทีมออกแบบเห็นภาพเดียวกัน ปัจจุบันมีเว็บไซต์รวม Inspiration อยู่หลากหลายมาก เช่น Dribbble Behance หรือ Awwwards เป็นต้น
ส่วน Icon ส่วนตัวนิยมใช้ Material Icon Library จากใน Sketchappsources เพราะฟรีและง่ายต่อ Developer ในการนำไปพัฒนาต่อ
Interaction — การตอบสนอง
Interaction อย่างง่าย ที่เราสามารถ Document ได้คือ State ต่างๆ ของ UI Component เช่น Normal :: Hover :: Focus :: Disable
ส่วนตัวชอบ Document เป็น Table ให้ Developer เห็น State ต่างๆ ได้ชัดเจน หากมี Interaction ที่ซับซ้อน Designer ควรหา Reference หรือทำ High Fidelity Prototype เพื่อช่วยให้สื่อสารงานออกแบบชัดเจนขึ้น
Microcopy and Tone of voice — ภาษาและการสื่อสาร
Microcopy คือถ้อยคำที่ Brand ของเราสื่อสารกับลูกค้า UX writing ที่ดีควรมี 3 สิ่งนี้
- Clear ชัดเจน — ลดการใช้ภาษาหรือคำศัพท์ที่เข้าใจยาก
- Concise กระชับ — ตรงประเด็นในบริบทที่กำลังพูดถึง
- Useful มีประโยชน์ — คำหรือ Call to Action ต้องนำทางให้ผู้ใช้
แนะนำให้ทำกับทีม Content หรือ UX writer ในการช่วยคิดถ้อยคำต่างๆ แล้วทดสอบกับ User หากไม่มีเวลา Test แนะนำให้ลองสะกิดคนในทีม(ที่มีส่วนร่วมกับ Project นั้นน้อยที่สุด) อ่านดูก็ได้
เริ่มสร้าง UI Component
การสร้าง UI Component ควรออกแบบโดยอิงจาก Core Style เสมอ
จากภาพจะเห็นได้ว่า UI Component นี้ ประกอบไปด้วย Color Overlay 2 ชั้น Typography 3 แบบ Visual+Icon 3 อัน และมี UI Component ย่อยอีก 2 อัน(Status Tag และ Category Tag)
ซึ่งเมื่อออกแบบได้ UI Component นี้แล้ว ก็จะสามารถ Duplicate ไปใช้ซ้ำได้อีก อย่างในกรณีนี้จะถูกนำไปใช้กับผลิตภัณฑ์จำพวก Workshop ซึ่งหมายความว่าหากมีผลิตภัณฑ์ตัวไหนที่เป็น Workshop จะต้องใช้ UI Component นี้เท่านั้น
Design System ประยุกต์ใช้ยังไงได้อีก
หลังจากที่เราสร้าง Design System แล้ว สิ่งนึงที่ช่วยให้เราทำการออกแบบได้เร็วขึ้นคือการ Fork แยกไปใช้กับ Project อื่นๆ ที่มีลักษณะ UI Component ที่คล้ายกัน แล้วหากมีการออกแบบอะไรที่เพิ่มเติม ควรหมั่นกลับเข้ามา Update Design System อยู่เสมอ
การใช้ Design System กับงาน Illustration เว็บไซต์อย่าง Humaaans ทำให้เราเห็นว่า Design System สามารถแยกไปใช้ทำ Illutration ได้ง่ายเสมือน Illustration Generator เพียง Visual Designer หั่น Asset แยกส่วนไว้ให้เป็นระบบก็จะสามารถนำมาเรียกใช้ได้อย่างเป็นระบบเหมือนกัน
Skooldio เองก็ประยุกต์ใช้ Design System ในการลด Load งานฝั่ง Content Marketing โดยทำ Template ไว้ให้ทีม BD/Content ผ่าน Google Slide เลย เพื่อแก้ปัญหาการใช้ OS ที่ต่างกันระหว่าง Designer ที่ใช้ macOS กับ BD/Content ที่ใช้ Window
ส่งท้าย
ในช่วงแรกๆ อาจจะเป็นการยากที่ให้ทุกคนพยายามหันมาใช้ Design System กันอย่างจริงจัง สิ่งที่ทำได้ง่ายที่สุดคือการทำ Design Review ว่ามี UI Component ไหนเกิดขึ้นมาบ้าง Component เหล่านั้นทำงานยังไง ใช้ Component เดิมที่มีอยู่แล้วได้หรือเปล่า เพราะทุกครั้งที่เรา Design Component อะไรใหม่ขึ้นมา เท่ากับ Developer ต้องเพิ่มงานในการปั้น Component นั้นขึ้นมาด้วย
แล้วหาก Designer คนไหนรู้สึกว่า Design System เป็นตัวจำกัดความคิดสร้างสรรค์ขอฝากส่งท้ายไว้ว่า
“Design System ไม่ได้เป็นตัวลด Creativity ในการออกแบบ แต่ Design System นั้นช่วยเพิ่ม Productivity ทำให้งานเสร็จเร็วขึ้น แล้วมีเวลาไปใช้ Creativity กับสิ่งอื่นที่สำคัญไม่แพ้กันเช่น UX, Visual หรือ Motion“
หากใครสนใจสร้าง Design System ด้วย Sketch
ดูรายละเอียด UI Design with Figma ได้ตาม link
