อาจารย์สามิตร โกยมออกแบบเว็บสมัยใหม่ด้วย Tailwind CSS 4.0
การออกแบบเว็บไซต์หรือเว็บแอพจำเป็นต้องมีพื้นฐานทั้งภาษา HTML และ CSS โดยทั่วไปแล้วนักออ...
ออกแบบเว็บด้วย Figma ร่วมกับ WordPress
รายละเอียด Course ID: gpc-36
หลักสูตรนี้จะเป็นการปูพื้นฐานสำหรับมือใหม่ทุกคนในการออกแบบที่ดี (best practice) ที่แนะนำ โดยใช้เครื่องมือออกแบบยอดนิยมแห่งยุคอย่าง Adobe Figma ที่สามารถเริ่มต้นใช้งานได้ฟรี มี Plugin และ Template จากเหล่าดีไซน์เนอร์มากมายให้เลือกสรรค์ นอกจากนี้ผู้เรียนจะได้นำดีไซน์ที่ออกแบบเสร็จแล้วไปขึ้นทำเว็บจริงๆ ผ่าน WordPress CMS และ Plugin ออกแบบใน WordPress ยอดนิยมอย่าง Elementor ที่ใช้งานง่าย เพียงแค่ลากวาง ก็จะสามารถสร้างเว็บไซต์สวยๆ จาก Figma ได้อย่างรวดเร็ว และยังรองรับการแสดงผลแบบ Responsive อีกด้วย
รอบการเปิดอบรม
ไฟล์รายละเอียดคอร์ส
- ออกแบบเว็บด้วย Figma ร่วมกับ WordPress (Course outline PDF)
- โปรไฟล์ของบริษัทไอทีจีเนียส เอ็นจิเนียริ่ง (โปรไฟล์ไอทีจีเนียส PDF)
วัตถุประสงค์
- เข้าใจแนวทางการออกแบบเว็บสมัยใหม่
- สามารถใช้ Adobe Figma ในการออกแบบ WordPress ได้
- สามารถจัดวาง layout แบบต่างๆ ใน Adobe Figma ได้
- สามารถวางองค์ประกอบหน้าเว็บ WordPress ตามที่ออกแบบใน Adobe Figma ได้
กลุ่มเป้าหมาย
- ผู้ที่ต้องการออกแบบเว็บด้วยการใช้โปรแกรม Adobe Figma
- UX/UI designer
- กลุ่มผู้สนใจทั่วไป
ความรู้พื้นฐาน
- สามารถใช้งานระบบคอมพิวเตอร์และอินเทอร์เน็ตได้
ระยะเวลาในการอบรม
- 6 ชั่วโมง
ราคาคอร์สอบรม
- ราคาปกติ 3,500 บาท / คน
- โปรโมชั่นลด 10% เหลือ 3,150 บาท / คน
- ราคาเหมาจ่าย (ผู้อบรมตั้งแต่ 10 คน) ตามแต่ตกลงกัน
- ขอใบเสนอราคา
วิทยากรผู้สอน
เนื้อหาการอบรม
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 กับเครื่องมือและบริการอื่น ๆ เพื่อการออกแบบเว็บไซต์ที่สมบูรณ์ยิ่งขึ้น
แนะนำหลักสูตรที่น่าสนใจ
Laravel 11 ร่วมกับ Vue.JS 3 Tailwind CSS 4 และ Livewire
ในการพัฒนาเว็บแอปพลิเคชันสมัยใหม่นั้น ความต้องการของผู้ใช้ (User) มีความหลากหลายมากขึ้น...
Basic Responsive Web Design with Bootstrap 5
การพัฒนาเว็บไซต์สมัยใหม่ มีความต้องการให้รองรับการแสดงผลบน Mobile, Tablet และ Desktop ไ...
ออกแบบเว็บสมัยใหม่ด้วย Figma ร่วมกับ Bootstrap 5
การออกแบบเว็บสมัยใหม่ ไม่ได้แค่ต้องการความสวยงามเพียงอย่างเดียวอีกต่อไป แต่การออกแบบที่...
ออกแบบเว็บสมัยใหม่ด้วย Photoshop ร่วมกับ Bootstrap 5
การออกแบบเว็บสมัยใหม่ ไม่ได้แค่ต้องการความสวยงามเพียงอย่างเดียวอีกต่อไป แต่การออกแบบที่...
Figma to HTML&CSS workshop
หลักสูตรนี้จะแนะนำตั้งแต่พื้นฐานการเขียน HTML, CSS เพื่อนำมาประยุกต์ใช้ใน Bootstrap 5.x...
คำถามที่พบบ่อย (FAQ)
คอร์ส ออกแบบเว็บด้วย Figma ร่วมกับ WordPress เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน
ดูรายละเอียดกลุ่มเป้าหมายและพื้นฐานที่ต้องมีได้ในหัวข้อ "กลุ่มเป้าหมาย" และ "พื้นฐานที่ผู้เรียนต้องมี" บนหน้านี้ หากไม่แน่ใจว่าพื้นฐานพอหรือไม่ ปรึกษาทีมงานได้ฟรีทาง LINE @itgenius หรือโทร 02-570-8449
คอร์ส ออกแบบเว็บด้วย Figma ร่วมกับ WordPress ราคาเท่าไร ใช้เวลาเรียนกี่ชั่วโมง
ราคาปกติ 3,500 บาท (โปรโมชันปัจจุบันเหลือ 3,150 บาท) ใช้เวลาอบรม 6 ชั่วโมง ราคานี้รวมเอกสารประกอบการอบรม อาหารกลางวัน และอาหารว่างตลอดหลักสูตร
เรียนจบได้รับ Certificate หรือไม่
ได้รับ ผู้ผ่านการอบรมทุกท่านจะได้รับใบประกาศนียบัตร (Certificate of Completion) จากสถาบันไอทีจีเนียส
อบรมที่ไหน มีเรียนแบบออนไลน์หรือไม่
อบรมแบบ Onsite ที่สถาบันไอทีจีเนียส สาขาลาดพร้าววังหิน 68 กรุงเทพฯ และมีบริการจัดอบรมนอกสถานที่ (In-house Training) สำหรับองค์กร บางหลักสูตรมีเวอร์ชันเรียนออนไลน์ผ่าน GeniusHub ดูได้ที่เมนูคอร์สออนไลน์
ถ้าเรียนไม่ทันหรือขาดเรียน มีเรียนซ้ำ/เรียนชดเชยหรือไม่
มี ผู้เรียนสามารถแจ้งขอเรียนซ้ำ (repeat) ในรอบถัดไปของหลักสูตรเดียวกันได้ฟรีตามเงื่อนไขของสถาบัน ดูรายละเอียดที่หน้า "เรียนซ้ำฟรี" หรือสอบถามทีมงาน
สมัครเรียนหรือขอใบเสนอราคาในนามบริษัทได้อย่างไร
สมัครออนไลน์ได้จากแบบฟอร์มลงทะเบียนบนหน้านี้ หรือขอใบเสนอราคา (Quotation) ในนามนิติบุคคลได้ทันทีจากปุ่ม "ขอใบเสนอราคา" สอบถามเพิ่มเติมโทร 02-570-8449 หรือ LINE @itgenius
