การออกแบบ UI/UX บนเว็บและมือถือ: จาก Figma ไปยัง HTML และ CSS

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

4.4 (1,407) ⏱ 47 นาที 📚 4 บทเรียน 🎧 เวอร์ชันเสียง

เกี่ยวกับคอร์สนี้

ผลิตภัณฑ์ดิจิทัลที่ดีเริ่มต้นด้วยประสบการณ์ของผู้ใช้ที่โดดเด่นและการออกแบบส่วนติดต่อผู้ใช้ ความเข้าใจในการเปลี่ยนแปลงการออกแบบเหล่านั้นให้เป็นรูปแบบการทำงานของเวบไซต์ช่วยลดช่องว่างระหว่างวิสัยทัศน์เชิงสร้างสรรค์และความเป็นจริงทางเทคนิค หลักสูตรนี้จะนำคุณไปสู่หลักการพื้นฐานของการออกแบบ UI/ UX เพื่อให้คุณสามารถสร้างการจัดวางแบบมืออาชีพสำหรับเว็บและอุปกรณ์เคลื่อนที่ได้ คุณจะเรียนรู้กลไกของ Figma เรียนรู้กระบวนการออกแบบตั้งแต่การวางรางเส้นแรกจนถึงการจัดวางแบบที่เรียบง่าย และเรียนรู้ทักษะพื้นฐานของ HTML และ CSS ที่จำเป็นในการสื่อสารอย่างมีประสิทธิภาพกับนักพัฒนาหรือสร้างหน้าเว็บที่ตอบสนองได้เอง คุณจะเรียนรู้อะไร - เข้าใจหลักการพื้นฐานของ User Experience (UX) และ User Interface (UI) การออกแบบ รวมถึงลำดับชั้นของภาพ, รูปแบบตัวอักษร, และทฤษฎีสี - เรียนรู้พื้นฐานของฟิคมา รวมถึงกรอบ, รูปแบบอัตโนมัติ, ส่วนประกอบที่ใช้ได้อีกครั้ง, และข้อจำกัดในการออกแบบที่ตอบสนอง - สร้างการไหลของผู้ใช้ ภาพสายไฟความละเอียดต่ำ และภาพสายไฟความละเอียดสูง - ใช้มาตรฐานการเข้าถึงสมัยใหม่ เพื่อมั่นใจว่าการออกแบบดิจิทัลของคุณ จะเป็นการรวมและใช้ได้สูง - แปลรูปแบบการออกแบบให้เป็นโครงสร้าง HTML ที่มีความหมาย และรูปแบบ CSS ที่ตอบสนองได้ คุณจะเริ่มต้นด้วยการเรียนรู้ศัพท์พื้นฐานในการออกแบบและจิตวิทยาของผู้ใช้ก่อนที่จะพัฒนาไปสู่เทคนิคการใช้งาน Figma สุดท้าย คุณจะสำรวจการแปลออกแบบเป็นโค้ด เรียนรู้วิธีการสร้างโครงสร้างการจัดวางด้วย CSS และ HTML สมัยใหม่ หลักสูตรนี้ถูกออกแบบมาสำหรับผู้เริ่มต้นที่ต้องการจะเข้าสู่สาขาการออกแบบ และนักพัฒนาที่ต้องการพัฒนาทักษะการออกแบบภาพ โดยไม่ต้องมีประสบการณ์การออกแบบหรือเขียนโค้ดมาก่อน เริ่มอ่านวันนี้และก้าวแรกของคุณไปสู่การออกแบบที่สวยงาม ประสบการณ์ดิจิทัลที่ทำงานได้

สิ่งที่คุณจะได้รับ

  • 📜 ใบประกาศนียบัตร
    เพิ่มในโปรไฟล์ LinkedIn ของคุณ
  • 🎧 รวมเวอร์ชันเสียง
    เรียนได้ทุกที่ ไม่ต้องดูจอ
  • ♾️ เข้าถึงตลอดชีพ
    กลับมาเรียนได้ตลอด ไม่มีหมดอายุ
  • 📱 โทรศัพท์หรือคอมพิวเตอร์
    ใช้งานได้ทุกที่ ทุกอุปกรณ์
  • 💸 คืนเงิน 30 วัน
    ไม่ต้องอธิบาย
  • กระชับและตรงประเด็น
    47 นาที เนื้อหาเชิงปฏิบัติ

รีวิว (7)

Mia Hall AU
★ 5 · 2025-12-09T14:09:51+00:00

นี่คือสิ่งที่ฉันกำลังมองหา รักตัวอย่างการปฏิบัติ พวกเขาช่วยให้แนวคิดแข็งแรงจริงๆ

วิชัย เกษมสุข TH
★ 4 · 2025-09-19T01:05:51+00:00

สนุกกับประสบการณ์การเรียนรู้มาก วัสดุที่ให้มาดีเยี่ยมและตามง่าย

