Design

Design System: Scale อย่างเป็นระบบ

ในปี ค.ศ. 1570 หนังสือ The Four Books of Architecture ได้ถูกตีพิมพ์เป็นครั้งแรกในเมืองเวนิส ภายในหนังสือบรรจุด้วยองค์ความรู้ นิยามขอบเขตและกฎเกณฑ์ของการออกแบบ รวมไปถึงคำศัพท์ต่างๆ ที่ใช้ในงานสถาปัตยกรรม จุดประสงค์ก็เพื่อสร้างบรรทัดฐานในการสื่อสารระหว่างสถาปนิกเองและทีมก่อสร้าง อีกทั้งช่วยวางระบบการคิด ให้อยู่ในกรอบเดียวกันเพื่อเป็นประโยชน์ในการสร้าง ต่อเติมหรือการซ่อมบำรุงอาคารในอนาคต

การออกแบบ Digital Product ก็ไม่ต่างกับงานสถาปัตยกรรม โครงสร้างที่ไม่รองรับการเปลี่ยนแปลงหรือการขยับขยาย อาจสร้างปัญหาต่อการพัฒนาสินค้าและบริการในอนาคตได้

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

What is Design System

Design System คือระบบการออกแบบที่เชื่อมโยงกัน สามารถใช้ร่วมกัน แล้วยังสร้างความสอดคล้องให้กับสินค้าและบริการนั้น ให้อยู่ภายใต้ Branding ขององค์กรใดองค์กรหนึ่ง

แล้วทำไมถึงต้องมี…

design-mockup

Collaborative

การทำ Digital Product ส่วนใหญ่มักทำงานเป็นทีม ซึ่งมีหลาย Stakeholder การมีระบบกลางในการสื่อสาร จะช่วยให้ทีมสามารถทำงานร่วมกันได้ง่ายขึ้น

ลองนึงดูว่าถ้าทีมนึงมี Designer หลายคน Designer A ออกแบบแล้วส่งต่อให้ Designer B ทำต่อ แล้วบรีฟว่า “ช่วยเปลี่ยนสีขอบของ ‘ช่องรูปใน Feed’ เป็นเหลืองเข้มให้หน่อยดิ” Designer B คงเหว๋อ แต่ถ้าเรามีระบบกลางที่บอกว่า ‘ช่องใส่รูป = Card’ ‘ขอบ = Stroke’ ‘เหลืองเข้ม=Yellow2’ วิธีบรีฟคงสื่อสารแค่ “เปลี่ยน Stroke ของ Card เป็น Yellow2 ได้มั้ย” Developer ก็จะรู้ด้วยว่า Yellow2 คือสีไหน เพียงแค่นี้ Workflow ก็ง่ายขึ้นแล้ว

design-consistency

Consistent

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

design-scalability

Scalable

Digital Product เป็นสินค้าที่ Upgrade ได้ มีการเปลี่ยนแปลงเวอร์ชันอยู่ตลอดเวลา การจะให้ Developer หรือ Designer มาคิด ออกแบบแล้วสร้างขึ้นมาใหม่นั้นกินเวลาเป็นอย่างมาก การนำ Component เดิมที่มีอยู่แล้ว มาใช้ซ้ำๆ จะช่วยประหยัดเวลาการพัฒนาสินค้าและบริการใหม่ อีกทั้งยังช่วยให้ผลิตภัณฑ์ของเราถึงมือผู้ใช้งานได้เร็วกว่าคู่แข่งอีกด้วย

การสร้าง Design System ควรคำนึงถึง…

Design Principle

dart

Design Principle คือหลักการของการออกแบบ การวาง Principle ที่ดีจะช่วยให้ทีมพัฒนาและทีมออกแบบ เข้าใจแนวทางของบริษัทว่ากำลังไปในทิศทางไหน

Design Principle ที่ดีควรคำนึงถึง 4 อย่าง
1. Purpose ทำเพื่ออะไรหรือใคร ในระยะยาว
2. Shared Themes ออกแบบให้มีความสอดคล้อง เป็นไปในทิศทางเดียวกัน
3. Focus your audience ให้ความสำคัญกับผู้ใช้งาน
4. Test and evolve your principle ทดสอบและพัฒนาอย่างสม่ำเสมอ

Pattern

design pattern

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

 reusable design
  • Reuse คือการนำ UI Component หรือ User Flows มาใช้ซ้ำๆ
  • Repurpose คือการนำ UI Component เดิม มาประยุกต์ใช้ให้เกิดเป็น Solution หรือฟีเจอร์ใหม่ๆ

Design Pattern ยังแบ่งออกได้ 2 ประเภทใหญ่

functional pattern design

ถึงชื่อต่างแต่ Function เหมือน Tab ทั้งบอกสถานะว่าตอนนี้อยู่ที่หน้าไหน อีกทั้ง มี Search Function อยู่ด้านบน เพื่อช่วยให้ผู้ใช้หาสิ่งที่ต้องการได้เร็วขึ้น

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

