top of page
ค้นหา

Contrast ไม่ได้มีแต่แค่กับ ”สี”…



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


เริ่มแรกมาเข้าใจกันก่อนนะ ว่า Contrast คืออะไร…


ใน uxcel เขาได้เขียนไว้ว่า

Contrast is an essential ingredient in any design recipe. It spices up your design “dish” and emphasizes elements, adding visual interest and vibrancy.

ในส่วนตัวแพงเอง ก็คิด และเห็นเช่นด้วยเช่นกัน เพราะตัวแพงเอง Background ก็เป็น Fashion design มาจากเดิม


Contrast ก็จะถูกสอนกันในลักษณ์ ที่ว่ามันคือหัวใจ และ มันคือการ แบ่งแยก แตกต่าง แต่ก็สวยงาม (อันนี้ในมุมของแพงนะ)

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


แต่ถ้าให้นึกย้อนกลับไป เท่าที่จำได้ (คือมันนานมาแล้ว คือ10 ปีที่แล้ว) 🙈😆 ในช่วงนั้น มีเพื่อนหลายคนในห้องเรียนมักจะเข้าใจว่า Contrast มีแต่ในเรื่องการใช้สี


ตอนที่แพงฟังที แพงแรกก็แอบ มีคำถามอยู่ในใจว่า ทำไมอาจารย์สอนแต่เรื่องสี ในภาควิชา ที่เกี่ยวกับ UI ทั้งที่ Contrast มันมีมากกว่าแค่คำว่า ”สี” หรือเพราะเราเป็น UI ไม่ใช่ กราฟฟิก หรือเปล่าแต่มันก็คงได้แค่เป็นคำถามในใจ ไม่เคยได้ถามอาจารย์ สักที (ตอนนี้เด็ก ภาษาสวีเดนก็ไม่แข็งแรง 🙈)


พอทุกครั้งเวลาส่งการบ้านอาจารย์ แพงเองก็มักจะได้คะแนนดี และ คำชมจาก อาจารย์และเพื่อนๆ เสมอ😎


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


และ ก็ได้แต่บอกเขาไปเสมอว่า พรสวรรค์ แพงนะไม่มีหรอก, ฉันมีแต่จำเอา แต่ที่มันออกมาดีก็เพราะ ว่ามันเป็นไปตามกฎของ Design principles ต่างๆ ที่แพงเองก็ทำตามๆ ที่เคยเรียนมา, copy มาอีกทีบ้าง, จับเอาอันนั้นมาใส่อันนี้อีกที ก็มี


แพงคิดว่าที่ แพงมีจริงๆ ก็แค่ความรู้ ภาคทฤษฎีต่างๆ ที่แพงกล้าที่จะเอามาผสมกัน และ ก็ฝึกทำบ่อยๆ สมัยเรียน Fashion design 👗👚 มันก็เลยทำให้เราชำนาญ ก็แค่นั้น และแพงก็เชื่อว่า จุดนี้ใครๆก็ทำได้ ถ้าศึกษาและ ฝึกฝนบ่อยๆนะ


 

เล่านอกเรื่องมาเยอะล่ะ ขอเข้าเรื่องนะ…


💁🏻‍♀️ คือ Contrast สามารถแบบได้หลายประเภทคะ มันไม่ได้มีแค่สีคะ แต่วันนี้ เอาแต่หัวข้อหลักๆมาฝากนะ เอาไว้มาเขียน ขยายเพิ่มในวันหลังนะ (วันนี้เอาแต่หัวกับภาพตัวอย่างไปก่อนนะ) แต่ละประเภทดังนี้คะ


Shape Contrast Type 1


Size Contrast


Colour Contrast




Shape Contrast Type 2



Size Font Contrast


Color Contrast Type 2


Quantity Contrast

Position Contrast


Orientation Contrast


Context Contrast

Visual Weight Contrast


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

👨🏻‍🎨🧑🏻‍🎨

 

สรุป

ในฐานะที่คุณ เป็น UI Designer หรือ อยากศึกษาเรื่อง UI มันขาดความรู้เกี่ยวกับ Contrastไม่ได้เลย Contrast ถึงเป็นหนึ่งใน หัวข้อใหญ่ ที่คุณต้องเรียน และ ศึกษาเอาไว้


การที่คุณเรียนรู้ ”the different types of contrast” ใจช่วยให้การออกแบบ compositions ในงานUI ดีขึ้นเป็นอย่างมาก เพราะมันจะสามารถสร้างงานที่ให้ Specific effect ที่ เป็นหัวใจสำคัญในการออกแบบ และ เป็น Designer ที่ต้องออกแบบ interface ให้สวยงาน


แล้วถ้าคุณศึกษาไปเรื่อยๆ ถึงขั้น สามารถผสมผสาน Contrast ประเภทต่างๆเข้าด้วยกันได้ งาน UI ของคุณจะยิ่ง สร้าง a complex composition ที่สามารถ ดึง ”Attention ” หรือ “Reticular Activating System (RAS)” ได้เป็นอย่างดีเลย และ การดึง Attention และ RAS พวกนี้ ละคะที่ UX และ Business อยากได้เพราะมันจะ “Grubs user attention and keeps them coming back for more” ในการกลับมาใช้งาน Design ของเรา


ดังนั้น แนะนำ ว่ามัน จำเป็น เป็นอย่างมากที่คุณ ที่คิด หรือ กำลังศึกษาเรื่อง UI อยู่จะต้องเรียนเรื่อง Contrast และ คุณก็ควรที่จะต้อง รู้ ประเภท Contrast มากกว่า 1 ประเภทด้วย


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


ป.ล ว่างๆ ครั้งหน้าแพงจะมาเขียนขยายความ ประเภท Contrast แต่ละ ประเภท ต่างๆนะคะ 😎


เนื้อหาและรูปภาพเอามาจาก…


ดู 104 ครั้ง0 ความคิดเห็น
bottom of page