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

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

 

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

 

การสร้าง Design System

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

 

Grid Systems

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

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

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

 

Color Systems

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

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

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

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

 

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: นอกจากรูปแบบกับขนาดแล้วก็ต้องมีการกำหนดความหนาของข้อความที่มีระดับตั้งแต่ตัวบาง ปกติ ไปจนถึงตัวหนา เพื่อเพิ่มความชัดเจนให้กับข้อความหรือตัวอักษร

 

Icons & Symbols

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

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

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

 

Images

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

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

 

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

 

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