Design System ระบบการออกแบบที่ดีเป็นอย่างไร ทำไมต้องออกแบบ Design system?

ก่อนที่เราจะทำการออกแบบอะไรก็ตาม เราควรจะต้องวางโครงสร้างให้กับสิ่งนั้น ๆ ก่อน ถ้าเราไม่ได้ทำการวางโครงสร้างก่อนออกแบบ อาจทำให้เกิดปัญหาตามมาภายหลังได้ ซึ่งในปัจจุบัน บริษัทยักษ์ใหญ่ระดับโลกหลายบริษัท ไม่ว่าจะเป็น IBM , Google , Microsoft , Apple ล้วนที่จะให้ความสำคัญกับ Design System ระบบการออกแบบที่ดี เพื่อที่จะรองรับการพัฒนาในอนาคตต่อไป แต่อย่างไรก็ตาม Design System ไม่ได้มีความสำคัญแค่กับเพียงองค์กรใหญ่ ๆ เท่านั้น เพราะกับองค์กรขนาดเล็กถึงกลาง ก็มีความสำคัญไม่แพ้กัน

การ Design System จะคอยเข้ามาช่วยในส่วนของการทำงานร่วมกันระหว่าง Designer และ Developer หรืออาจจะเป็นในส่วนของ Designer ด้วยกันเองก็ได้ โดยการสร้างมาตรฐานการออกแบบขึ้นมา ให้อยู่ในระบบระเบียบส่วนกลางเดียวกัน ซึ่งจะส่งออกมาให้งานออกมาถูกต้องตรงกัน และจะสามารถใช้งานร่วมกันได้กับทั้งองค์กร ส่งผลให้มีประสิทธิภาพในการทำงานของทีมรวดเร็วขึ้น

‍ระบบการออกแบบ Design System คืออะไร?

Design System หรือเรียกง่าย ๆ อีกอย่างก็คือ ระบบการออกแบบ จะเป็นตัวที่เข้ามาช่วยในการพัฒนา และแก้ไขปัญหาในเรื่องการเติบโตของ Product และช่วยรองรับการขยายของทีม และบริษัท นอกจากนี้ยังช่วยควบคุมให้มีความสม่ำเสมอในการออกแบบ ซึ่งในปัจจุบัน บริษัทหรือองค์กรใหญ่ ๆ ล้วนจะให้ความสำคัญกับ Design System ระบบการออกแบบที่ดี เพื่อรองรับการพัฒนาขององค์กรของตนเอง

Design System เป็นสิ่งที่ Designer และ Developer ใช้อ้างอิงในการพัฒนา Product ร่วมกัน เป็นสิ่งที่จะสามารถช่วยให้ทีมสื่อสารได้ตรงกัน และทำให้ทำงานร่วมกันได้อย่างมีระบบระเบียบ 

โดยมีตัวนำทางสำหรับวางโครงร่างหน้าตาของเว็บไซต์ ให้ออกมาเป็นทิศทางเดียวกันเพื่อให้สอดคล้อง Branding ขององค์กรตัวเอง ไม่ว่าจะเป็นในส่วนของ ตัวอักษร , สี , icon , ปุ่ม , ฟอร์ม และอีกหลาย ๆ อย่าง นอกจากนี้ Design Systemยังช่วยเพิ่มประสิทธิภาพในการทำงานให้กระบวนการพัฒนาสอดคล้องกัน และสะดวกมากขึ้น ง่ายขึ้น แค่ปรับ ทำให้ Designer หลายๆ คน ทำงานร่วมกันได้อย่างสอดคล้อง และในฝั่งของ Developer ก็ไม่ต้องมาเสียเวลา คาดการณ์หรือแก้ไขความผิดพลาดของ Design อีกด้วย ซึ่งช่วยให้ประหยัดเวลาได้เป็นอย่างมาก

‍คุณสมบัติ/ จุดเด่นของ Design system ระบบการออกแบบที่ดีเป็นอย่างไร?

Design System ระบบการออกแบบที่ดี ควรจะมีคุณสมบัติ และจุดเด่นต่าง ๆ ดังนี้

1. ต้องเป็นสิ่งที่สามารถใช้งานได้จริง และมีการแก้ไข ปรับปรุงอยู่ตลอดเวลา ไม่ควรเป็นสิ่งที่ทำแค่เพียงครั้งเดียวแล้วเสร็จ เพราะเทคโนโลยีนั้นมีการเปลี่ยนแปลงอยู่ตลอดเวลา ควรจะเปลี่ยนตามให้ทันอยู่ตลอด