سهام DZ ผู้เรียนที่ยืนยันแล้ว
★ 5 · 2025-08-01T01:26:51+00:00

คอร์สนี้เกินความคาดหมายไปมากเลยค่ะ การประยุกต์ใช้ในโลกจริงที่พูดถึงมีประโยชน์อย่างเหลือเชื่อ ทำได้ดีมากค่ะ!

Camila Sánchez CO
★ 4 · 2025-04-16T19:35:51+00:00

เป็นการแนะนำที่ดี โครงสร้างส่วนใหญ่ชัดเจนดี แต่ก็อยากให้มีตัวอย่างในโลกจริงมากกว่านี้หน่อย แต่ก็ได้เรียนรู้อะไรเยอะเลย

Elżbieta Szymańska PL
★ 5 · 2025-04-12T05:37:51+00:00

การออกแบบคอร์สยอดเยี่ยมมาก แนวคิดต่างๆ เชื่อมโยงกันได้อย่างลงตัว ใช้งานได้จริงและอธิบายได้ดีมาก

Марія Лисенко UA ผู้เรียนที่ยืนยันแล้ว
★ 5 · 2025-04-04T10:49:51+00:00

ว้าว ประทับใจมาก การนำไปใช้จริงที่แสดงให้เห็นมีประโยชน์มาก ทำให้แนวคิดที่เป็นนามธรรมจับต้องได้ คุ้มค่ามาก!

سعاد DZ
★ 3 · 2025-02-27T17:47:51+00:00

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

เขียนรีวิว

หลังจากส่ง เราจะขอให้คุณเข้าสู่ระบบ — ฉบับร่างของคุณถูกบันทึก

ผู้เรียนคนอื่นเรียน

พื้นฐานการออกแบบเว็บ: สร้างเว็บไซต์สมัยใหม่ที่ตอบสนองได้Name

เรียนรู้หลักการของการออกแบบเว็บสมัยใหม่ เรียนรู้การออกแบบ ด้วย Figma และสร้างเว็บไซต์ที่ตอบสนองได้ดี ผ่านบทเรียนที่เขียนขึ้นมาอย่างละเอียด
★ 5.0 (7,121)
$4.99$9.99

พื้นฐาน Figma สำหรับการออกแบบเว็บไซต์สมัยใหม่

เรียนรู้การสร้างเลย์เอาต์เว็บไซต์ระดับมืออาชีพและต้นแบบเชิงโต้ตอบโดยใช้เครื่องมือหลักของ Figma และเวิร์กโฟลว์การออกแบบที่ทันสมัย
★ 5.0 (20)
$4.99$9.99

การออกแบบ UI ที่ตอบสนองด้วย Figma

เรียนรู้วิธีสร้างอินเทอร์เฟซที่ยืดหยุ่นและใช้งานง่าย ซึ่งปรับให้เข้ากับขนาดหน้าจอได้อย่างราบรื่นโดยใช้ Figma
★ 4.9 (18)
$4.99$9.99

ออกแบบและสร้างเว็บพอร์ตโฟลิโอที่ตอบสนองด้วย Figma และ AI

เรียนรู้การออกแบบและพัฒนาเว็บพอร์ตโฟลิโอที่ตอบสนองของคุณเองตั้งแต่เริ่มต้น โดยใช้ Figma สำหรับ UI/UX และรวมเครื่องมือ AI เพื่อปรับปรุงขั้นตอนการทำงานของคุณ
★ 4.9 (19)
$4.99$9.99

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

ฉันต้องใช้อะไรในการเรียนคอร์สนี้? +

แค่โทรศัพท์หรือคอมพิวเตอร์ที่มีอินเทอร์เน็ต ไม่ต้องติดตั้งหรือใช้อุปกรณ์พิเศษ

ฉันชำระเงินอย่างไร? +

ผ่านบัตรด้วย Stripe หรือคริปโต เราไม่เก็บข้อมูลบัตร — Stripe จัดการอย่างปลอดภัย

ฉันขอคืนเงินได้ไหม? +

ใช่ — คืนเงินเต็มจำนวนใน 30 วัน ไม่ต้องอธิบาย

ฉันมีสิทธิ์เข้าถึงนานเท่าไร? +

ตลอดไป เมื่อซื้อแล้วคอร์สเป็นของคุณ กลับมาเรียนได้ตลอด

ฉันจะได้ใบประกาศนียบัตรไหม? +

ได้ เมื่อเรียนจบจะได้รับใบประกาศนียบัตรที่เพิ่มในโปรไฟล์ LinkedIn ได้

ออกแบบสำหรับผู้เรียนใน
เทคโนโลยี ดีไซน์ การเงิน การตลาด สาธารณสุข การศึกษา ธุรกิจการบริการ อุตสาหกรรม