- YouTube ซึ่งเริ่มต้นในปี 2005 จากไอเดียเว็บไซต์วิดีโอเดต ปัจจุบันได้เติบโตเป็นแพลตฟอร์มสื่อที่มีผู้คนนับพันล้านทั่วโลกเข้าเยี่ยมชมทุกวันเพื่อรับชมคอนเทนต์หลากหลายรูปแบบ
- โลโก้สีแดงอันเป็นเอกลักษณ์ของ YouTube เป็นตัวแทนของอัตลักษณ์แบรนด์มาอย่างยาวนาน แต่ล่าสุดได้มีการนำสีแดงที่นุ่มนวลขึ้นและกราเดียนต์สีมาเจนตาที่คาดไม่ถึงมาใช้
- นี่คือการเปลี่ยนแปลงเล็ก ๆ แต่มีความหมาย ซึ่งแสดงให้เห็นว่า YouTube ในวาระครบรอบ 20 ปีรักษาความสดใหม่ของแบรนด์ไว้อย่างไร
เหตุผลของการเปลี่ยนแปลง
- ทีม art direction และทีมออกแบบภายในของ YouTube ต้องการพัฒนาสีแดงที่ใช้งานมาตลอด 20 ปีให้ก้าวต่อไป
- จากการศึกษาว่าองค์ประกอบเดิมใดบ้างที่ไม่สอดคล้องกับยุคสมัย ก็ได้ข้อสรุปว่าสีเป็นหนึ่งในหัวข้อปรับปรุงลำดับต้น ๆ
- สีใหม่ถูกปรับให้ยังคงอัตลักษณ์ของแบรนด์ไว้ ขณะเดียวกันก็มีความทันสมัยและเข้าถึงได้มากขึ้น
ปัญหาของสีแดงเดิม
- สีแดงก่อนหน้านี้ (RGB pure red) โดดเด่นเกินไปใน UI และมีปัญหาเรื่องความสม่ำเสมอของสี เช่น ในบางหน้าจออาจดูออกส้ม
- บนจอบางประเภท เช่น TV อาจก่อให้เกิดอาการ burn-in จนมีร่องรอยถาวรค้างอยู่บนหน้าจอ
- เนื่องจากสีแดงมีความเข้มข้นสูง จึงมีข้อสังเกตว่าหากใช้อย่างไม่เหมาะสมอาจทำให้ผู้ใช้รู้สึกล้าในการใช้งานได้
การนำสีแดงใหม่และกราเดียนต์มาใช้
- มีการปรับเป็นสีแดงที่ให้ความรู้สึกเย็นลงเล็กน้อย เพื่อลดปัญหาทางเทคนิคอย่าง burn-in ของหน้าจอและการเพี้ยนของสี
- โดยยังเคารพมรดกเดิมของ YouTube พร้อมคำนึงถึงการเข้าถึงและอารมณ์ร่วมสมัย จึงกำหนดให้เป็นโทนที่นุ่มนวลและมีชีวิตชีวายิ่งขึ้น
- มีการวางกลยุทธ์ให้ใช้สีแดงเฉพาะในช่วงเวลาสำคัญที่แสดงอัตลักษณ์หลักของ YouTube เพื่อเพิ่มแรงกระแทกทางสายตาให้สูงสุด
- จากนั้นจึงเพิ่มกราเดียนต์เข้าไป เพื่อสร้างความสนุกทางภาพด้วยการผสานระหว่างสีแดงกับสีมาเจนตา
- ถูกนำไปใช้ใหม่กับโลโก้, ไอคอนโปรดักต์, progress bar, ปุ่ม Like/Subscribe, ป้าย Premium และวงแหวนไลฟ์ เป็นต้น
กลยุทธ์ด้านการออกแบบและตัวอย่างการใช้งาน
- ใช้ สีแดงที่เข้มชัดเฉพาะเมื่อจำเป็น เพื่อรักษาอัตลักษณ์แบรนด์พร้อมลดความล้าของผู้ใช้
- ทำงานร่วมกับหลายทีมเพื่อสำรวจขอบเขตที่สามารถใช้สีใหม่และกราเดียนต์ได้ และสร้างความสม่ำเสมอทั่วทั้งอินเทอร์เฟซของผลิตภัณฑ์จริง
- ผ่านการหารืออย่างละเอียดกับดีไซเนอร์, ไดเรกเตอร์ และวิศวกร เพื่อตรวจสอบว่ากราเดียนต์แสดงผลบนหน้าจอขนาดใหญ่อย่างไร และเป็นไปตามมาตรฐานการเข้าถึงหรือไม่
- มีการกำหนดแบรนด์คัลเลอร์ให้กับแอ็กชันสำคัญ เช่น ปุ่มติดตามหรือปุ่มถูกใจ ส่วนสถานะพื้นฐานอื่น ๆ ยังคงใช้โทนโมโนโครมเพื่อให้การสื่อสารข้อมูลชัดเจน
โมชันดีไซน์และอัตลักษณ์แบรนด์
- เนื่องจาก YouTube เป็นแพลตฟอร์มวิดีโอ การใช้โมชันเพื่อดึงดูดสายตาและให้คำแนะนำเชิงฟังก์ชันจึงเป็นเรื่องสำคัญ
- พร้อมกับการอัปเดตสี ได้เพิ่มเอฟเฟกต์ใน startup animation ที่โลโก้ขยายและย่อ พร้อมเน้นกราเดียนต์ให้เด่นชัด
- ทำให้ progress bar ดูบางลงและเคลื่อนไหวเร็วขึ้น เพื่อเพิ่มความรู้สึกทันสมัยและความเพลิดเพลินทางสายตา
- ยังเพิ่มแอนิเมชันเล็ก ๆ ให้กับไอคอน topic channel ที่มีกราเดียนต์สีมาเจนตา เพื่อเสริมทั้งความเป็นเอกภาพของแบรนด์และความสนุก
- หากเป็นสีเดียวจะเปลี่ยนแปลงได้เพียงรูปทรง แต่เมื่อใช้กราเดียนต์ก็สามารถปรับบรรยากาศได้แม้ด้วยการเคลื่อนไหวเพียงเล็กน้อย
- มีการมุ่งหาปริมาณที่เหมาะสมของ “น้ำตาล” (ให้ความสนุกแต่ไม่มากเกินไป) เพื่อไม่ให้ผู้ใช้รู้สึกเป็นภาระจากโมชัน
การคำนึงถึงการเข้าถึง
- เพื่อให้คอนทราสต์ของข้อความเพียงพอ มีการแบ่งระดับความสว่างและโทนของสีแดงกับมาเจนตาอย่างหลากหลาย และเลือกใช้ค่าที่เหมาะสมที่สุดตามขนาดองค์ประกอบ UI และแต่ละสถานการณ์
- มีความระมัดระวังไม่ให้สื่อสารข้อมูลด้วยสีเพียงอย่างเดียว โดยปุ่มสำคัญสามารถใช้แบรนด์คัลเลอร์ได้ แต่สถานะพื้นฐานยังคงเป็นโทนโมโน
- สำหรับอุปกรณ์สเปกต่ำ ได้มีการนำ adaptive framework มาใช้ เช่น จำกัดโมชันหรือปรับความเข้มของโมชันตามขนาดหน้าจอ
- หากเป็นไปได้จะลดขอบเขตของโมชันเพื่อไม่ให้เกิดภาระทางสายตามากเกินไป และออกแบบให้สามารถปิดแอนิเมชันได้ตามความจำเป็น
บทสรุป
- สีแดงใหม่และกราเดียนต์เป็นองค์ประกอบสำคัญที่ทำให้ YouTube พัฒนาแบรนด์ของตนในวาระครบรอบ 20 ปี
- ผลลัพธ์ที่ได้ยังคงรักษาพลังเฉพาะตัวของสีแดงไว้ พร้อมปรับปรุงปัญหาด้านเทคนิค การออกแบบ และการเข้าถึง
- การใช้โมชันและกราเดียนต์อย่างเหมาะสมช่วยให้ YouTube กลายเป็นแพลตฟอร์มที่สนุกและมีความเป็นมนุษย์มากขึ้น
- นี่เป็นตัวอย่างที่สะท้อนภาพของ YouTube ที่ยังคงเปลี่ยนแปลงอย่างต่อเนื่อง และช่วยให้ผู้ใช้รับรู้พัฒนาการของแบรนด์ได้อย่างเป็นธรรมชาติ
2 ความคิดเห็น
พอถึงท้ายบทความแล้วหน้าจอทั้งหน้ากลายเป็นสีมาเจนต้า ตาแสบมากเลยครับ..
โดยส่วนตัวแล้วผมรู้สึกว่าการใส่ไล่เฉดสีแมเจนตาในแถบความคืบหน้าทำให้เหมือนหน้าจอมีอะไรผิดพลาดไป ที่น่าสนใจก็คืออุปกรณ์ที่ทำให้ผมรู้สึกแบบนั้นกลับเป็น Pixel ของ Google เอง