Design System คืออะไร ทำไมนักออกแบบต้องรู้จัก

Update

รู้จัก Design System ให้มากขึ้น ทำไมนักออกแบบเว็บไซต์และแอพพลิเคชั่นต้องรู้จัก และเริ่มทำกับโปรเจค

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

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

Design System
ตัวอย่าง Material design ของ Google

Design Principle

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

Design Pattern

ในงานออกแบบการที่มี Design Pattern เป็นการช่วยลดภาระในการทำงานลงได้ ช่วยเพิ่มความรวดเร็วในการทำงานได้เป็นอย่างดี รวมไปถึงการทำงานร่วมกับทีมนักพัฒนา (Developer) ก็คล่องมากขึ้น เนื่องจากการมี Design Pattern ที่แข็งแรงจะทำให้ทีมนักพัฒนา เห็นรูปแบบของงานทั้งหมด และทำการสร้าง Components ของงานนั้นออกมาเตรียมไว้

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

Design System
ตัวอย่าง Navigation Bar ของ apple เมื่อมีการสร้างหน้าใหม่หรือผลิตภัณฑ์ใหม่จะมีการจัดวางเหมือนเดิม

ในส่วนของ Design Pattern ที่เราคุ้นเคยกันเป็นอย่างดีอย่างเช่น iOS จะมี Human Interface Guidelines และทาง Android จะมี Material Design ที่จะมี Design Pattern รองรับไว้สำหรับผลิตภัณฑ์ที่จะเกิดขึ้นในอนาคต

ทำไม Design System ถึงมีประโยชน์กับนักออกแบบ

  1. ง่ายต่อการดึงส่วนประกอบต่างๆมาใช้ตั้งแต่ ฟอนต์, สี, ไอคอน, สไตล์ รวมไปถึงการจัดวางของวัตถุต่างๆ
  2. ประหยัดเวลาในการออกแบบ เพราะไม่ต้องสร้าง Components ใหม่ทุกครั้ง สามารถดึงจาก Library ออกมาใช้งานได้ทันที
  3. ทีมนักออกแบบสามารถแยกกันทำงานได้โดยใช้ Library เดียวกัน ปลายทางงานจะออกมาคล้ายคลึงกันไม่มีใครออกแบบหลุด Concept

Design System เบื้องต้นที่ดีควรมีอะไรบ้าง

  1. สี
    – Primary Color สีที่ใช้ประจำหรือสีหลัก
    – Secondary สีรองที่ใช้ประกอบบาง Components
    – Contrast สีคู่ตรงข้ามสำหรับการวาง UI ให้ตัดกับสีหลัก
  2. ฟอนต์
    – สกุลฟอนต์
    – ขนาดต่างๆ
    – น้ำหนัก
    – ความสูงระหว่างบรรทัด
    – ความกว้างระหว่างตัวอักษร
  3. ไอคอน
  4. การจัดวางของข้อมูล
    – ระยะห่าง
    – ขนาดรูปภาพ
    – การวางแนวตัวอักษร

สรุป Design System ช่วยนักออกแบบได้อย่างไร

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