ประโยชน์ของระบบการออกแบบ

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

ทำไม Design System ถึงสำคัญกับการทำงานเป็นทีม?

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

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

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

Design System ของ SUFFIX ประกอบด้วยอะไรบ้าง?

ลูกค้าของ SUFFIX มีความหลากหลายในหลายอุตสาหกรรม โดยส่วนมากแต่ละองค์กรหรือแบรนด์มักจะมีแนวทางการใช้สี ฟอนต์ โลโก้ หรือสิ่งที่เรียกว่า Corporate Identity (CI) มาให้อยู่แล้ว แต่หน้าที่ของ Designer คือการสร้าง Design System ให้กับเว็บไซต์ที่ต้องเชื่อมโยงและสร้างความสอดคล้องให้กับสินค้าหรือบริการภายใต้ CI ขององค์กรหรือแบรนด์นั้น ๆ โดยองค์ประกอบในการสร้าง Design System ของเราจะประกอบไปด้วย

1. Grid Systems

ในการออกแบบเว็บไซต์หรือแอปพลิเคชัน สิ่งที่จะขาดไม่ได้เลยคือ Grid Systems เนื่องจาก Grid จะช่วยจัดระเบียบ เพิ่มความต่อเนื่องและความสม่ำเสมอ (Consistency) ให้กับเว็บไซต์หรือแอปพลิเคชัน ที่สำคัญยังช่วยในการจัดรูปแบบและปรับขนาดของแต่ละอุปกรณ์ ตั้งแต่หน้าจอคอมพิวเตอร์ไปจนถึงหน้าจอโทรศัพท์อีกด้วย

Bootstrap: เชื่อว่า Designer หลายคนน่าจะรู้จักกันเป็นอย่างดี Bootstrap คือชุดเครื่องมือที่ใช้ในการออกแบบเว็บไซต์ให้เหมาะสมกับการแสดงผลบนอุปกรณ์หลากหลายประเภท หรือที่เรียกว่า Responsive Website

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

2. Color Systems

การสร้างกลุ่มสีสำหรับการใช้งานบนเว็บไซต์หรือแอปพลิเคชันเป็นสิ่งสำคัญในการออกแบบ ซึ่งสามารถแบ่งออกเป็น Primary Colors, Secondary Colors และ Neutral Colors

Primary Colors: สีที่จะใช้ในเว็บไซต์เป็นหลัก ซึ่งจะเป็นสี CI ขององค์กรหรือแบรนด์ เพื่อทำให้เกิดการจดจำ

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

Neutral Colors: สีกลุ่มนี้คือสีอื่น ๆ ซึ่งส่วนมากมักเป็นสีขาว-สีดำ โดยจะใช้มากที่สุดในส่วนของข้อความหรือพื้นหลัง

3.Typography Systems

การสร้าง Typography Systems ถือเป็นสิ่งสำคัญไม่แพ้กัน เพราะจะทำให้การออกแบบเป็นไปในทิศทางเดียวกัน เพื่อเพิ่มความต่อเนื่องสม่ำเสมอ (Consistency) ให้กับเว็บไซต์หรือแอปพลิเคชัน โดยจะประกอบไปด้วย Style Fonts, Font Sizes และ Font Weights

Style Fonts: โดยส่วนมากแบรนด์หรือองค์กรมักจะกำหนดฟอนต์สำหรับการใช้งานบนเว็บไซต์มาให้ประมาณ 2–3 ฟอนต์ โดยเราต้องจัดหมวดหมู่การใช้ฟอนต์สำหรับแต่ละส่วน ได้แก่ Headline, Subtitle, Text Body และ Button

Font Sizes: ขนาดการใช้งานฟอนต์ในแต่ละส่วนอาจมีความแตกต่างกัน จึงจำเป็นต้องกำหนดขนาดของฟอนต์ เช่น Headline ที่มักจะมีขนาดใหญ่กว่า Subtitle หรือ Text Body เสมอ โดยเราต้องกำหนดขนาดฟอนต์ของแต่ละส่วนให้ไปในทิศทางเดียวกันทั้งหมด

Font Weights: นอกจากรูปแบบกับขนาดแล้วก็ต้องมีการกำหนดความหนาของข้อความที่มีระดับตั้งแต่ตัวบาง ปกติ ไปจนถึงตัวหนา เพื่อเพิ่มความชัดเจนให้กับข้อความหรือตัวอักษร

4. Icons & Symbols

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

Icon Size & Layout: การออกแบบ Icon ควรทำให้มีขนาดเท่ากัน มีรูปแบบเดียวกัน เพื่อเพิ่มความต่อเนื่องและสม่ำเสมอ (Consistency) ให้กับเว็บไซต์หรือแอปพลิเคชัน เช่น หากเราใช้ 8-Point Grid เราจะได้ Icon ขนาด 16, 24 หรือ 32 เป็นต้น

Style: การสร้าง Icon ต้องกำหนดรูปแบบก่อนว่าต้องการออกแบบแบบไหน เช่น Strokes หรือ Fills และต้องคำนึงถึง Concept ของงาน แล้วจึงเลือกรูปแบบที่เหมาะสมเพื่อให้การใช้ Icon ในเว็บไซต์หรือแอปพลิเคชันเป็นไปในทิศทางเดียวกัน

5. Images

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

การเลือกใช้รูปภาพควรคำนึงถึงผลิตภัณฑ์และบริการขององค์กรหรือแบรนด์เป็นหลัก และควรเลือกภาพที่มีความสอดคล้องกันทั้งในด้านสไตล์ โทนสี และบรรยากาศโดยรวมบนเว็บไซต์หรือแอปพลิเคชัน รวมถึงควร Consistent กับ CI ของแบรนด์ด้วย เช่น โทนสีของภาพควรเป็นไปในทิศทางเดียวกับ Primary Colors ที่กำหนดไว้ใน Design System เราต้องรู้ว่าเมื่อใดควรใช้รูปภาพ เช่น เว็บไซต์ E-Commerce ของแบรนด์แฟชั่น การออกแบบจำเป็นต้องมีรูปภาพเสื้อผ้าประกอบ เพราะหากมีแค่คำอธิบายสินค้าโดยไม่มีรูปภาพ ผู้ใช้งานก็จะไม่สามารถเข้าใจหรือเห็นภาพ ซึ่งอาจมีผลต่อการตัดสินใจซื้อสินค้าได้

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