ออกแบบเว็บสมัยใหม่ด้วย Adobe XD ร่วมกับ Bootstrap 5

รายละเอียด Course ID: gpc-31

ออกแบบเว็บสมัยใหม่ด้วย Adobe XD ร่วมกับ Bootstrap 5

การออกแบบเว็บสมัยใหม่ ไม่ได้แค่ต้องการความสวยงามเพียงอย่างเดียวอีกต่อไป แต่การออกแบบที่ดียังต้องคำนึงถึงหลายเหตุปัจจัยประกอบด้วย ไม่ว่าจะเป็นเรื่องของการแสดงผลอุปกรณ์พกพา (mobile, tablet) โดยต้องออกแบบให้มีลักษณะเป็น Responsive web

เรื่องของความเร็วก็เป็นอีกองค์ประกอบสำคัญไม่แพ้กัน เว็บสวยแต่เข้าใช้งานได้ช้า ก็อาจถูกทอดทิ้งไว้ข้างหลังได้ นอกจากการเลือกใช้แนวทางในการออกแบบเว็บ นักพัฒนาและนักออกแบบจึงต้องใส่ใจในเรื่องความเร็วของเว็บในการเรียกใช้งานด้วย

เริ่มต้นจากเล่าแนวคิดในการออกแบบ แล้วพาไปใช้เครื่องมือออกแบบยอดนิยมอย่าง Adobe XD ที่ง่ายสำหรับมือใหม่ จากนั้นนำสิ่งที่ออกแบบเสร็จแล้วไปขึ้นโครงเว็บกันจริงๆ ด้วย Bootstrap 5 ซึ่งเป็นเวอร์ชั่นล่าสุดที่เน้นความเบา และเร็วขึ้นกว่าเดิมเยอะ

รอบการเปิดอบรม

สาขากรุงเทพฯ (ลาดพร้าว)
  • ยังไม่มีรอบเปิดอบรม (ลงชื่อจองไว้ได้)

ไฟล์รายละเอียดคอร์ส

วัตถุประสงค์

  • เข้าใจแนวทางการออกแบบเว็บสมัยใหม่
  • สามารถสร้าง Slide ภาพแบบไม่ต้องมี jQuery
  • สามารถทำ Prototype เชื่อมโยงหน้าเว็บเพจใน Adobe XD ได้
  • สามารถจัดวาง layout แบบต่างๆ ใน Adobe XD ได้
  • สามารถเขียน CSS ทำการ custom หน้าตาของ bootstrap ตามต้องการ

กลุ่มเป้าหมาย

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

ความรู้พื้นฐาน

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

ระยะเวลาในการอบรม

  • 6 ชั่วโมง

ราคาคอร์สอบรม

  • ราคาปกติ 3,500 บาท / คน
  • โปรโมชั่นลด 10% เหลือ 3,150 บาท / คน
  • ราคาเหมาจ่าย (ผู้อบรมตั้งแต่ 10 คน) ตามแต่ตกลงกัน
  • ขอใบเสนอราคา

วิทยากรผู้สอน

คอร์สที่ควรอบรมก่อนหน้า

คอร์สต่อเนื่องที่แนะนำ

เนื้อหาการอบรม

แนวทางการออกแบบเว็บและการใช้โปรแกรม Adobe XD

  • แนวทางการออกแบบเว็บสมัยใหม่
  • รู้จักการออกแบบ wireframe ก่อนเริ่มออกแบบจริง
  • แนะนำโปรแกรม Adobe XD สำหรับการออกแบบเว็บ
  • เครื่องมือพื้นฐานที่ทุกคนควรรู้จักใน Adobe XD
  • เรียนรู้การจัดวาง layout แบบต่างๆ ใน Adobe XD
  • การสร้างชุดเมนู เส้นโค้ง จัดกลุ่มวัตถุ และการทำ masking เพื่อรวมรูปต่างๆ
  • การทำ Prototype เชื่อมโยงหน้าเว็บเพจใน Adobe XD
  • การใส่ Animation และ Transition ต่างๆ ในการเปลี่ยนหน้า
  • การสร้างชุด Assets ไว้ใช้งานปรับคุณสมบัติให้วัตถุครั้งเดียวได้ทั้งหมด
  • การ Export ไฟล์ออกแบบไปใช้งานใน Bootstrap 5 กันต่อไป

 

