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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 6 ชั่วโมง

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

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

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

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

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

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

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

  • แนวทางการออกแบบเว็บสมัยใหม่
  • รู้จักการออกแบบ wireframe ก่อนเริ่มออกแบบจริง
  • แนะนำโปรแกรม Figma สำหรับการออกแบบเว็บ
  • เครื่องมือพื้นฐานที่ทุกคนควรรู้จักใน Figma
  • เรียนรู้การจัดวาง layout แบบต่างๆ ใน Figma
  • การสร้างชุดเมนู เส้นโค้ง จัดกลุ่มวัตถุ และการทำ masking เพื่อรวมรูปต่างๆ
  • การทำ Prototype เชื่อมโยงหน้าเว็บเพจใน Figma
  • การใส่ 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 HTML+CSS (คอร์สเขียนเว็บพื้นฐาน)
ดูข้อมูลเพิ่มเติม
Basic JavaScript

Basic JavaScript

JavaScript นับว่าเป็นภาษาที่เข้ามาช่วยเติมลูกเล่นและเทคนิคต่าง ๆ บนเว็บไซต์ของเรา การใช...

ดูข้อมูลเพิ่มเติม
การตกแต่งภาพด้วยโปรแกรม Adobe Photoshop
ดูข้อมูลเพิ่มเติม
HTML 5 CSS 3 and Bootstrap 5

HTML 5 CSS 3 and Bootstrap 5

การพัฒนาเว็บไซต์สมัยใหม่ มีความต้องการให้รองรับการแสดงผลบน Mobile, Tablet และ Desktop ไ...

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

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

24/02/2023 10:26:31