2. เป็นโมดูลรวมกันไว้ในที่เดียว เพื่อที่จะให้ Designer และ Developer สามารถเข้าไปหยิบมาใช้งานได้จริง

3. ต้องมีส่วนประกอบของทั้ง 4 สิ่งนี้ ได้แก่ Style Guides, Patterns, Specs, Documentation ซึ่งในส่วนของ Style Guides ไม่ได้มีแค่เฉพาะสี หรือวิธีการใช้งานฟอนต์แค่เท่านั้น แต่ยังรวมไปถึงการเขียนบทความ แนวทางการนำเสนอ นอกจากนี้ยังมี Libraries ของ Patterns และ components ส่วนต่างๆ 

Specs ซึ่งไม่ใช่แค่แนวทางการออกแบบสำหรับดีไซน์เนอร์ แต่ยังมีเรื่องอื่น ๆ ของการทำแอนิเมชั่น การเคลื่อนไหว สัดส่วนต่างๆอีกด้วย เช่น ความสูง ความกว้าง รวมไปถึงส่วนประกอบอื่น ๆ ที่เป็นประโยชน์สำหรับ Developer ด้วยครับ 

‍การสร้าง Design system ควรคำนึงถึงอะไรบ้าง?

หลักการสร้าง Design System ที่ดี ควรจะต้องคำนึงถึงปัจจัยต่าง ๆ ดังนี้

‍Design Principle

Design Principle คือหลักการของการออกแบบ ซึ่งถ้ามีการวางองค์ประกอบที่ดี จะสามารถทำให้ทีมพัฒนา รวมไปถึงทีมออกแบบ เข้าใจแนวทางขององค์กรว่ากำลังไปในทิศทางไหน Design Principle ที่ดีควรคำนึงถึง 4 สิ่งดังนี้

- Purpose ทำเพื่ออะไร ทำเพื่อใคร ในระยะยยาว

- Shared Themes ออกแบบให้มีความสอดคล้อง และเป็นไปในทิศทางเดียวกัน

- Focus Your Audience ต้องให้ความสำคัญกับผู้ใช้งาน

- Test and Evolve Your Principle ทำการทดสอบ และพัฒนาอย่างสม่ำเสมอ

‍Pattern

Pattern หรือ Design Pattern ในจุดนี้จะหมายถึง Design Asset ที่สามารถนำมา Reuse และ Repurpose ได้

‍Reuse เป็นการนำ UI Component หรือ User Flows มาใช้ซ้ำๆ

Repurpose เป็นการนำ UI Component เดิม มาประยุกต์ใช้ให้เกิดเป็น Solution หรือฟีเจอร์ใหม่ๆ นอกจากนี้ Design Pattern ยังแบ่งได้เป็น 2 ประเภทใหญ่คือ

1. Functional Pattern

คือ รูปแบบการใช้ Digital Product ซึ่ง Functional Pattern ส่วนใหญ่จะมีรูปแบบที่คล้ายๆ กัน ตาม Guidelines ของแต่ละ OS (Operating System) ในฝั่ง iOS ก็จะมี Human Interface Guidelines ส่วนฝั่ง Android ก็จะมี Material Design

2. Perceptual Pattern

คือ รูปแบบของประสบการณ์ที่ผู้ใช้ได้รับจากการใช้สินค้าของเรา ไม่ว่าจะเป็น ฟอนต์ เสียง สี หรือกราฟิกต่างๆ ที่อยู่ในผลิตภัณฑ์ นอกจากนี้ยังช่วยส่งต่อภาพลักษณ์ของแบรนด์ได้ด้วย

Shared Language

เป็นการกำหนดนิยาม หรือชื่อเรียก ซึ่งเป็นสิ่งที่สำคัญมากอย่างหนึ่ง ควรให้ทีม หรือทุกคนที่เกี่ยวข้อง เข้ามามีบทบาทในการช่วยสร้าง Design System 

การสร้าง Shared Language คล้ายกับการกำหนดภาษาที่เอาไว้สื่อสารภายในองค์กร เพื่อไม่ให้เกิดการนำไปใช้ผิดๆ หรือเอา UI Component ไปใช้ในนอกเหนือขอบเขตที่กำหนด

‍องค์ประกอบหลักของ Design system ที่ดี

ในส่วนนี้เราจะมาพูดถึง Design System ระบบการออกแบบที่ดี ควรจะมีองค์ประกอบต่าง ๆ ดังนี้

