ออกแบบเว็บด้วย Figma ร่วมกับ WordPress

ภาพรวมหัวข้อการอบรม

• Section 1: พื้นฐานการออกแบบที่ดี
• Section 2: พื้นฐานการใช้งาน Figma ออกแบบเว็บไซต์
• Section 3: พื้นฐานการทำงานกับ WordPress
• Section 4: การใช้งาน Plugin Elementor ออกแบบเว็บไซต์ใน WordPress ด้วยดีไซน์จาก Figma

รายละเอียดหลักสูตร

Section 1: พื้นฐานการออกแบบที่ดี

• รู้จัก UI/UX ในการออกแบบเว็บไซต์
• แนวทางการออกแบบเว็บไซต์ที่ดี (Best Practices for Exceptional Web Design and Usability)
• แนะนำเครื่องมือและแหล่งอ้างอิงในการใช้ออกแบบเว็บไซต์ที่มีประโยชน์

Section 2: พื้นฐานการใช้งาน Figma ออกแบบเว็บไซต์

• รู้จักโปรแกรมออกแบบเว็บไซต์ยอดนิยม
• แนะนำและทำความรู้จัก Figma โปรแกรมออกแบบยอดนิยมยุคปัจจุบัน
• เริ่มต้นสร้างโปรเจ็กต์ใน Figma พร้อมการตั้งค่าพื้นฐานที่เหมาะสม
• ทำความเข้าใจการวาง layout แบบต่างๆ ใน Figma
• การสร้างรูปทรง เส้น ข้อความ และภาพเวคเตอร์ใน Figma
• การใส่สีพื้นฐาน การไล่สีแบบ gradients และเทคนิคอื่นๆ ที่น่าสนใจ
• การนำภาพจากภายนอกเข้ามาทำงานใน Figma
• การสร้าง Component และ Style ใน Figma เพื่อนำไปใช้ซ้ำ
• สร้างการเชื่อมโยงระหว่าหน้าใน Figma ด้วย Prototypes
• การ Export ไฟล์แบบต่างๆ ใน Figma ออกไปใช้งานจริง

Section 3: พื้นฐานการทำงานกับ WordPress

• ดาวน์โหลดและติดตั้ง WordPress เพื่อทดสอบบนคอมพิวเตอร์ผู้เรียน
• การเพิ่ม Theme ใน WordPress
• การติดตั้ง Extension สำหรับออกแบบด้วย Elementor
• การตั้งค่า Permalinks ใน WordPress
• การสร้าง Pages
• การสร้าง Menu ใน WordPress
• การปรับแต่ง Theme พื้นฐาน

Section 4: การใช้งาน Plugin Elementor ออกแบบเว็บไซต์ใน WordPress ด้วยดีไซน์จาก Figma

• การติดตั้งและการใช้งาน Plugin Elementor ใน WordPress
• การสร้างหน้าแบบ (template) ด้วย Elementor
• การสร้างส่วนประกอบ (widget) ใน Elementor เพื่อใช้ในการออกแบบเว็บไซต์
• การเลือกและการใช้ Theme สำหรับ Elementor
• การนำเอาดีไซน์จาก Figma มาสร้างส่วนประกอบใน Elementor
• การทดสอบและการปรับปรุงการแสดงผลของหน้าเว็บไซต์ใน WordPress
• การเชื่อมต่อ Elementor กับเครื่องมือและบริการอื่น ๆ เพื่อการออกแบบเว็บไซต์ที่สมบูรณ์ยิ่งขึ้น

ตัวอย่าง Workshop ออกแบบเว็บไซต์ด้วย Figma

ตัวอย่าง Workshop ออกแบบเว็บไซต์ด้วย Figma ร่วมกับ WordPress และ Elementor