Facebook Ads 31

Design System คืออะไร? พร้อมตัวอย่างจากบริษัทชื่อดัง

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

Design systems

Design System from Airbnb

Design System คืออะไร?

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

ยุคต่อมานั้นการทำเว็บไซต์เอง เราก็มีสิ่งที่เรียกว่า Style Guide ที่เป็น pdf, หรือเว็บไซต์เพื่อให้ทีมเข้าใจในการออกแบบ เช่น สี, ฟอนต์, ตัวหนังสือต่างๆ แต่มันก็ยังคงเป็นเหมือนกับสิ่งที่แยกที่แยกออกมาและใช้กันแค่เพียงทีมดีไซน์เนอร์เท่านั้น

แต่ในปัจจุบันนั้นการทำงานร่วมกันระหว่าง Designer และ Developer เริ่มมีความใกล้ชิดกันมากยิ่งขึ้น ทำให้ทั้งสองฝ่ายต้องใช้งาน components ส่วนต่างๆร่วมกัน ไม่ว่าจะเป็นตัวของ โค้ด (Code), ตัวหนังสือ (Type), หรือสี (Colors), Components ส่วนต่างๆ ในโปรเจคที่ทำงานร่วมกัน

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

Design system is a scalable framework for decisions & team behaviors across a product portfolio to converge on a cohesive experience. (Nathan Curtis)

 

Design system ต้องมีคุณสมบัติดังนี้

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

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

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

 


ทำไมเราต้องใช้ Design System ?

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

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

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

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

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

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

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

 


ตัวอย่าง Design System

หัวข้อสุดท้ายใน Design System ที่ยกตัวอย่างวันนี้ ก็ได้ไปรวบรวมเว็บไซต์จากแบรนด์ดังมามากมาย โดยในเว็บไซต์ด้านล่างนั้นก็จะมีตั้งแต่ Typography, layouts, grids, colors, icons, animation, voice and tone, style-guide, documentation และอื่นๆอีกเพียบ ใครที่สนใจไปติดตามกันได้เลยนะคะ

http://styleguides.io
เว็บไซต์แรกสำหรับใครที่สนใจเกี่ยวกับเรื่องของ Style guide ไม่ว่าจะเป็นบทความ หนังสือ และตัวอย่างจากบริษัทใหญ่ๆมากมาย

http://material.io
เป็นข้อมูลการทำงานของ Google ในการสร้าง Design System ที่เราใช้งานกันทุกวันนี้

https://airbnb.design
ข้อมูลการออกแบบ the Design Language System (หรือ DLS) ของ Airbnb ในนี้ก็จะรวมขั้นตอนและข้อมูลต่างๆในการออกแบบทั้งเว็บไซต์และแอพลิเคชั่น มีประโยชน์มากสำหรับคนที่สนใจเรื่อง Design System

https://developer.apple.com/design/resources

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

 

Fluent Design System

Fluent Design System

Microsoft

หรืออ่านบทความอธิบายอย่างละเอียดก่อนหน้านี้ได้ที่ เปิดตัว Fluent Design System ระบบดีไซน์ใหม่ล่าสุด โดย Microsoft

Facebook

Apple

Material Design

IBM Design

VM Ware

Harmony Design by Intuit

BBC Gel

Lighting Design System

Design system from MailchimpDesign system from MailChimp

MailChimp

Pega

Lonely Planet

Oracle

Standard USA

Shopify

 





There are no comments

Add yours