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

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

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

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

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

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

ปกติราคาหลักสูตรนี้ด้วยระยะเวลาและเนื้อหาที่นำมาสอนจะมีราคาเต็มอยู่ประมาณ 3,000 กว่าบาท แต่ทางทีมงานของสถาบันนำมาจัดราคารุ่นออนไลน์ ด้วยราคาพิเศษ สำหรับ 50 ท่านแรกราคา 199 บาทและ ท่านที่ 21 เป็นต้นไปที่ราคา 399 บาทเท่านั้นครับ

การอบรมในหลักสูตรนี้เป็นการสอนสดออนไลน์ ผ่านโปรแกรม cisco webex conference และมีการบันทึกการอบรมส่งให้ดูย้อนหลังทั้งหลักสูตรครับ

กำหนดการณ์อบรม

  • วันที่ 6-7 กุมภาพันธ์ 2564 เวลา 20:30-23.30
  • อบรมเฉลี่ยวันละ 3 ชั่วโมง
  • ระยะเวลารวมทั้งหลักสูตร 6 ชั่วโมง
อบรมออนไลน์ (สอนสด)
  • 6 - 7 กุมภาพันธ์ 2021
  • 6 ชั่วโมง

ภาพรวมหัวข้อการอบรม

ภาพตัวอย่าง Workshop ที่เราจะมาลองออกแบบกัน

หมายเหตุ : แจกฟรี Template bootstrap 5 ที่ผ่านการ custom จากผมบางส่วนมาแล้ว

วันแรก

แนวทางการออกแบบเว็บและการใช้โปรแกรม 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 อื่น ๆ เช่น Reactjs และ Angular , Vue ต่อไป

6 ชั่วโมง

ราคา 399 บาท

ลงทะเบียนแล้ว

133 คน

สั่งซื้อวิดีโอบันทึกการอบรม
ติดต่อตามข้อมูลด้านล่างนี้