Motion Typography 2 : Kinetic Typography หลักการสำคัญ ในงาน Motion Graphics Designer ต้องรู้

จากบทความก่อนหน้านี้ เราได้แนะนำรูปแบบผลงานที่นำ Typography ไปประยุกต์ใช้ เพื่อให้เห็นภาพรวม สำหรับบทความนี้เราจะว่าด้วยเรื่อง หลักการ Kinetic Typography ในงาน Motion Graphics

ซึ่งประกอบกับการประกาศผลรางวัล D&AD Awards 2019 ล่าสุดสาขา Typography ในหมวด Moving Image ผลงานที่คว้ารางวัลใหญ่สุด เป็นผลงานสุดเรียบง่ายแต่ทรงพลัง ชื่อ The Truth Is Worth It จาก The New York Times แล้วทำไมแคมเปญ The Truth Is Worth It ที่มีแค่ข้อความแบบเรียบง่ายไม่มีการเคลื่อนไหวที่หวือหวา สามารถคว้ารางวัลที่ขึ้นชื่อว่าหินที่สุดในโลกมาครองได้อย่างไร วันนี้ BEAR ถือโอกาสพาเพื่อนๆ มาหาคำตอบ และทำความความเข้าใจหลักการ Kinetic Typography ที่เป็นเหมือนหัวใจของการใช้ Typography ในงาน Motion Graphics

Cover.png

Kinetic Typography

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

▲ The Truth Is Worth It: Resolve จาก The New York Times ที่คว้ารางวัลจากเวที D&AD Awards 2019 ในสาขา Typography ในหมวด Moving Image ด้วยการจัดวางที่ชัดเจน การลำดับข้อมูลที่ส่งเสริมเรื่องราว มีจังหวะจะโคน ถึงแม้จะเป็นเทคนิคที่เรียบง่าย แต่ก็ทรงพลัง และเข้ากับเนื้อหาที่จริงจัง

 

โดย Kinetic Typography สามารถแบ่งออกได้เป็น 2 แบบดังนี้

1. Motion Typography

คือ องค์ประกอบของ Typographic มีการเคลื่อนไหว (Movement) ทั้งข้อความ หรืออักษรแต่ละตัวในลักษณะการเปลี่ยนแปลงตำแหน่ง (Position) ขนาด (Scale) หรือการหมุน (Rotation) โดยที่แต่ละตัวอักษร ไม่ได้มีการเปลี่ยนแปลงลักษณะ ซึ่ง Motion Typography จะให้ความสำคัญกับจังหวะของการเคลื่อนไหวเป็นสำคัญ

▲ Apple’s big news in 108 seconds ของ Apple เลือกใช้การเคลื่อนไหวแบบ Motion Typography โดยเน้นที่จังหวะการเคลื่อนไหวที่กระชับ และน่าตื่นตาตื่นใจ


2. Fluid Typography

คือ องค์ประกอบของ Typographic มีการเปลี่ยนแปลง (Transformation) ตัวอักษรแต่ละตัว หรือทั้งข้อความ โดยอาจเป็นการประกอบร่าง แปลงร่าง หรือสลายร่างจากรูปร่าง (Form) หนึ่งไปสู่อีกรูปร่างหนึ่งที่แตกต่างจากเดิม ซึ่งไม่ได้หมายความถึงเฉพาะการเปลี่ยนแปลงที่เป็นของเหลวเท่านั้น

▲ Mobilo Animated Promo ตัวอักษรแต่ละตัวประกอบขึ้นมาจากรูปทรงเรขาคณิตต่างๆ จนกลายเป็นตัวอักษรประกอบเป็นคำ

▲ Title Sequence จากซีรีส์ The Strain - Season 3 ที่ตัวอักษรมีการเคลื่อนแปลงลักษณะเส้นสายที่มีความอิสระ

โดย Kinetic Typography ทั้ง 2 แบบมีหลักสำคัญมาจากแนวคิด Transitivity ที่อธิบายถึงวิธีการทำงานที่เป็นระบบเพื่อทำความเข้าใจการแปลความหมาย และการเชื่อมต่อจากการเปลี่ยนแปลงสถานะของวัตถุต่างๆ ของมนุษย์ ซึ่งในกรณีนี้ คือ การเปลี่ยนโดยการเคลื่อนไหว และการเปลี่ยนลักษณะต่างๆ ของตัวอักษร 

 

ซึ่งการสร้าง Kinetic Typography ให้ประสบความสำเร็จนั้นมีหลักการดังต่อไปนี้

1. Optimize for Readability

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

