Graphic Design · GPC-36

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

6 hours 1 days
Last updated

ออกแบบเว็บด้วย Figma ร่วมกับ WordPress is a 6-hour training course by IT Genius Institute. หลักสูตรนี้จะเป็นการปูพื้นฐานสำหรับมือใหม่ทุกคนในการออกแบบที่ดี (best practice) ที่แนะนำ โดยใช้เครื่องมือออกแบบยอดนิยมแห่งยุคอย่าง Adobe Figma…

Training schedule

No public rounds are open right now — register your interest and we will contact you when the next round opens, or request an in-house session for your team.

Corporate training quote

ออกแบบเว็บด้วย Figma ร่วมกับ WordPress หลักสูตรนี้จะเป็นการปูพื้นฐานสำหรับมือใหม่ทุกคนในการออกแบบที่ดี (best practice) ที่แนะนำ โดยใช้เครื่องมือออกแบบยอดนิยมแห่งยุคอย่าง Adobe Figma ที่สามารถเริ่มต้นใช้งานได้ฟรี มี Plugin และ Template จากเหล่าดีไซน์เนอร์มากมายให้เลือกสรรค์ นอกจากนี้ผู้เรียนจะได้นำดีไซน์ที่ออกแบบเสร็จแล้วไปขึ้นทำเว็บจริงๆ ผ่าน WordPress CMS และ Plugin ออกแบบใน WordPress ยอดนิยมอย่าง Elementor ที่ใช้งานง่าย เพียงแค่ลากวาง ก็จะสามารถสร้างเว็บไซต์สวยๆ จาก Figma ได้อย่างรวดเร็ว และยังรองรับการแสดงผลแบบ Responsive อีกด้วย

Objectives

  • เข้าใจแนวทางการออกแบบเว็บสมัยใหม่
  • สามารถใช้ Adobe Figma ในการออกแบบ WordPress ได้
  • สามารถจัดวาง layout แบบต่างๆ ใน Adobe Figma ได้
  • สามารถวางองค์ประกอบหน้าเว็บ WordPress ตามที่ออกแบบใน Adobe Figma ได้

Who this course is for

  • ผู้ที่ต้องการออกแบบเว็บด้วยการใช้โปรแกรม Adobe Figma
  • UX/UI designer
  • กลุ่มผู้สนใจทั่วไป

Prerequisites

  • สามารถใช้งานระบบคอมพิวเตอร์และอินเทอร์เน็ตได้

Curriculum

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 กับเครื่องมือและบริการอื่น ๆ เพื่อการออกแบบเว็บไซต์ที่สมบูรณ์ยิ่งขึ้น

Frequently asked questions

Who is ออกแบบเว็บด้วย Figma ร่วมกับ WordPress for, and what background is needed?

Built for ผู้ที่ต้องการออกแบบเว็บด้วยการใช้โปรแกรม Adobe Figma · UX/UI designer · กลุ่มผู้สนใจทั่วไป Background you should have: สามารถใช้งานระบบคอมพิวเตอร์และอินเทอร์เน็ตได้ Not sure the fit is right? Talk to our team on LINE @itgenius or call 02-570-8449.

How much does ออกแบบเว็บด้วย Figma ร่วมกับ WordPress cost and how long does it run?

THB 3,500 (currently THB 3,150 on promotion). The course runs 6 hours. The fee covers course materials, lunch and refreshments throughout. Pay by bank transfer to the company account, confirm it on our payment page, and we can issue the receipt or tax invoice in your company's name.

Do I get a certificate?

Yes. Everyone who completes the course receives a Certificate of Completion from IT Genius Institute. Each certificate carries its own number, and anyone holding that number can verify it online on our certificate page, so you can add it to your portfolio or pass it to HR as evidence of training.

Where does the training take place, and is there an online option?

You can attend onsite at IT Genius Institute or arrange to join online, and we also run it as a private in-house session for your team. Ask about dates and venues on LINE @itgenius or call 02-570-8449.

What if I fall behind or miss a session — can I retake it?

Yes. You may retake the same course free of charge in a later round, under the institute's conditions. Tell our team which course and round you attended, and we will check it and offer you the rounds that still have seats. Ask us on LINE @itgenius or call 02-570-8449.

How do I enrol, or request a quotation for my company?

Enrol online with the registration form on this page. You can register several attendees at once and enter your tax ID and billing address for the tax invoice. Or request a company quotation straight from the quote button. For anything else call 02-570-8449 or reach us on LINE @itgenius.

Instructors

Run this course for your whole team

We run this course in-house, tailored to your stack.

Corporate training quote