ออกแบบเว็บสมัยใหม่ด้วย 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 16 ขั้นสูง

Advanced Angular 16 ขั้นสูง

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

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

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

30/11/2024 02:22:03