‍1. สี (Colour)

สีเป็นองค์ประกอบเบื้องต้นในการทำ Design System ที่ไม่พูดถึงไม่ได้ โดยจะแบ่งเป็น สีหลัก สีรอง และกำหนดวิธีการใช้สีต่าง ๆ ไม่ว่าจะเป็นน้ำหนักการใช้สีในหนึ่งหน้า หรือสีของปุ่มต่าง ๆ และอื่น ๆ 

ยกตัวอย่างเช่น ดีไซน์เว็บไซต์โดยการเพิ่มระดับสีที่ใช้จากเดิมอีกหลายระดับ เพื่อให้การทำงานมีความง่ายยิ่งขึ้น ซึ่งหากเราใช้สีแค่สีหลักสีเดียวเท่านั้น อาจจะส่งผลให้งานไม่สามารถอธิบายความหมายของแอคชั่นต่าง ๆ ด้วยสีได้ เพราะเนื่องจากการทำงานของเราควรใช้สีในการเป็นตัวชี้นำให้ User เข้าใจกับสิ่งที่ปรากฏอยู่ตรงหน้าให้ออกมาได้ง่ายที่สุด นอกจากนี้ยังช่วยเพิ่มมิติให้งานของเราเพิ่มจากเดิม ทำให้งานเรามีสีสัน ดูมีชีวิตชีวามากยิ่งขึ้น

2. ฟอนต์ (Font)

เราคงรู้กันอยู่แล้วว่าแบรนด์ดัง ๆ แต่ละแบรนด์จะมีฟอนต์ที่บ่งบอกถึงความเป็นเอกลักษณ์ประจำแบรนด์ตัวเอง การทำ Design System ก็เช่นกัน เราจะมีการกำหนดฟอนต์ ว่าต้องการจะใช้ฟอนต์อะไร ขนาดเท่าไหร่ เป็นต้น

ยกตัวอย่างเช่น เราอยากให้เว็บไซต์ของเรามีฟอนต์ 2 รูปแบบ ซึ่งแต่ละแบบมีขนาด และน้ำหนักที่ต่างกัน แต่ก่อนหน้านั้นเราต้องมาทำการออกแบบว่า เราจะต้องวางตำแหน่งตรงไหนให้หน้าตาเว็บไซต์มีความสมดุล จึงจะทำการกำหนดขนาดต่าง ๆ ของฟอนนต์ที่เราต้องใช้ รวมไปถึง Line Height สำหรับฟ้อนต์ใน Size ต่าง ๆ

‍3. กริด (Grid)

Grid จะเป็นตัวช่วยให้การทำงานมีความง่ายขึ้น เราจะสามารถเห็นภาพเป็นภาพเดียวกันได้ดีขึ้น ทำให้ตัดสินใจได้ง่ายมากขึ้น แต่ในช่วงแรก ๆ อาจจะต้องมีการปรับจูนให้เข้าใจตรงกันทุกคน เนื่องจากต้องดูงานที่เราเคยทำกันมาว่าสามารถปรับใช้ได้หรือไม่ และงานใหม่ที่เรากำลังทำอยู่ ว่าจะได้รับผลกระทบใด ๆ หรือไม่

‍4. Artwork & Icon

นอกจาก Artwork & Icon จะเป็นส่วนหนึ่งในการพัฒนาแพลตฟอร์มแล้ว เมื่อเราทำการสื่อสารกับผู้ใช้งาน และบุคคลอื่น ๆ จะสามารถทำให้การสื่อสารเป็นไปในทิศทางเดียวกันได้ ซึ่งในปัจจุบัน Designer กำลังปรับ Style ของ Artwork ให้เข้ากับตลาดปัจจุบันมากขึ้น มีการเริ่มทยอยปรับ จากงานที่ผ่านมา และทำให้ขนานไปกับงานใหม่ ๆ

ทั้ง 4 องค์ประกอบนี้เป็นเพียงแค่ส่วนหนึ่งในการทำ Design System เพราะ Designer ยังคงต้องปรับ และยังต้องประสานงานกับ Developer อยู่เรื่อย ๆ เพราะ ไม่ใช่แค่ทีม Designer เท่านั้นที่จะต้องใช้ System Design ยังมีอีกหลาย ๆ แผนกที่ต้องนำสิ่งนี้ไปใช้อย่างจริงจัง และถูกต้องถามวิธีที่ได้กำหนดไว้

‍ทำไมจึงต้องมีระบบการออกแบบ Design system?