Design style

แค่ Style ต่าง ความรู้สึกก็ต่าง

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

Shared Language

design language

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

Skooldio Design System

Skooldio’s Design System

ส่งท้าย

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

“A design system isn’t a project, it’s a product serving other products” — Nathan Curtis

business product goal

อ้างอิง

Illustrated by Thanon Vongprayoon

ธนนท์ วงษ์ประยูร
ChulaArch81(ID), YWC#14, Designer at Skooldio

    You may also like

    องค์กรจะดีขึ้นยังไง? ถ้าทุกทีมเข้าใจ เรื่อง UX | Skooldio Blog - องค์กรจะดีขึ้นยังไง? ถ้าทุกทีมเข้าใจ เรื่อง UX
    Design

    องค์กรจะดีขึ้นยังไง? ถ้าทุกทีมเข้าใจ เรื่อง UX

    ปัจจุบันการสร้าง Experience ที่ดีให้ลูกค้าเป็นสิ่งสำคัญมาก แต่หลายธุรกิจมักเข้าใจผิดว่า ต้องเป็นหน้าที่ของ UX Designer คนเดียว เพราะที่จริงแล้วลูกค้าจะมีประสบการณ์ที่ดีได้ ต้องมาจากความรู้สึกของผู้ใช้ที่ได้รับจากแบรนด์ในทุกขั้นตอน ซึ่งสิ่งเหล่านี้จะเกิดขึ้นได้จากความร่วมมือของทุกทีมนั่นเอง Marketer การเข้าใจ User Experience ...
    Service Design | Skooldio Blog - Service Design คืออะไร? ทำความรู้จักเครื่องมือที่จะช่วยออกแบบธุรกิจให้เป็นที่รัก
    Design

    Service Design คืออะไร? ทำความรู้จักเครื่องมือที่จะช่วยออกแบบธุรกิจให้เป็นที่รัก

    การแข่งขันทางธุรกิจนับวันจะยิ่งดุเดือดขึ้นเรื่อยๆ ต่างคนก็ต่างต้องพัฒนาสินค้า หรือบริการของตัวเองให้ดีที่สุดเพื่อที่จะอยู่รอด แต่หากทุ่มเทสร้างสินค้ามาอย่างดี แต่บริการพังไม่เป็นท่า ประสบการณ์ของลูกค้าต่อแบรนด์อาจจะกลายเป็นลบไปเลยก็ได้ การออกแบบบริการหรือ Service Design จึงมีบทบาทสำคัญมากในการจัดการระบบการทำงานต่างๆ เพื่อสร้างสรรค์ประสบการณ์ที่ดีให้กับผู้ที่เกี่ยวข้อง  Service Design คืออะไร? Service ...

    More in:Design

    Design

    Service Design, Design Thinking, UX, UI กับจุดเชื่อมโยงที่เรียกว่า Human Centred Design

    หลายๆ คนอาจจะเคยได้ยินคำว่า UX, UI และ Design Thinking กันมาบ้างแล้ว แต่ตอนนี้มีอีกหนึ่งศาสตร์ที่กำลังมาแรงมากนั้นก็คือ Service Design หรือกระบวนการออกแบบบริการ ซึ่งกระบวนการออกแบบบริการนั้นมักถูกคนจำนวนมากสับสนว่ามันต่างกับ User Experience ...
    สรุป 5 เทคนิคสร้าง Service Design ให้ลูกค้าปลื้มสุดๆ | Skooldio Blog Design

    สรุป 5 เทคนิค ใช้ Data สร้าง Service Design ให้ลูกค้าปลื้ม

    คุณก็ออกแบบบริการให้ลูกค้าประทับใจได้ง่ายๆ แค่รู้วิธีใช้ Data เพื่อสร้าง Service Design ที่เราสรุปให้ในบทความนี้ ตั้งแต่ความเข้าใจพื้นฐาน วิธีคิด และเคสตัวอย่างที่สามารถนำไปปรับใช้ในการทำงานของคุณได้จริง โดย 3 ผู้เชี่ยวชาญ จาก 🔴 ...
    Design

    เรียนรู้ตำแหน่งงานหลักใน Tech StartUp ผ่านตัวละครจากซีรีส์เรื่องดัง

    ผ่านไป 8 ตอนแล้วกับ Start-up ซีรี่ส์มาแรงส่งตรงจากเกาหลี เรื่องราวของเหล่าวัยรุ่นที่มีความฝันอยากจะปั้น Startup ของตัวเองให้ขึ้นมาเป็นบริษัทเทคชั้นนำแบบ Silicon Valley สาขาเกาหลี ตลอดทั้งเรื่องที่ผ่านมา เราได้เห็นการแข่งขันที่เข้มข้น ความยากลำบากในการสร้าง Startup ...
    Business

    6 สิ่งที่องค์กรมักเข้าใจผิดเกี่ยวกับ Design Thinking

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

    Comments are closed.