Design System คืออะไร? ถึงไม่ใช่ Designer ก็ควรรู้เรื่องนี้

Design System คืออะไร? ถึงไม่ใช่ Designer  ก็ควรรู้เรื่องนี้
23/09/20   |   771   |  

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

Design System คืออะไร?

ก่อนที่จะพูดถึง Design System อยากจะอธิบายเพิ่มเติมเกี่ยวกับการพัฒนา Platform แบบง่าย ๆ เพื่อให้ทุกคนเข้าใจการทำงานก่อน อย่างการพัฒนา JobThai Platform จะประกอบไปด้วยหลายทีมไม่ว่าจะเป็นทีม Designer, ทีม Developer, ทีม Marketing และทีมอื่น ๆ อีกมาก การที่มีหลายทีมมาทำ Project ร่วมกันนี้เองทำให้เราต้องมาคุยกันถึง Design System

ถ้าอธิบายง่าย ๆ Design System คือ เครื่องมือที่เข้ามาช่วยให้การทำ Project เป็นระบบ ทำให้การสื่อสารระหว่างทีมต่าง ๆ ทั้งทีม Designer ทีม Developer ทีม Marketing และทุก ๆ ทีม ให้ทำงานถูกต้องแม่นยำ และเป็นไปในทิศทางเดียวกันนั่นเอง



ทำไมต้องทำ Design System?

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

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

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

สำหรับการทำ Design System นั่นทีม Designer เราก็ยังคงมีการพัฒนาต่อไปเรื่อย ๆ ตามเทคโนโลยี หรือแม้แต่เทรนด์ของดีไซน์ เพื่อให้ทันกับการเปลี่ยนแปลงอยู่เสมอ


องค์ประกอบหลักของ Design System

ทำความรู้จักองค์ประกอบหลัก ๆ ของ Design System จากเคสการทำงานจริงของทีม Designer ที่ดูแลงาน UX/UI ของ JobThai Platform



Color

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

สำหรับงานดีไซน์ของ JobThai เราได้เพิ่มระดับสีที่ใช้จากเดิมอีกหลายระดับเพื่อให้การทำงานง่ายยิ่งขึ้น เพราะหากเราใช้สีแค่สีหลักสีเดียวเลย จะส่งผลให้งานของเราไม่สามารถอธิบายความหมายของแอคชั่นต่าง ๆ ด้วยสีได้ เนื่องจากการทำงานของเราควรใช้สีในการเป็นตัวชี้นำให้ User เข้าใจกับสิ่งที่ปรากฏอยู่ตรงหน้าได้ง่ายที่สุด อีกทั้งยังเพิ่มมิติให้งานของเราเพิ่มจากเดิม ทำให้งานเรามีชีวิตชีวามากยิ่งขึ้น



Font

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

สำหรับ JobThai Platform ของเราใช้ฟอนต์สองตัว ที่มีขนาดน้ำหนักต่างกัน เราจึงกลับมานั่งดูกันว่า ตรงส่วนไหนบ้างที่เราต้องปรับเพื่อให้ตัวงานของเรามีความสมดุล และได้กำหนดถึงขนาดต่าง ๆ ของฟอนนต์ที่เรายังต้องใช้ด้วย รวมไปถึง Line Height สำหรับฟ้อนต์ใน Size ต่าง ๆ



Grid

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


Artwork & Icon

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

ปัจจุบันทางทีม Designer กำลังปรับ Style ของ Artwork ให้เข้ากับตลาดปัจจุบันมากขึ้น ซึ่งเริ่มทยอยปรับ จากงานที่ผ่านมาและทำคู่ขนานไปกับงานใหม่ ๆ


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


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

tags : design system thinknet jobthai designer ux/ui ux ui



ติดตามข่าวสารและเรื่องราวดีๆ ทาง Email