プロジェクト
Multimedia Learning Polygon Mesh
Learning Goal
โปรเจกต์นี้เป็นสื่อการเรียนรู้ที่พาผู้ใช้เข้าใจตั้งแต่ vertices, edges, faces ไปจนถึงการเกิด polygon mesh และ 3D object representation พร้อมต่อยอดด้วย jigsaw game ที่ให้ผู้เรียนประกอบ face ของโมเดลด้วยตัวเอง
Why This Topic Is Hard
หัวข้อ polygon mesh ยากต่อการจินตนาการจาก text-only หรือ slide แบบนิ่ง จึงจำเป็นต้องมีสื่อที่แสดงลำดับการเกิดรูปทรงอย่างเป็นภาพและมี interaction ช่วยให้ผู้เรียนเชื่อมโยงแนวคิดได้ง่ายขึ้น
Abstract by Nature
Polygon mesh เป็นแนวคิดที่ต้องเห็น ไม่ใช่แค่อ่าน — การเข้าใจว่า vertices เชื่อมกันเป็น edges แล้วกลายเป็น faces และ faces รวมกันสร้างวัตถุ 3D นั้นต้องการ interaction และ visual step-by-step ที่ text หรือ slide นิ่ง ๆ ให้ไม่ได้
Interaction Design Highlights
2D Process Polygon
เรียนรู้การเกิด polygon ทีละขั้นใน 2D พร้อมควบคุม step ด้วยลูกศร next/back
2D Modify / Config
ปรับแต่ง properties ของ polygon 2D ผ่าน dropdown config แบบ interactive
3D Process Polygon
ดูกระบวนการสร้าง polygon mesh ใน 3D พร้อม step-by-step navigation
3D Config
ตั้งค่าโครงสร้าง 3D object และสำรวจรูปทรงในมุมมองต่างๆ
Polygon Study → 3D Object
เชื่อมโยง polygon study กับ 3D object representation อย่างชัดเจน
Creating Polygon Mesh
แสดง hover explanation ให้เห็นว่า mesh เกิดขึ้นได้อย่างไร ทีละ face
Jigsaw Polygonal
ภาพรวม jigsaw menu และการเลือกโมเดล
Jigsaw Polygonal Game
ลากและประกอบชิ้นส่วน polygon แบบ draggable real-time บน Figma Site
Content Flow & Build Process
Home & Topic Navigation Design
ออกแบบหน้า home และระบบ topic navigation ให้ผู้เรียนเลือกเส้นทางการเรียนได้ง่าย ไม่สับสน
2D/3D Content with Step Controls
แยกเนื้อหา 2D และ 3D พร้อมลูกศร next/back และ dropdown config เพื่อควบคุมการเรียนแบบ step-by-step ในแต่ละหัวข้อ
Hover / Animation / Prototype Linking
ใช้ hover states, prototype linking และ while-hovering triggers เพื่อทำให้เนื้อหานิ่ง ๆ มีความเคลื่อนไหวและตอบสนองต่อผู้เรียน
Jigsaw Game — Pen Tool + Plugins
สร้าง jigsaw game ด้วย Pen Tool ตัดชิ้นส่วน, Image Cutter สร้าง asset, Property Randomizer สุ่มตำแหน่งชิ้นส่วน — ให้ลากประกอบได้จริงบน Figma Site
Jigsaw Polygonal Game
★ Feature Highlight
Jigsaw Polygonal Game คือ highlight ของสื่อชุดนี้ — ผู้เรียนต้องลากและประกอบชิ้นส่วน polygon faces เข้าด้วยกันเพื่อสร้างโมเดล 3D ด้วยตัวเอง บน Figma Site แบบ real-time
Pen Tool Cutting
ตัดรูปทรง polygon จากโมเดลจริงด้วย Pen Tool เพื่อสร้างชิ้นส่วน jigsaw ที่แม่นยำ
Property Randomizer
ใช้ plugin สุ่มตำแหน่งและ rotation ของชิ้นส่วนแต่ละครั้ง ให้การเล่นไม่ซ้ำกัน
Draggable Assembly
ผู้เรียนลากชิ้นส่วนประกอบกลับเป็นโมเดล 3D ผ่าน Figma Site interaction โดยตรง
Solution & Impact
The Solution: สื่อการเรียนรู้ที่ผู้ใช้สามารถเห็นการเปลี่ยนแปลงของ object ทีละส่วน กดสำรวจหัวข้อเชิงลึก และลงมือเล่นผ่าน jigsaw เพื่อ reinforce ความเข้าใจ Impact: ช่วยเปลี่ยนเนื้อหาพื้นฐาน 3D modeling ให้เข้าใจง่าย สนุก และจดจำได้ดีขึ้นผ่านการมีส่วนร่วมของผู้เรียน Challenges: ทำให้เรื่อง polygon mesh และ 3D object representation ซึ่งค่อนข้าง abstract เข้าใจง่ายขึ้นผ่าน interaction, animation, hover states, draggable pieces และ content flow ที่ผู้เรียนกดสำรวจได้เอง
ทำให้เรื่อง polygon mesh และ 3D object representation ซึ่งค่อนข้าง abstract เข้าใจง่ายขึ้นผ่าน interaction, animation, hover states, draggable pieces และ content flow ที่ผู้เรียนกดสำรวจได้เอง
Role
Head Figma Design / Interactive Flow Design
Tech Stack
Timeline
1 Month
Team
3 Members
จตุรภัทร กิติมาโภคิน, ณัฐวุฒิ ทิพย์รัตน์, ธนัทภัทร พรหมทอง
Full Gallery
All 17 screens — 2D, 3D, Polygon Study, Jigsaw & more