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

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

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

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

การสร้าง Design System

ลูกค้าของ SUFFIX จะมีความหลากหลาย โดยส่วนมากแต่ละองค์กรหรือแบรนด์ต่างๆ มักจะมีแนวทางการใช้สี ฟอนต์ โลโก้ หรือที่เรียกว่า Coperlate 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 และ Natural Color
- Primary Colors : สีกลุ่มนี้คือสีที่จะใช้ในเว็บไซต์เป็นหลัก ซึ่งจะเป็นสี CI ขององค์กรหรือแบรนด์ เพื่อสร้างให้เกิดการจดจำ
- Secondary Colors : สีกลุ่มนี้จะเป็นสีรองที่จะใช้ในเว็บไซต์ เพื่อเสริมให้สีหลักให้มีความโดนเด่นและชัดเจนยิ่งขึ้น
- Natural Colors : สีกลุ่มนี้คือสีอื่นๆ ซึ่งส่วนมากมักเป็นสีขาว-สีดำ โดยจะใช้มากสุดสำหรับสีของข้อความหรือสีของพื้นหลัง

3. Typography Systems

การสร้าง Typography Systems ถือเป็นสิ่งสำคัญไม่แพ้กัน เพราะจะทำให้การออกแบบเป็นไปในทิศทางเดียวกันเพื่อเพิ่มความต่อเนื่องสม่ำเสมอ (Consistency) ให้กับเว็บไซต์หรือแอปพลิเคชั่น โดยจะประกอบไปด้วย Style Fonts, Fonts Size และ Fonts Weight
- Style Fonts : โดยส่วนมากแบรนด์หรือองค์กรมักจะกำหนดฟอนต์สำหรับการใช้งานบนเว็บไซต์มาให้ประมาณ 2–3 ฟอนต์ โดยเราต้องทำการจัดหมวดหมู่การใช้ฟอนต์สำหรับส่วนต่างๆ บนเว็บไซต์หรือแอปพลิเคชั่น ได้แก่ Headline, Subtitle, Text Body และ Button
- Fonts Size : ขนาดการใช้งานฟอนต์ในแต่ละส่วนอาจมีความแตกต่างกัน จึงจำเป็นต้องกำหนดขนาดของฟอนต์ เช่น Headline ที่มักจะมีขนาดที่ใหญ่กว่าส่วนของ Subtitle หรือ Text Body เสมอ โดยเราต้องกำหนดขนาดฟอนต์ของแต่ละส่วนให้ไปในทิศทางเดียวกันทั้งหมด
- Fonts Weight : นอกจากรูปแบบกับขนาดแล้วก็ต้องมีการกำหนดความหนาของข้อความที่มีระดับตั้งแต่ตัวบาง, ปกติ ไปจนถึงตัวหนาเพื่อเพิ่มความชัดเจนให้กับข้อความหรือตัวอักษร

4. Icons & Symbols

สิ่งที่มักจะเห็นเสมอในงานออกแบบคือ Icon เพราะในบางครั้งการใช้ภาพสามารถอธิบายความหมายได้เร็วกว่าข้อความหรือตัวอักษร และ Icon ยังถือเป็นภาษาสากลที่ทุกคนสามารถเข้าใจไปในทิศทางเดียวกันอีกด้วย โดยการออกแบบ Icon จึงต้องอาศัยการทำความเข้าใจก่อนว่า ต้องการออกแบบ Icon อย่างไรเพื่อให้สื่อความหมายกับผู้ใช้งาน (User) ได้อย่างชัดเจน ไม่เข้าใจยากหรือดูซับซ้อนจนเกินไป และต้องสวยงามในเวลาเดียวกัน ดังนั้นจึงต้องประกอบไปด้วย
- Icon Size & Layout : การออกแบบ Icon ควรทำให้มีขนาดเท่ากัน มีรูปแบบเดียวกัน เพื่อเพิ่มความต่อเนื่องสม่ำเสมอ (Consistency) ให้กับเว็บไซต์หรือแอปพลิเคชั่น เช่น หากเราใช้ 8-point Grid เราจะได้ Icon ขนาด 16, 24 หรือ 32 เป็นต้น
- Style : การสร้าง Icon ต้องกำหนดรูปแบบก่อนว่าเราต้องการจะออกแบบไอคอนแบบไหน เช่น Strokes หรือ Fills และต้องไม่ลืมคำนึงถึง concept ของงานแล้วจึงเลือกรูปแบบที่เหมาะสม เพื่อให้การใช้ Icon ในเว็บไซต์หรือแอปพลิเคชั่นเป็นไปในทิศทางเดียวกัน

5. Images

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

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

ซึ่งทั้งหมดนี้คือ “ประโยชน์ของระบบการออกแบบอย่างเป็นระบบ”