Upskill ภาคเรียนที่ 2 ปีการศึกษา 2568
1. รหัสประจำตัวครู :
รหัสประจำตัวครูที่สอนร่วม :
2. ชื่อกระบวนวิชา :
3. วิชากลุ่ม :
เลือก
Boost up
Power up
Dancing & Music
Technology
Language and Culture
Science-Math
Arts & Design
Hobbies and DIY
Sports Club
Food and Beverage
LifeStyle
4. ครูประจำวิชา :
5. นักเรียนที่รับ ( สามารถเลือกได้มากกว่า 1 ) :
นักเรียนไทย
นักเรียนต่างชาติ
6. จำนวนนักเรียน :
คน
7. คำอธิบายกระบวนวิชา :
รายวิชานี้มุ่งเน้นการเรียนรู้และฝึกปฏิบัติการออกแบบ User Interface (UI) และ User Experience (UX) ด้วยเครื่องมือ Figma นักเรียนจะได้เรียนรู้ตั้งแต่การใช้งานเครื่องมือพื้นฐาน การออกแบบหน้าจอ การสร้าง Component การทำงานร่วมกันแบบทีม และการสร้าง Prototype เพื่อนำเสนอผลงาน โดยเน้นการประยุกต์ใช้ทักษะการออกแบบให้สอดคล้องกับหลักการ UX/UI Design
8. ทักษะที่คาดว่าจะเกิดขึ้น กับนักเรียนหลังจากเรียนจบ :
1.ใช้งาน Figma ในการออกแบบ UI ได้อย่างคล่องแคล่ว 2.สร้าง Wireframe, Mockup และ Prototype ของแอปพลิเคชันหรือเว็บไซต์ 3.ออกแบบ Component และ Style Guide เพื่อความสม่ำเสมอของงาน 4.ทำงานร่วมกันบน Figma แบบ Real-time ได้ 5.นำเสนอและส่งมอบงานออกแบบในรูปแบบไฟล์และ Prototype ได้อย่างเป็นระบบ
9. สมรรถนะ 6 ด้าน (ทุกด้านรวมกันไม่เกิน 3):
1.การจัดการตนเอง
2.การคิดขั้นสูง
3.การสื่อสาร
4.การรวมพลังทำงานเป็นทีม
5.การเป็นพลเมืองที่เข้มแข็ง
6.การอยู่ร่วมกันกับธรรมชาติและวิทยาการอย่างยั่งยืน
10. สถานที่จัดการเรียนการสอน :
ห้องเรียน
ห้องปฏิบัติการ (ระบุในช่องด้านล่าง)
อื่นๆ (ระบุในช่องด้านล่าง)
11. ระดับชั้นที่ต้องการเปิดสอน ( สามารถเลือกได้ไม่เกิน 2 วัน ) :
วันจันทร์ ม. 1
วันจันทร์ ม. 2
วันจันทร์ ม. 3
วันอังคาร ม. 1
วันอังคาร ม. 2
วันอังคาร ม. 3
วันพฤหัสบดี ม. 1
วันพฤหัสบดี ม. 2
วันศุกร์ ม. 1
วันศุกร์ ม. 2
12. ทักษะที่นักเรียนควรมี :
1. มีความรู้พื้นฐานด้านการใช้คอมพิวเตอร์ 2. มีความคิดสร้างสรรค์
13. อุปกรณ์ที่นักเรียนต้องมี :
-
14. ค่าใช้จ่ายเพิ่มเติม (คิดนักเรียนต่อหัว 200 บาท) :
15. Course outline
สัปดาห์ที่ 1 :
แนะนำรายวิชา & พื้นฐาน Figma แนะนำ Figma, การสมัครใช้งาน, โครงสร้างหน้าต่างโปรแกรม
สัปดาห์ที่ 2 :
การใช้งานเครื่องมือพื้นฐาน Frame, Shape, Text, Color, Layer, Export
สัปดาห์ที่ 3 :
หลักการออกแบบ UI/UX พื้นฐานการเลือกสี, Typography, Layout, Grid
สัปดาห์ที่ 4 :
Wireframe Design สร้างโครงร่างหน้าจอแอป/เว็บไซต์แบบ Low-fidelity
สัปดาห์ที่ 5 :
การออกแบบ Mockup ปรับจาก Wireframe ไปเป็น Mockup แบบ High-fidelity
สัปดาห์ที่ 6 :
Components & Variants การสร้างปุ่ม, การจัดการ Symbol, Reusable Components
สัปดาห์ที่ 7 :
Style Guide & Design System การสร้างชุดสี, ฟอนต์, Icon Set
สัปดาห์ที่ 8 :
Prototype I การทำลิงก์หน้า, Interaction เบื้องต้น
สัปดาห์ที่ 9 :
Prototype II Micro-interaction, Animation, Transition
สัปดาห์ที่ 10 :
Case Study I วิเคราะห์และออกแบบ UI จากโจทย์จริง
สัปดาห์ที่ 11 :
Case Study I วิเคราะห์และออกแบบ UI จากโจทย์จริง (ต่อ)
สัปดาห์ที่ 12 :
Community การใช้เครื่องมือจากแหล่งชุมชนแบ่งปันข้อมูล
สัปดาห์ที่ 13 :
WorkShop การสร้างชิ้นงานจาก Template
สัปดาห์ที่ 14 :
การเผยแพร่ผลงาน การ Export ไฟล์, การ Present Prototype