Introduction to Design System : ว่าด้วยเรื่องความสำคัญและส่วนประกอบของ Design System
ช่วงเวลาที่ผ่านมาผู้คนที่ทำงานในแวดวงธุรกิจที่เกี่ยวข้องกับ Digital Platform ทั้งหลาย คงได้รู้จักคำว่า “Design System” ผ่านหูผ่านตามาบ้าง วันนี้เราจะมาทำความรู้จักกับ “Design System” อีกครั้งว่ามันคืออะไร มีความสำคัญต่อธุรกิจดิจิทัลและสามารถช่วยให้งานภายในองค์กรดีขึ้นได้อย่างไร
นิยามของ “Design System” คืออะไรกันนะ
Design System เป็นระบบการออกแบบที่ช่วยควบคุมงานออกแบบทุกชิ้นให้เกิดความเชื่อมโยงกัน โดยสามารถอยู่ภายใต้ Branding ขององค์กรนั้นๆ ไม่ว่าจะเป็นการออกแบบ Product , Website, Application, Presentation หรือแม้แต่ Documentation ต่างๆ ซึ่งไม่ว่าจะทีมไหนในองค์กรนั้นๆ ก็สามารถใช้ Design System ในการนำเสนอภาพลักษณ์ให้เป็นไปในทิศทางเดียวกันได้ ทุกคนจะใช้รูปแบบและแนวทางเหมือนกันทั้งหมด โดยที่ไม่ต้องเสียเวลาสร้างขึ้นมาใหม่ ทำให้ทีมทำงานได้ไวมากขึ้น และสื่อสารได้เข้าใจตรงกันในองค์กร
ถ้าจะยกตัวอย่างให้เห็นภาพมากที่สุดก็คงเป็นเรื่อง การออกแบบ Website หรือ Application ในทุกๆ ครั้งของการออกแบบ Designer จะต้องเป็นผู้ออกแบบ User interface(UI) แล้วส่งต่อให้ Developer นำไปใช้สร้างผลิตภัณฑ์นั้นขึ้นมา ส่วนมากแล้วปัญหาที่พบได้บ่อยคือ การออกแบบ User interface(UI) มักจะไม่ค่อยตรงกับผลิตภัณฑ์ที่สร้างขึ้นมา ไม่ว่าจะเป็นเฉดสี ไอคอน หรือแม้แต่องค์ประกอบในผลิตภัณฑ์ของจริง เราจึงจำเป็นต้องใช้ Design System เข้ามาช่วย เพื่อให้งานดำเนินต่อไปได้ด้วยดี ไม่มีการทำแล้วทิ้งหรือต้องแก้ใหม่ซ้ำๆ เหมือนเคย
Design System ไม่ได้มีเพียงแค่ Style guide, Pattern และ Components เท่านั้น เพื่อการสื่อสารที่ชัดเจนและเป็นแนวทางให้ผู้ใช้งานออกแบบได้เห็นภาพไปในทิศทางเดียวกันยิ่งขึ้น จำเป็นต้องออกแบบครอบคลุมไปถึง Principle และ Documentation เพิ่มขึ้นด้วย ทีมต่างๆ ที่รับงานต่ออย่างทีม Developer จะได้เข้าใจในสิ่งที่ต้องการสื่อสารร่วมกัน และสามารถหยิบงานออกแบบอย่าง Components ไปใช้งานพัฒนาผลิตภัณฑ์นั้นๆ ได้เลยทันที ซึ่งช่วยเพิ่มความรวดเร็วในการทำงานได้เป็นอย่างดี
ส่วนประกอบของ Design System
Design System แบ่งออกได้เป็น 3 กลุ่มหลัก คือ
- Design Principle ที่เป็นส่วนของ Documentation รวมถึง Brand Guidelines เป็นคำอธิบายหรือคู่มือที่บอกว่าส่วนนี้ใช้เพื่ออะไร ใช้ได้ตอนไหน หรือใช้กับการแสดงผลอย่างไรได้บ้าง เพื่อเป็นแนวทางในการออกแบบ การจัดทำผลิตภัณฑ์ และนำเสนอผลิตภัณฑ์ให้เป็นไปในทิศทางเดียวกัน
2. Style Guide คือองค์ประกอบพื้นฐานของการออกแบบทั้งหมด ไม่ว่าจะเป็น
- Logo
- Colors
- Primary Colors
- Secondary Colors
- Color with meaning - Typography (Fonts)
- Icon
- Shapes
- Sounds
- Voice and tone
- Visual
- Illustrations
- Photographies
- Animations - etc.
3. Library คือชุดรูปแบบที่ให้คนภายในองค์กรสามารถหยิบไปใช้งานได้อย่างง่ายที่สุด ซึ่งต้องใช้งานร่วมกับ Style Guide แบ่งออกได้เป็น
- Patterns Library (UI Elements)
- Components Library (Code Snippets)
ตัวอย่างการใช้ Design System ขององค์กร
การทำ Design System ขึ้นมาถือว่าต้องใช้เวลากับมันไปค่อนข้างมาก และยังคงต้องพัฒนาให้ดียิ่งขึ้นเสมอ ปัจจุบันหลายๆองค์กรเริ่มใช้ Design System ในการทำงานมากขึ้น อีกทั้งยังเผยแพร่ให้คนภายนอกได้ชมและสามารถนำไปใช้เป็นตัวอย่างได้ วันนี้เราจะมายกตัวอย่าง Design System ที่ดีขององค์ต่างๆ กันค่ะ
Material Design — Developed by Google Team | use for Android and Web Apps.
Atlassian Design System — Developed by Atlassian
IBM Design Language — Developed by IBM
Fluent design system — Developed by Microsoft | use for Windows, Android, and iOS devices.
Human Interface Guidelines — Developed by Apple | use for all their platforms.
AirBnB Design — Developed by AirBnB
จะเห็นได้ว่าการใช้ Design System นอกจากจะมีความสำคัญต่อการทำงานของคนในองค์กรเป็นหลัก ช่วยลดภาระในการทำงานและเพิ่มความรวดเร็วของการพัฒนาผลิตภัณฑ์แล้ว ในมุมของธุรกิจดิจิทัลนั้น Design System ยังถือว่าเป็นการรักษาภาพลักษณ์ที่ดี ช่วยให้แบรนด์ที่ไม่ว่าจะอยู่บนแพลตฟอร์มไหนๆ ก็จะมีรูปแบบที่เป็นไปในทิศทางเดียวกัน และทำให้เป็นที่จดจำของลูกค้าได้มากที่สุดด้วยเช่นกัน