การทำ Design System ระบบการออกแบบที่ดี สามารถช่วยอะไรเราได้บ้าง ทำไมเราถึงควรจะทำ ซึ่ง Design System สามารถช่วยเราได้ดังนี้

‍1. ต้องสร้างความสม่ำเสมอในการออกแบบ

การทำงานของ Developer และ Designer จะต้องมีการพูดคุย และอัพเดทการทำงานร่วมกันภายในทีมอยู่ตลอด โดยเฉพาะตัว Designer ที่ต้องพูดคุย และคอยแชร์ส่วนต่างๆ ของโปรเจคให้การทำงานให้ทุกคนได้ทราบในทุก ๆ วัน เพื่อการทำงานทที่มีประสิทธิภาพ และไม่ให้หลุดออกจากแผนที่ได้วางไว้

‍2. เพื่อทำให้มัศักยภาพในการขยายตัว

เมื่อมีโครงสร้างการออกแบบที่ทำให้ทุกคนสามารถเข้าถึงได้อย่างงายดายแล้ว ก็จะส่งผลให้การทำงานราบรื่นมากขึ้น และโดยเฉพาะกับเด็กใหม่ที่เพิ่งจะเริ่มเข้ามาทำงานในองค์กรก็ที่จะสามารถเปิดตัว Design System เพื่อเรียนรู้องค์กรของตัวเอง และช่วยสานต่องานได้อย่างง่ายดาย รวดเร็ว เริ่มงานได้ไว ก็สามารถทำงานไว ไม่ต้องเปลืองเวลาในการเรียนรู้ที่นานจนเกินไป นอกจากนี้ถ้าองค์กรไหนที่มีหลาย ๆ ทีม ทีมอื่นภายในองค์กรก็สามารถที่จะเข้ามาหยิบจับ Design System ของเราไปใช้งานได้ จะทำให้ภาพลักษณ์ที่เราต้องการนำเสนอออกมาได้อย่างสวยงาม มีความถูกต้อง

‍3. เพื่อให้ทีมใช้คำศัพท์ และภาษาในการทำงานเหมือนกัน

หลาย ๆ คนอาจจะเคยเจอปัญหาที่ว่า ทีม Developer และ ทีม Designer จะเรียกส่วนต่าง ๆไม่ค่อยจะเหมือนกัน หรือพูดกันคนละภาษา เพราะแบบนั้น การมี Design System จะเป็นเหมือนสื่อกลาง ที่จะทำหย้าที่คอยช่วยเชื่อมให้ทั้งสองฝ่ายใช้ภาษาเดียวกันในการทำงาน ซึ่งจะช่วยให้การทำงานมีความราบรื่นมากขึ้น 

นอกจากนี้เรายังสามารถนำ Design system ไปใช้กับทีมนักเขียน ทีมคนเขียนบทความและอื่นๆได้อีกมากมายอีกด้วย ไม่ใช่แค่ใช้ได้เฉพาะกับทีม Designer เท่านั้น

‍ประโยชน์ของการมีระบบการออกแบบที่ดี Design system ในองค์กร/ ธุรกิจ

การทำ Design System ระบบการออกแบบที่ดี จะมีประโยชน์กับธุรกิจ หรือองค์กรของคุณดังนี้

1. ช่วยให้ประหยัดเวลาในการออกแบบ เนื่องจากไม่ต้องสร้าง Components ใหม่ทุกครั้ง เพราะสามารถดึงจาก Library ออกมาใช้งานได้ทันที

2. ทีม Designer สามารถแยกกันทำงานได้โดยใช้ Library เดียวกัน และปลายทางงานจะออกมาคล้ายคลึงกันไม่มีใครออกแบบหลุด หรือต่างจาก Concept

3. ง่ายต่อการดึงส่วนประกอบต่างๆมาใช้ ไม่ว่าจะเป็น ฟอนต์ , สี , ไอคอน , สไตล์ รวมไปถึงการจัดวางของวัตถุต่างๆ

‍เมื่อไรที่ควรใช้ระบบการออกแบบ Design System?

Design system ควรใช้เมื่อให้ทุกๆคนในองค์กรได้เข้าใจมุมมอง ไม่ว่าจะเป็นการออกแบบ จุดประสงค์ขององค์กร หรือเส้นทางการพัฒนาผลิตภัณฑ์โดยมีมาตรฐานภายใต้ Branding ขององค์กรนั้น ๆ  ซึ่ง Design system สามารถช่วยคุณได้ 2 ด้านหลัก ๆ ดังนี้