การออกแบบเว็บสมัยใหม่ด้วย Bootstrap 5

  • ความเปลี่ยนแปลงใหม่ใน Bootstrap 5
  • เริ่มต้นใช้งานอย่างง่าย
  • เรียนรู้การวาง layout อย่างง่ายใน Bootstrap 5
  • การออกแบบเว็บด้วย flex box ใน Bootstrap 5
  • การสร้างเมนูนำทางอย่างรวดเร็ว
  • การสร้าง Slide ภาพแบบไม่ต้องมี jQuery
  • การทำงานกับแบบฟอร์ม
  • การทำงานกับตาราง
  • การทำงานกับ popup modal แบบใหม่ ไม่ต้องใช้ jQuery
  • การใช้งาน Components พื้นฐาน เช่น Alert, Badge, Button, Card, List, Tooltips เป็นต้น
  • การเขียน CSS ทำการ custom หน้าตาของ bootstrap ตามต้องการ
  • การทดสอบและปรับแต่งความเร็วในการใช้งานของเว็บที่ออกแบบมาให้เหมาะสมกับการนำไปใช้งานจริง
  • เรียนรู้การน้ำ Bootstrap ไปใช้งานกับ Framework อื่นๆ เช่น React JS และ Angular, Vue ต่อไป

แนะนำหลักสูตรที่น่าสนใจ

Basic React JS สำหรับผู้เริ่มต้น
ดูข้อมูลเพิ่มเติม
Basic Vue.js 3 สำหรับผู้เริ่มต้น
ดูข้อมูลเพิ่มเติม
Advanced React JS (ขั้นสูง)

Advanced React JS (ขั้นสูง)

ในหลักสูตรนี้เป็นการต่อยอดเนื้อหาจากหลักสูตร React JS Basic สำหรับผู้เริ่มต้น เพื่อให้ผ...

ดูข้อมูลเพิ่มเติม
Advanced Vue.JS 3 ขั้นสูง

Advanced Vue.JS 3 ขั้นสูง

แนวทางการออกแบบและพัฒนาเว็บสมัยใหม่เน้นไปทางรูปแบบ Single Page Application (SPA) คือการ...

ดูข้อมูลเพิ่มเติม
Advanced Angular 18 ขั้นสูง

Advanced Angular 18 ขั้นสูง

หลักสูตรขั้นสูงใน Angular นี้ออกแบบมาสำหรับผู้ที่ต้องการพัฒนา Application ด้วย Angular...

ดูข้อมูลเพิ่มเติม

คำถามที่พบบ่อย (FAQ)

คอร์ส ออกแบบเว็บสมัยใหม่ด้วย Adobe XD ร่วมกับ Bootstrap 5 เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

ดูรายละเอียดกลุ่มเป้าหมายและพื้นฐานที่ต้องมีได้ในหัวข้อ "กลุ่มเป้าหมาย" และ "พื้นฐานที่ผู้เรียนต้องมี" บนหน้านี้ หากไม่แน่ใจว่าพื้นฐานพอหรือไม่ ปรึกษาทีมงานได้ฟรีทาง LINE @itgenius หรือโทร 02-570-8449

คอร์ส ออกแบบเว็บสมัยใหม่ด้วย Adobe XD ร่วมกับ Bootstrap 5 ราคาเท่าไร ใช้เวลาเรียนกี่ชั่วโมง

ราคาปกติ 3,500 บาท (โปรโมชันปัจจุบันเหลือ 3,150 บาท) ใช้เวลาอบรม 6 ชั่วโมง ราคานี้รวมเอกสารประกอบการอบรม อาหารกลางวัน และอาหารว่างตลอดหลักสูตร

เรียนจบได้รับ Certificate หรือไม่

ได้รับ ผู้ผ่านการอบรมทุกท่านจะได้รับใบประกาศนียบัตร (Certificate of Completion) จากสถาบันไอทีจีเนียส

อบรมที่ไหน มีเรียนแบบออนไลน์หรือไม่

อบรมแบบ Onsite ที่สถาบันไอทีจีเนียส สาขาลาดพร้าววังหิน 68 กรุงเทพฯ และมีบริการจัดอบรมนอกสถานที่ (In-house Training) สำหรับองค์กร บางหลักสูตรมีเวอร์ชันเรียนออนไลน์ผ่าน GeniusHub ดูได้ที่เมนูคอร์สออนไลน์

ถ้าเรียนไม่ทันหรือขาดเรียน มีเรียนซ้ำ/เรียนชดเชยหรือไม่

มี ผู้เรียนสามารถแจ้งขอเรียนซ้ำ (repeat) ในรอบถัดไปของหลักสูตรเดียวกันได้ฟรีตามเงื่อนไขของสถาบัน ดูรายละเอียดที่หน้า "เรียนซ้ำฟรี" หรือสอบถามทีมงาน

สมัครเรียนหรือขอใบเสนอราคาในนามบริษัทได้อย่างไร

สมัครออนไลน์ได้จากแบบฟอร์มลงทะเบียนบนหน้านี้ หรือขอใบเสนอราคา (Quotation) ในนามนิติบุคคลได้ทันทีจากปุ่ม "ขอใบเสนอราคา" สอบถามเพิ่มเติมโทร 02-570-8449 หรือ LINE @itgenius

อัพเดทข้อมูลเมื่อ