DESIGN | 1 min read

Colors in Design System : สี สิ่งที่ต้องคำนึงก่อนขึ้น UI

By Pae Praewpailin on 09 Sep 2021
sennalabs-blog-banner

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

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

Primary Color

สีหลักหรือสีของแบรนด์ที่เราต้องใช้เป็นส่วนหลักของการออกแบบ 60-70% ของโปรเจกต์ ซึ่งสีหลักนี้เองจะเป็นตัวที่แสดงให้เห็นถึงประเภทของแบรนด์และโปรเจกต์ที่คุณกำลังออกแบบอยู่ว่าต้องการให้ภาพลักษณ์ไปในทิศทางไหน เมื่อผู้ใช้หรือกลุ่มเป้าหมายเข้ามาใช้งานบนเว็บหรือแอปพลิเคชันก็ตาม โดยที่สีใด ๆ ที่มีความหมายทางจิตวิทยาที่แตกต่างกันโดยสามารถหาอ่านเพิ่มเติมได้ในบทความ Colors in Business: สีเปลี่ยนธุรกิจ

Secondary Color

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

Color Overlays

วางสีหลัก (Primary Color) ไว้เป็นพื้นหลังและเพิ่มการซ้อนทับของสีดำและสีขาวที่ปรับความโปร่งใส (Opacity) ทับบนพื้นหลัง เพื่อที่จะได้สีที่เข้มขึ้นไว้นำไปใช้กับข้อความโทนสีอ่อน และสีที่อ่อนลงก็สามารถใช้ข้อความสีเข้มมาใช้งานได้ โดยที่ยังดูเป็นโทนเดียวกัน

Gradients

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

Status Colors

สีการแจ้งเตือนต่าง ๆ ไม่ว่าจะเป็นสถานะสำเร็จ (Success) เตือน(Warning) ผิดพลาด (Error) ข้อมูลเพิ่มเติม (Info)โดยสีที่จะเลือกใช้จะต้องทดสอบดูก่อนว่าสามารถได้กับสีพื้นหลังในแง่ของความแตกต่าง (Contrast) ตัวอักษรหรือไอคอนที่ใช้จะต้องอ่านได้ มองเห็นชัด และสบายตาต่อผู้ใช้

Neutral Colors

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

ด้วยวิธีนี้จะทำให้การออกแบบของคุณรู้สึกเป็นธรรมชาติและช่วยให้ภาพรวมของงานจะดูกลมกลืนมากยิ่งขึ้น ซึ่งจะเป็นตัวกลางในการสื่อความหมายต่างๆ ตั้งแต่สีเข้มไล่เฉดระดับความเข้มของสีไปเรื่อย ๆ ไปจนเป็นสีอ่อนนั้นเอง แนะนำ Tool ที่จะช่วยไล่ระดับสีให้ง่าย ๆ ชื่อ Make Tint and Shade Generator ที่เหมาะจะช่วยให้ชีวิตสบายขึ้น

ทีนี้ทุกคนก็พอจะรู้แล้วว่า Design System ในส่วน Color ว่ามีอะไรกันบ้างที่ควรกำหนดเอาไว้ ในบางประเภทอาจจะมี ชื่อเรียกอื่นๆ แล้วแต่บุคคลไป ซึ่งสามารถไปศึกษาเพิ่มเติมได้จาก บริษัทใหญ่ ๆ /แบรนด์ดังอื่นๆ ที่เขาได้มีการลงไว้ในเว็บไซต์ เช่น IBM , Apple , Airbnb , Google , Microsoft , Uber เป็นต้น แล้วไว้จะมาสรุปและขยายความต่อกันต่อในบทความถัด ๆ ไป หวังว่าพอได้เข้ามาอ่านกันแล้วจะได้ความรู้ ความเข้าใจเกี่ยวกับเรื่องสีกันมากขึ้น 

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

เจอกันบทความหน้าจะมาแนะนำ Tools ที่จะช่วยให้เรื่องสีเป็นเรื่องง่ายขึ้นเร็ว ๆ นี้

 

Ref

Written By
Faculty of Information and Communication Technology, Silpakorn University
Faculty of Information and Communication Technology, Silpakorn University

Please Tell Us Your Ideas

We will get back to you within 24 hours!