‍1. Efficiency

ช่วยเพิ่มการทำงานให้มีประสิทธิภาพมากขึ้น โดยจะสามารถหยิบส่วนประกอบต่างๆ (Components) ที่ได้ทำการออกแบบเอาไว้แล้วมาใช้ซ้ำๆ ซึ่งการที่ทำแบบนี้จะทำให้ช่วยเพิ่มความรวดเร็วในการทำงานมากขึ้น

‍2. Consistency

ช่วยให้งาน Design ที่ออกมามีรูปแบบที่สอดคล้องกัน มีมาตรฐานที่เหมือนกัน และมีขอบเขตที่ชัดเจนขึ้นในการพัฒนาผลิตภัณฑ์ ที่อยู่ภายใต้ Branding เดียวกัน

‍ตัวอย่างการนำ Design System ที่ดีมาใช้

ในส่วนนี้จะมายกตัวอย่างเหตุการณ์ที่นำ Design System ว่าสามารถใช้แบบไหนได้บ้าง

‍1. ประชุมกับคนในองค์ 

ประชุมกับหลาย ๆ ส่วน Stakeholder, Content , Developer , Accessibility , Researcher , Designer เพื่อ Roll out Design System ให้คนในองค์กรทีมที่ดูแลระบบออนไลน์มากกว่า 100 คนใช้ ซึ่งมีข้อจำกัดว่ามีหลายประเทศ หลายทีมที่ดูแล product ทำให้ภาพลักษณ์ที่เราต้องการสื่อสารไม่ไปในทิศทางเดียวกัน และสร้างปัญหาในการดูแล Branding อย่างมาก ทำให้ต้องจัดทำ Design System เพื่อควบคุมการนำเสนอภาพลักษณ์ขององค์กร

‍2. ลดปัญหาช่องว่างทางการสื่อสารระหว่างทีม

ที่ทำระบบทุกทีมเข้าด้วยกัน เพื่อให้สื่อสารใช้คำเดียวกัน ซึ่งตั้งแต่มีระบบ Design system สามารถช่วยลดปัญหาได้เยอะ ปล่อยงานไปได้ไวขึ้น และ Accessibility การทำเว็บไซต์เพื่อคนพิการ ควบคุมได้ดีมากยิ่งขึ้น เนื่องจากทุกคนใช้ component เดียวกัน จึงทำให้ไม่ต้องมาเขียนใหม่ และจะทำให้ไม่มีอะไรเล็ดลอดออกไป

3. ทำ Research เพื่อวางแผนการปล่อยแต่ละ Component

นอกจากการ Research แล้ว ยังต้องวางแผนเป้าหมายการ Development & Accessibility ขึ้นเป็น Component นำไปใช้กับระบบ Adobe Experience เพื่อนำ Component นี้ไปให้ Content Strategist หลากหลายประเทศใช้งานให้ตรงกัน และใช้ระบบของ Adobe ในการ Track วัดผลแบบ Quantitative และทำการเก็บข้อมูลเชิงตัวเลขมาวิเคราะห์เพื่อแก้ไขปรับปรุงกันต่อไป

‍อนาคตของการทำงาน

เป็นเรื่องที่ดีเมื่อมีเทคโนโลยีมาเกี่ยวข้องกับซอฟท์แวร์ที่ใช้งานได้ถูกออกแบบมาเพื่อให้สอดคล้องกับการทำงานในยุคปัจจุบันมากขึ้น โดยมีเป้าหมายคือการลดความผิดพลาด ทำให้เกิดความรวดเร็ว โดยมีระบบที่จะช่วยอำนวยความสะดวกให้เกิดขึ้นในการทำงานมากที่สุด 

‍สนใจปรึกษาเกี่ยวกับ Design System กับ Criclabs ทำอย่างไร?

Criclabs เป็นบริษัทรับออกแบบเว็บไซต์และหน้าแอพพลิเคชั่นที่มีความเชี่ยวชาญในทุกขั้นตอนการออกแบบเว็บไซต์เต็มรูปแบบ ผสมผสานความเชี่ยวชาญ ด้าน Software House และ IT Consultant เข้าไว้ด้วยกัน รวม ดีไซน์เนอร์ หากคุณต้องการจะทำ Design System เราสามารถมอบคำแนะนำ แนวทาง ในการสร้างเว็บไซต์ให้มีคุณภาพ ตอบโจทย์ดีที่สุด ให้กับทุกความต้องการของคุณอย่างแน่นอนครับ