หลักสูตรฝึกอบรม การออกแบบ UX-UI (UX-UI Design) - หลักสูตร 1 วัน

หลักการและแนวความคิด
1. หลักการ User Experience (UX) = User + Experience คือการออกแบบประสบการณ์ เป็นจุดเริ่มต้นความสำเร็จในการออกแบบ การรับรู้เป้าหมายและการเรียนรู้จากผู้ใช้งาน ทำให้เรากำหนดทิศทางของการออกแบบได้ ซึ่งจะทำให้ผู้ใช้งานเกิดการประทับใจ เกิดความสนใจ และเกิดการพอใจในการใช้งานได้โดยจะเรียนรู้ กระบวนการ Design Thinking
• Empathize การเข้าอกเข้าใจผู้ใช้งาน
• Define การกำหนด การเลือกปัญหา ที่เราควรให้ความใส่ใจ
• Ideate การสร้างสรรค์ไอเดียและการคิดไอเดียเพื่อแก้ปัญหา
• วิธีการสร้างต้นแบบ และทดสอบต้นแบบ เพื่อนำไปสู่การสร้างผลิตภัณฑ์หรือบริการที่แท้จริง
เราจะเกิด Experience หรือประสบการณ์ได้นั้น จะเกิดจากการรับรู้ และความรู้สึก ในการรับรู้อาจจะมาจากการสัมผัส การมองเห็น การได้ยิน หรือความรู้สึกที่เกิดขึ้นภายใน เช่น รู้สึกชอบหรือไม่ชอบ รู้มีความสุขหรือไม่มี รู้สึกดีหรือไม่ดี
2. หลักการออกแบบ User Interface Design การออกแบบสิ่งที่เชื่อมประสานระหว่างผู้ใช้กับสิ่งใดสิ่งหนึ่ง โดยการออกแบบ UI ไม่เพียงแต่จะต้องดีไซน์สิ่งที่สวยงามน่าใช้ แต่ต้องออกแบบให้ดูเป็นมิตร เข้าใจง่าย (User-friendly) เพื่อนำความต้องการของลูกค้ามาเปลี่ยนแปลงงานออกแบบส่วนที่ติดต่อกับผู้ใช้งานให้ออกมาเป็นผลิตภัณฑ์ เช่น เรื่องการจัดวางองค์ประกอบ ในด้านการใช้งาน ยกตัวอย่างเช่น เว็บไซต์ก็คือการแสดงผลทุกอย่าง ไม่ว่าจะเป็น Button, Icon, Color, Size, Font เป็นต้น ซึ่งเป็นแนวทางมาตรฐานที่ทำให้ผู้ใช้งานสามารถเข้าใจได้

วัตถุประสงค์
1. มีความรู้ความเข้าใจเกี่ยวกับหลักการ XU/UI
2. มีความเข้าใจประโยชน์ของการออกแบบ UX/UI
3. สามารถนำความรู้มาประยุกต์ใช้ในการออกแบบ UX/UI

รายละเอียดเนื้อหาของหลักสูตร (Course Outline)
1 Chapter 1 แนะนำคอร์สเรียน
       แนะนำบทเรียน
       วิธีการและโปรแกรมที่ใช้
Chapter 2 ทำความเข้าใจกับ UX/UI
       UX/UI คืออะไร แตกต่างกันอย่างไร
       พื้นฐาน UX/UI Design UI Design คืออะไร / UX Design คืออะไร
       การออกแบบ UX/UI สำหรับเครื่องคอมพิวเตอร์
       การออกแบบ UX/UI สำหรับ Smartphone
       ประโยชน์ของการออกแบบ UX/UI ที่ดี
       ผลเสียของการออกแบบ UX/UI ที่ไม่ดี
       ทำไมต้องเรียน UX/UI Design
       กรณีตัวอย่างเรียนรู้การออกแบบ UX/UI สำหรับ Mobile Application
       กรณีตัวอย่างเรียนรู้การออกแบบ UX/UI สำหรับ Website
       กรณีตัวอย่างเรียนรู้การออกแบบ UX/UI จากความผิดพลาด
Chapter 3 UX Design
       UX Design ในทุกสิ่ง
       แนวคิดกระบวนการ Design Thinking
       Empathize
         - สัมภาษณ์และวิธีตั้งคำถาม
         - เทคนิคการสัมภาษณ์และการบันทึก
         - การสังเกต
         - การใช้งาน Empathy Map
       Define
         - การสร้าง Persona
      Ideate
         - เทคนิคการสร้างสรรค์
         - Sketch ร่าง
      Prototype
         - เทคนิคการสร้าง Prototype
         - การวาด Wireframe สำหรับ Paper prototype
      Test
         - รูปแบบการ Test
         - เครื่องมือที่ใช้ในการ Test
         - ขั้นตอนวิธีการ Test
Chapter 4 Design Concept
      แนวคิดการออกแบบเพื่อประยุกต์ใช้ในการออกแบบ UI
      Human Computer Interactions / HCI on Smartphone
      User Center Design / ความสำคัญ
      Information Architecture / Site map
      Information Design / Button Design
      Visual Design / Icon Design
      Interaction Design
Chapter 5 UI Design
      จิตวิทยาการออกแบบด้านการมองเห็น
      จิตวิทยาการออกแบบด้านการคิด
      จิตวิทยาการออกแบบด้านความรู้สึก
      UI Design Process
      การออกแบบ UI Mobile
      Component, Element และ Symbol
      ลองออกแบบหน้า Login
      ลองออกแบบหน้า Register
      ลองออกแบบหน้า News Feed (List view)
      iOS Human Interface Guideline
         - Design Component บน iOS
         - Create Style บน iOS
         - Interaction บน iOS
      Material Design สำหรับ Android
         - Design Component บน Android
         - Create Style บน Android
         - Interaction บน Android
      การออกแบบ UI Web
         - Landing Page
         - Add Picture/ Typographic / Color
      Register page
         - Register Wireframe
         - Register Mockup Layout
         - Register add picture /typographic / Color
Chapter 6 การออกแบบ UX/UI ด้วย Figma
      ทำความรู้จัก Features ใน Figma (Home Screen หน้าตาโปรแกรม)
      โหมดใช้งานของโปรแกรม (เช่น Design, Prototype, Share)
      การสร้าง Text
      การสร้าง Artboard
      การติดตั้ง และใช้งาน Plugin
      การทำ Prototype
      การ Export File

ตัวอย่าง Work Shop / กรณีศึกษา
Work Shop ด้วยการลองออกแบบ UX/UI ด้วย Figma ให้ผู้อบรมฝึกใช้โปรแกรม Figma ในการออกแบบ UI

รายละเอียดและเทคนิคที่อาจารย์ใช้ในการดำเนินการฝึกอบรม (รูปแบบการฝึกอบรมโดยรวม)
รูปแบบเป็นการบรรยาย สลับกับการทำ Workshop ด้วยการใช้คอมพิวเตอร์