อาจารย์สามิตร โกยมออกแบบเว็บสมัยใหม่ด้วย Tailwind CSS 3.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 9 ร่วมกับ Vue.js 3 Tailwind CSS 3 และ 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...
อัพเดทข้อมูลเมื่อ
03/05/2023 14:55:36
