ออกแบบเว็บด้วย Figma ร่วมกับ WordPress
รายละเอียด Course ID: wdc-01-59
หนึ่งในกระบวนการพัฒนาเว็บไซต์ที่สำคัญคือการออกแบบ เพราะการออกแบบจะช่วยให้ได้เว็บที่มีคุณภาพ สวยงามและตรงตามความต้องการของลูกค้า ในขั้นตอนการออกแบบนี้จะทำให้เราสามารถนำความต้องการ (Requirement) จากลูกค้ามาแปลงเป็นชิ้นงาน และนำไปเสนอเพื่อให้เห็นภาพตรงกันทั้ง 2 ฝ่าย ก่อนที่จะได้นำแบบที่สมบูรณ์ส่งให้ทีมพัฒนา (developer team) ทำงานต่อไปได้อย่างถูกต้องและรวดเร็ว
ซึ่งในหลักสูตรนี้จะเป็นการปูพื้นฐานสำหรับมือใหม่ทุกคนในการออกแบบที่ดี (best practice) ที่แนะนำ โดยใช้เครื่องมือออกแบบยอดนิยมแห่งยุคอย่าง Adobe Figma ที่สามารถเริ่มต้นใช้งานได้ฟรี มี Plugin และ Template จากเหล่าดีไซน์เนอร์มากมายให้เลือกสรรค์ นอกจากนี้ผู้เรียนจะได้นำดีไซน์ที่ออกแบบเสร็จแล้วไปขึ้นทำเว็บจริงๆ ผ่าน WordPress CMS และ Plugin ออกแบบใน WordPress ยอดนิยมอย่าง Elementor ที่ใช้งานง่าย เพียงแค่ลากวาง ก็จะสามารถสร้างเว็บไซต์สวยๆ จาก Figma ได้อ่ยางรวดเร็ว และยังรองรับการแสดงผลแบบ Responsive อีกด้วย
หลักสูตรนี้พร้อมเรียนรู้ สามารถทักไลน์ด้านล่างเพื่อสั่งซื้อวิดีโอการอบรมได้ทันที
ผู้เรียนต้องมีพื้นฐานอะไรบ้าง ?
- พื้นฐานการใช้งานอินเตอร์เน็ต
- ไม่จำเป็นต้องเขียนโปรแกรมเป็น
- ไม่จำเป็นต้องออกแบบเป็น
- คอร์สนี้เป็นการออกแบบและใช้เครื่องมือพร้อม Plugin สำเร็จรูปแบบลากวาง ดังนั้นจะไม่มีการเขียนโค้ดดิ้งใด ๆ
คอมพิวเตอร์และโปรแกรมที่รองรับการพัฒนา
- รองรับ Windows 7, 8 ,10, 11
- รองรับ MacOS
- รองรับ Linux OS
โปรโมชั่นราคาพิเศษ
- สำหรับ 50 ท่านแรกราคา 200 บาท
- และลำดับที่ 51 เป็นต้นไปที่ราคา 300 บาทเท่านั้นครับ
จากราคาเต็มปกติ 3,000 บาท
ราคานี้ให้เฉพาะนามรายบุคคล ถ้าจะรับใบกำกับภาษี (เฉพาะรายบุคคล และ นามบริษัท จะต้องจ่ายราคาคอร์สอบรมเต็มจำนวน รวมถึงภาษี มูลค่าเพิ่ม 7%)
การอบรมในหลักสูตรนี้เป็นการสอนสดออนไลน์ ผ่านโปรแกรม Zoom Meeting และมีการบันทึกการอบรมส่งให้ดูย้อนหลังทั้งหลักสูตรครับ
กำหนดการอบรม
- วันที่ 23-24 มีนาคม (2 วัน) เวลา 20:00-23.30
- อบรมรวม 2 วัน เฉลี่ยวันละ 3.5 ชั่วโมง
- ระยะเวลารวมทั้งหลักสูตร 7 ชั่วโมง
รอบการเปิดอบรม
อบรมออนไลน์ (สอนสด)
- 23 - 24 มีนาคม 2023
วิทยากรผู้สอน
อาจารย์สามิตร โกยมระยะเวลาในการอบรม
- 7 ชั่วโมง
ภาพรวมหัวข้อการอบรม
เนื้อหาการอบรม
ภาพรวมหัวข้อการอบรม
- 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
