Upskill ภาคเรียนที่ 1 ปีการศึกษา 2567
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. คำอธิบายกระบวนวิชา :
รายวิชานี้มุ่งเน้นการปูพื้นฐานการออกแบบส่วนติดต่อผู้ใช้ (UI) และประสบการณ์ผู้ใช้ (UX) สำหรับเว็บไซต์และแอปพลิเคชันบนอุปกรณ์พกพา โดยใช้เครื่องมือ Figma ซึ่งเป็นเครื่องมือออกแบบที่ได้รับความนิยมและใช้กันอย่างแพร่หลายในอุตสาหกรรม ผู้เรียนจะได้เรียนรู้ตั้งแต่การวางโครงร่างหน้าจอ (Wireframe) การสร้างต้นแบบ (Prototype) ไปจนถึงการออกแบบหน้าตาแอพให้สวยงามและใช้งานได้จริง เหมาะสำหรับผู้ไม่มีพื้นฐานมาก่อน โดยมีการฝึกปฏิบัติจริงเป็นรายสัปดาห์ พร้อมทั้งโครงการออกแบบที่ช่วยให้ผู้เรียนสามารถสร้างผลงานของตนเองได้เมื่อจบหลักสูตร
8. ทักษะที่คาดว่าจะเกิดขึ้น กับนักเรียนหลังจากเรียนจบ :
- เข้าใจพื้นฐานของการออกแบบ UI/UX และการนำไปปรับใช้ในโปรเจ็กต์จริง - เรียนรู้การใช้เครื่องมือ Figma ตั้งแต่เริ่มต้นจนถึงการทำงานระดับมืออาชีพ - สามารถออกแบบ Web Application และ Mobile Application ที่รองรับ Responsive UI - พัฒนาทักษะการทำงานร่วมกับทีมผ่านการใช้ Component และ Style ใน Figma - สร้าง Interactive Prototypes เพื่อการนำเสนองานที่มีประสิทธิภาพ
9. สมรรถนะ 6 ด้าน (ทุกด้านรวมกันไม่เกิน 3):
1.การจัดการตนเอง
2.การคิดขั้นสูง
3.การสื่อสาร
4.การรวมพลังทำงานเป็นทีม
5.การเป็นพลเมืองที่เข้มแข็ง
6.การอยู่ร่วมกันกับธรรมชาติและวิทยาการอย่างยั่งยืน
10. สถานที่จัดการเรียนการสอน :
ห้องเรียน
ห้องปฏิบัติการ (ระบุในช่องด้านล่าง)
อื่นๆ (ระบุในช่องด้านล่าง)
11. ระดับชั้นที่ต้องการเปิดสอน ( สามารถเลือกได้ไม่เกิน 2 วัน ) :
วันจันทร์ ม. 1
วันจันทร์ ม. 2
วันจันทร์ ม. 3
วันอังคาร ม. 1
วันอังคาร ม. 2
วันพฤหัสบดี ม. 1
วันพฤหัสบดี ม. 2
วันศุกร์ ม. 1
วันศุกร์ ม. 2
วันศุกร์ ม. 3
12. ทักษะที่นักเรียนควรมี :
- สามารถใช้งานคอมพิวเตอร์พื้นฐานได้ - มีความสนใจด้านการออกแบบ UI/UX - ไม่จำเป็นต้องมีพื้นฐานการออกแบบมาก่อน แต่หากมีจะเป็นประโยชน์
13. อุปกรณ์ที่นักเรียนต้องมี :
-
14. ค่าใช้จ่ายเพิ่มเติม (คิดนักเรียนต่อหัว 200 บาท) :
15. Course outline
สัปดาห์ที่ 1 :
-รู้จัก UI/UX ในการออกแบบเว็บไซต์และโมบายแอพ -แนะนำและทำความรู้จัก Figma โปรแกรมออกแบบยอดนิยมยุคปัจจุบัน
สัปดาห์ที่ 2 :
-เริ่มต้นสร้างโปรเจ็กต์ใน Figma พร้อมการตั้งค่าพื้นฐานที่เหมาะสม -ทำความเข้าใจการวาง layout แบบต่างๆ ใน Figma
สัปดาห์ที่ 3 :
-การสร้างรูปทรง เส้น ข้อความ และภาพเวคเตอร์ใน Figma -การใส่สีพื้นฐาน การไล่สีแบบ gradients และเทคนิคอื่นๆ ที่น่าสนใจ
สัปดาห์ที่ 4 :
-การนำภาพจากภายนอกเข้ามาทำงานใน Figma -การสร้าง Component และ Style ใน Figma เพื่อนำไปใช้ซ้ำ
สัปดาห์ที่ 5 :
-สร้างการเชื่อมโยงระหว่างหน้าใน Figma ด้วย Prototypes -การ Export ไฟล์แบบต่างๆ ใน Figma ออกไปใช้งานจริง
สัปดาห์ที่ 6 :
เข้าใจแนวคิดในการจัดวาง Object ต่างๆ ให้รองรับกับขนาดหน้าจอต่างๆ แนวคิดที่สำคัญของ Auto Layout
สัปดาห์ที่ 7 :
รูปแบบการจัดวางต่างๆ ใน Auto Layout การจัดทิศทาง (direction) การจัดช่องว่าง (Spacing) การจัดระยะขอบ (Padding) การจัดตำแหน่งวัตถุแบบต่างๆ (Alignment)
สัปดาห์ที่ 8 :
Workshop การออกแบบ Web Design -ออกแบบ Responsive Web Design (Desktop, Tablet, Mobile) -การหา Resource มาใช้ออกแบบเช่น Icon, ภาพ, สีต้นแบบและอื่นๆ -แนะนำ Plugin ที่น่าสนใจในการช่วยออกแบบเว็บไซต์ -การตั้งค่า Grid ก่อนการออกแบบใน Figma
สัปดาห์ที่ 9 :
Workshop การออกแบบ Web Design -การแยก Page เพื่อความสะดวกในการจัดชิ้นงาน -การแยก component เพื่อนำมาใช้ซ้ำ
สัปดาห์ที่ 10 :
Workshop การออกแบบ Web Design -การเชื่อมโยงระหว่างเพจ (Interactive Prototype) -การ Export ภาพกราฟฟิกต่างๆ ออกไปใช้งาน -แนะนำแนวทางในการแปลงจาก UI ไปเป็นโค้ด HTML และ CSS ด้วย Plugin
สัปดาห์ที่ 11 :
Workshop การออกแบบ Mobile Application -สิ่งที่ควรรู้ก่อนการออกแบบ Mobile Application -แนวทางหาไอเดียเบื้องต้นในการออกแบบ Mobile Appliction
สัปดาห์ที่ 12 :
Workshop การออกแบบ Mobile Application -การหา Resource มาใช้ออกแบบเช่น Icon, ภาพ, สีต้นแบบและอื่นๆ -การตั้งค่า Grid ก่อนการออกแบบใน Figma -การแยก Page เพื่อความสะดวกในการจัดชิ้นงาน
สัปดาห์ที่ 13 :
Workshop การออกแบบ Mobile Application -การใช้ Auto Layout ช่วยการออกแบบเพื่อให้รองรับการทำ Responsive UI -การออกแบบแยก Theme ในแอพ ทั้ง Light theme และ Dark theme
สัปดาห์ที่ 14 :
Workshop การออกแบบ Mobile Application -การเชื่อมโยงระหว่างเพจ (Interactive Prototype) -การ Export ภาพกราฟฟิกต่างๆ ออกไปใช้งาน