▲ ผลงานของ Troika ที่ส่วนใหญ่เป็นงานด้าน Broadcasting Design ที่ให้ความสำคัญกับการจัดรูปแบบการจัดวาง และการเคลื่อนไหวที่ให้ผู้ชมสามารถรับข้อมูลได้อย่างถูกต้อง และชัดเจน


2. Optimize for Accessibility

คือ การปรับ Typography ให้เหมาะสมสำหรับการเข้าถึงเนื้อหา ซึ่งการรับรู้สิ่งเหล่านี้ผ่านการอ่านหน้าจอรูปแบบต่างๆ ที่หลากหลายนั้น จะมีข้อจำกัดที่แตกต่างกัน ดังนั้นการใช้ Kinetic Typography จึงเน้นองค์ประกอบให้เหมาะสมกับจอแต่ละรูปแบบ

▲ งาน Olympic Winter Games PyeongChang 2018 ได้ปรับ Typography เพื่อสามารถให้ผู้ชมสามารถเข้าถึงเนื้อหาได้จากจอที่หลากหลายรูปแบบ


3. Optimize Effect Duration

คือ การปรับ Typography ระยะเวลาของการสร้างเทคนิคพิเศษ (Effect) ควรเพียงพอที่จะทำให้เกิดอารมณ์ความรู้สึก ความเข้าใจ หรือการตอบสนองจากผู้ชม โดยที่ผู้ชมสามารถอ่านเนื้อหาได้ทัน และครบถ้วน ในขณะที่ข้อความนั้นมีการเคลื่อนไหว

▲ National Geographic Breakthrough การสร้าง Effect ให้กับ Typographic อย่างต่อเนื่องตลอดทั้งงาน จนนำไปสู่ชื่อผลงานในตอนท้าย


4. Maintain Relativity

คือ การรักษาความสัมพันธ์ของการเคลื่อนไหวขององค์ประกอบ Typographic แต่ละตัวให้สัมพันธ์กับตัวอื่นๆ ซึ่งไม่จำเป็นต้องรักษาการเรียงลำดับแบบเชิงเส้น ที่เป็นพฤติกรรมการอ่านพื้นฐานของมนุษย์ที่คุ้นเคยกับการอ่านสิ่งพิมพ์ ที่มีลักษณะจากซ้ายไปขวา จากบนลงล่าง เป็นต้น

▲ Ava DuVernay’s 13th การเคลื่อนไหวของ Typographic ทั้งหมดมีความสัมพันธ์กัน โดยมีทิศทางการเคลื่อนไหวที่หลากหลาย


5. Manage Emotion

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

▲ End Title Sequence ของ Venom เลือกใช้การเปลี่ยนแปลงแบบ Fluid Typography ในลักษณะของเหลวที่คล้ายกับเชื้อโรคช่วยสร้างความรู้สึกที่เชื่อมโยงกับเนื้อเรื่อง และทิศทางการออกแบบงานชิ้นนี้


หากวิเคราะห์จากแนวคิด The Truth Is Worth It หรือความจริง คือ สิ่งที่คุ้มค่า ที่ต้องการนำความจริงกลับมาสู่ผู้อ่านทั่วโลก การเลือกรูปแบบการนำเสนอผ่าน Kinetic Typography ที่เรียบง่าย คล้ายกับการนำเสนอข่าวแบบดั่งเดิม ในรูปแบบของการอ่านข่าวที่เราคุ้นชิน โดยให้ความสำคัญกับการลำดับข้อมูลที่ส่งเสริมเรื่องราวแต่มีจังหวะจะโคน ถึงแม้จะเป็นเทคนิคที่เรียบง่าย แต่ก็ทรงพลัง และเข้ากับเนื้อหาได้อย่างสมบูรณ์

 

จากหลักการที่เรานำเสนอไปทั้งหมด จะพบว่านอกจากการจัดองค์ประกอบ และการเคลื่อนไหวที่น่าสนใจแล้ว การใช้ Typography ในงาน Motion Graphics จะต้องเลือกรูปแบบที่เหมาะสมกับเนื้อหาที่จะนำเสนอ โดยคำนึงถึงความสามารถในการอ่านของมนุษย์ เพื่อให้ผู้ชมสามารถเข้าใจความหมายของสิ่งต่างๆ รวมทั้งสามารถสร้างอารมณ์ความรู้สึกต่อผู้ชมให้ได้ ซึ่งในบทความเรานำเสนอเชิงแนวคิด และหลักการ โดยในลำดับถัดไปเราจะอธิบายเพิ่มเติมในเชิงเทคนิคการสร้าง Kinetic Typography แบบต่างๆ ฝากติดตามด้วยนะครับ