DESIGN | 3 mins read

รวม Design System จากแบรนด์ดัง เขาทำยังไงกันบ้าง

By Pae Praewpailin on 16 Feb 2022
sennalabs-blog-banner

(หมายเหตุ: บทความนี้เป็นส่วนหนึ่งของซีรีส์ Design System ของ Pae Praewpailin)

เชื่อว่าทุกคนที่เป็นนักออกแบบหรือ UX/UI Designer ทุกคนจะต้องเคยพบเจอเหตุการณ์ต่าง ๆ เหล่านี้ไม่ว่าจะเป็น

  • ใช้สีเยอะไปหมด มีสีเทาเป็น 10 เฉดสี สรุปอันไหนใช้กับตรงไหนถึงจะถูกต้องกันแน่นะ
  • ตัวอักษรที่ขนาดไม่เท่ากัน Header 42px บ้าง 30px บ้าง ตรงนี้ควรจะใช้แบบหนาหรือบาง ระยะห่างระหว่างบรรทัด (Leading) เพี้ยนไปหมด เว้น Section ใต้ Banner หน้าหนึ่ง 50px แต่พอไปใช้กับอีกที่หน้าเว้น 40px
  • ปุ่มมีกี่รูปแบบ แล้วสรุปสีปุ่มอันไหนเป็น CTA ในงานของเรา แล้วตอนที่ Hover จะเป็นยังไง คิดออกแบบเผื่อไว้รึยัง

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

Design System คืออะไรกันนะ

Design System คือระบบการออกแบบที่มีความสำคัญอย่างยิ่งในการช่วยให้บริษัท และนักออกแบบอย่างเรานั้นเข้าใจ จัดระเบียบ วางแผน และกำหนดภาพลักษณ์ของแบรนด์ได้เป็นอย่างดี เปรียบเหมือนคู่มือที่จำเป็นจะต้องสร้างขึ้นมาเพื่อใช้สื่อสารกับคนในทีมหรือองค์กร เป็นสื่อกลางที่ทำให้ภาพรวมของงานมีความสม่ำเสมอ (Consistency) ไม่ว่าจะเป็น Components ส่วนต่างๆ ร่วมกัน ทั้งตัวอักษร (Typography) ขนาด (Sizing) สี (Colors) Button (ปุ่ม) Space Grids & Layouts (ระยะ กริด และการจัดวาง) Text field (กล่องข้อความ) Shadow & Elevation (เงา) Icons (สัญลักษณ์) หรือ Component ต่าง ๆ อีกมากมายขึ้นอยู่กับรูปแบบ Platform กันไป

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

แล้วทำไมต้องทำ Design System ด้วยละ เรามาดูข้อดีและประโยชน์ของมันกัน 

  1. ประหยัดเวลาการทำงานได้มากขึ้นเยอะ
  2. งานออกมามีความสม่ำเสมอของ UI เพิ่มความน่าเชื่อถือของแบรนด์
  3. ลดความซับซ้อนและความคลุมเครือ
  4. ส่งเสริมและช่วยให้ทำงานได้สะดวกมากยิ่งขึ้น เวลาทำงานร่วมกันและเป็นเอกฉันท์ ทุกฝ่ายที่เกี่ยวข้องเข้าใจตรงกัน
  5. เข้าใจในงานมากยิ่งขึ้น ว่าระบบการทำงานว่าทำงานอย่างไร
  6. ส่งต่องานให้ผู้รับผิดชอบคนต่อไปได้ทำและเข้าใจโปรเจกต์ง่ายขึ้น
  7. การสร้างรูปแบบ โครงสร้างฐานที่ดี เพื่อการปรับปรุงแก้ไขให้ดียิ่งขึ้นในอนาคต
  8. สื่อสารและอธิบายให้ผู้พัฒนา (Developer) น้อยลงในระหว่างการส่งต่อไปยังผู้พัฒนา

ตัวอย่างบริษัท/แบรนด์ที่ทำ Design System

ในฐานะนักออกแบบเราสามารถเรียนรู้ได้มากมายจากการศึกษาระบบเหล่านี้ เพราะถ้าหากเราเข้าใจวิธีการสร้าง และเจาะลึกถึงวิธีการเหล่านี้แล้ว ก็จะช่วยให้ทำงานได้เป็นไปตามขั้นตอนตามองค์ประกอบของแบบฟอร์ม โดยตัวอย่างเหล่านี้บางเว็บสามารถดูผ่านเว็บไซต์ได้โดยตรง หรืออาจจะเป็นไฟล์ PDF, XD, Figma, Sketch ให้ดาวน์โหลดไปศึกษา เพื่อเป็นตัวอย่างให้นำไปปรับใช้กับงานของคุณในการทำแต่ละโปรเจกต์/เว็บไซต์⁣จากบริษัทใหญ่ ๆ ดังนี้

Apple

Audi

Atlassian

Airbnb

Fluent Design (Microsoft)

Google Material

Facebook 

IBM Design

AXA

Adobe's

Spotify

หรือถ้าอยากดูเพิ่มเติมก็สามารถเข้าไปดูได้ที่ : Design Systems Repo หรือ designsystems ซึ่งเขาได้รวบรวมเว็บไซต์ที่มีการทำ Design System ของแต่ละแบรนด์นั้นๆ ให้คุณได้เลือกดูและศึกษาอีกมากมาย หรือสนใจอยากดู Design System แบรนด์ไหนเป็นพิเศษก็ลองใส่ keyword คำค้นหา ชื่อแบรนด์ + design system ก็ได้แล้วจะได้ไอเดีย ความน่าสนใจ รูปแบบ การจัดเรียง และข้อมูลของแต่ละแบรนด์ในการทำ Design System มากยิ่งขึ้น

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

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

 

แหล่งอ้างอิง

Written By
Faculty of Information and Communication Technology, Silpakorn University
Faculty of Information and Communication Technology, Silpakorn University

Please Tell Us Your Ideas

We will get back to you within 24 hours!

Something went wrong. Please try to verify again