ออกแบบด้านกราฟิก · GPC-32

Website Design with Refactoring UI

หลักสูตร Website Design with Refactoring UI เป็นการอบรมปรับหน้าเว็บให้สวยและใช้ง่ายด้วยเทคนิคจากมุมมองนักพัฒนา ทั้งลำดับความสำคัญ ระบบระยะห่าง Type Scale ชุดสีด้วย HSL และ OKLCH เงา และ Design Token ด้วย CSS โดยไม่ต้องมีพื้นฐานศิลปะ เหมาะกับผู้ที่พัฒนาเว็บไซต์ด้วยตนเอง Frontend Developer และ UX/UI Designer

อัปเดตล่าสุด 9 ต.ค. 2569

ราคาเริ่มต้น 5,850 บาท / ท่าน 6,500 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา12 ชั่วโมง · 2 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

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

หลักสูตรนี้นำหลักการเหล่านั้นมาฝึกกับ CSS รุ่นปัจจุบัน ตั้งแต่ลำดับความสำคัญ ระยะห่างและ Layout ด้วย Grid กับ Flexbox, Type Scale ที่ปรับตามจอด้วย clamp() และ Design Token ด้วย CSS Custom Properties ไปจนถึงการสร้างชุดสีด้วย HSL และ OKLCH การตรวจ Contrast ตาม WCAG 2.2, Dark Mode ด้วย light-dark() การสร้างมิติด้วยเงา การจัดรูปภาพ และการเก็บรายละเอียด ปิดท้ายด้วย Workshop ปรับหน้าเว็บจริงแบบก่อนและหลัง (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner ถึง Intermediate)

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

อธิบายหลักคิดแบบ Refactoring UI และวิเคราะห์จุดที่ทำให้หน้าเว็บดูรกหรือใช้ยากได้
สร้างลำดับความสำคัญของข้อมูลด้วยขนาด น้ำหนัก สี และระยะห่างได้
กำหนดระบบระยะห่าง Type Scale และ Design Token ด้วย CSS Custom Properties ได้
สร้างชุดสีและเฉดเทาด้วย HSL และ OKLCH ที่ผ่านเกณฑ์ Contrast ตาม WCAG 2.2 ได้
ใช้เงา รูปภาพ และรายละเอียดอย่าง Empty State ให้หน้าเว็บมีมิติและอ่านง่าย
ปรับปรุงหน้าเว็บจริงทั้งหน้าอย่างเป็นระบบและอธิบายเหตุผลของการเปลี่ยนแปลงได้

หลักสูตรนี้เหมาะสำหรับ

ผู้ที่พัฒนาเว็บไซต์ด้วยตนเองและอยากให้หน้าเว็บดูเป็นมืออาชีพขึ้น
Frontend Developer และ Full-stack Developer ที่ต้องออกแบบหน้าจอเองโดยไม่มีนักออกแบบ
UX/UI Designer ที่ต้องการวางระบบ Design Token ที่นักพัฒนานำไปใช้ต่อได้
นักเรียน นักศึกษา และนักไอทีที่มีพื้นฐาน HTML และ CSS

พื้นฐานของผู้เข้าอบรม

เขียน HTML และ CSS เบื้องต้นได้ เช่น Selector, Box Model และ Flexbox
มีความรู้พื้นฐานการออกแบบเว็บไซต์มาบ้าง
ไม่จำเป็นต้องมีพื้นฐานด้านศิลปะหรือการออกแบบกราฟิก
โน้ตบุ๊กที่ติดตั้ง VS Code และเบราว์เซอร์รุ่นปัจจุบันได้

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตรการออกแบบเว็บไซต์ตามแนวทาง Refactoring UI เนื้อหาเขียนใหม่ให้ใช้เวลาทั้งหมดกับหลักการออกแบบ UI และ CSS รุ่นปัจจุบัน อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab บนโปรเจกต์ HTML และ CSS ตั้งต้น ระดับ Beginner ถึง Intermediate วันแรกฝึกลำดับความสำคัญ

ระยะห่างและ Layout ตัวอักษร และ Design Token วันที่สองฝึกชุดสีด้วย HSL และ OKLCH, Contrast ตาม WCAG 2.2, Dark Mode, เงา รูปภาพ และการเก็บรายละเอียด หลักสูตรนี้อ้างอิงแนวคิดจากหนังสือ Refactoring UI โดยสร้างแบบฝึกขึ้นใหม่ ไม่ใช่หลักสูตรทางการของผู้เขียน ผู้เรียนจะได้โปรเจกต์ที่ปรับแล้ว ไฟล์ tokens.css และ Checklist ตรวจหน้าเว็บกลับไปใช้งานต่อ

Day 1 ลำดับความสำคัญ ระยะห่าง และตัวอักษร

Section 1: Lab: หลักคิดแบบ Refactoring UI

Refactoring UI คืออะไร และทำไมนักพัฒนาออกแบบหน้าจอที่ดีได้โดยไม่ต้องมีพื้นฐานศิลปะ
เริ่มจากฟีเจอร์ก่อน Layout และร่างแบบเป็นสีเทาก่อนใส่สี
จำกัดตัวเลือกด้วยระบบ แทนการตัดสินใจใหม่ทุกครั้ง
เตรียมโปรเจกต์ตั้งต้นใน VS Code และใช้ DevTools ทดลองปรับ CSS
Lab: ตรวจหน้าเว็บตัวอย่างและจดปัญหาที่ทำให้ดูรกหรือใช้ยาก

Section 2: Lab: ลำดับความสำคัญของข้อมูล

สร้าง Hierarchy ด้วยน้ำหนักและสีของตัวอักษร แทนการขยายขนาดอย่างเดียว
เน้นสิ่งสำคัญด้วยการลดความเด่นของสิ่งรอบข้าง
ลด Label ที่ไม่จำเป็น และแยกความหมายของ HTML ออกจากลำดับการแสดงผล
ปุ่มหลัก ปุ่มรอง และปุ่มที่มีผลรุนแรง ควรต่างกันอย่างไร
Lab: ปรับการ์ดข้อมูลผู้ใช้และรายการสินค้าให้อ่านง่ายขึ้น

Section 3: Lab: ระบบระยะห่างและ Layout

Spacing Scale แบบจำกัดค่า และการเริ่มจากพื้นที่ว่างมากเกินไปก่อนแล้วค่อยลด
ระยะระหว่างกลุ่มต้องมากกว่าระยะภายในกลุ่ม เพื่อให้เห็นว่าอะไรอยู่ด้วยกัน
ไม่จำเป็นต้องใช้เต็มจอ: กำหนดความกว้างสูงสุดของเนื้อหาให้เหมาะ
จัด Layout ด้วย CSS Grid, Flexbox และ gap แบบ Responsive
Lab: จัดหน้าฟอร์มตั้งค่าและหน้ารายละเอียดใหม่ด้วย Spacing Scale

Section 4: Lab: ออกแบบตัวอักษร

Type Scale แบบจำกัดขนาด และ Fluid Type ด้วย clamp()
เลือกฟอนต์ที่อ่านง่าย รวมถึงฟอนต์ภาษาไทยที่มีหลายน้ำหนัก
ความยาวบรรทัดด้วยหน่วย ch, Line Height ตามขนาดตัวอักษร และการจัดแนว
Letter Spacing ของหัวข้อและตัวพิมพ์ใหญ่ และการออกแบบลิงก์
Lab: วาง Type Scale ให้บทความและหน้า Landing Page

Section 5: Lab: Design Token ด้วย CSS Custom Properties

Design Token คืออะไร: ระยะห่าง ขนาดตัวอักษร สี มุมโค้ง และเงา
ตั้งชื่อ Token ให้สื่อความหมายและใช้ร่วมกันทั้งทีม
ประกาศ Token ด้วย Custom Properties และเรียกใช้ทั้งเว็บ
เชื่อม Token กับ Variables ใน Figma หรือ Theme ของ Tailwind CSS
Lab: สร้างไฟล์ tokens.css และนำไปใช้กับหน้าตัวอย่าง

Day 2 สี มิติ รูปภาพ และการเก็บรายละเอียด

Section 6: Lab: สร้างชุดสีด้วย HSL และ OKLCH

ทำไม HSL และ OKLCH ใช้งานง่ายกว่า HEX เมื่อต้องปรับความอ่อนเข้ม
สร้างชุดเฉดของสีหลักราว 9 ถึง 10 ระดับ และสีสำหรับสถานะ
เฉดเทาที่มีโทนสีเล็กน้อยให้หน้าเว็บดูมีชีวิต
OKLCH, Relative Color และ color-mix() สำหรับสร้างเฉดในโค้ด
Lab: สร้างชุดสีของแบรนด์ตัวอย่างและแทนที่สีเดิมทั้งหน้า

Section 7: Lab: Contrast, Accessibility และ Dark Mode

เกณฑ์ Contrast ตาม WCAG 2.2: ข้อความทั่วไป 4.5:1 และข้อความใหญ่ 3:1
ไม่สื่อความหมายด้วยสีอย่างเดียว และออกแบบ Focus ให้มองเห็นชัด
Dark Mode ด้วย color-scheme และ light-dark() ไม่ใช่แค่กลับสี
ตรวจด้วย DevTools และ Lighthouse
Lab: แก้ข้อความสีจางที่อ่านยาก และเพิ่ม Dark Mode ให้หน้าตัวอย่าง

Section 8: Lab: สร้างมิติด้วยแสงและเงา

กำหนดทิศทางแสงให้สม่ำเสมอ และผลต่อขอบบนกับขอบล่าง
Shadow Scale สำหรับระดับความสูงขององค์ประกอบ
เงาแบบสองชั้นให้ดูเป็นธรรมชาติ
สร้างมิติแบบ Flat ด้วยสี และการวางองค์ประกอบซ้อนกัน
Lab: ปรับ Dropdown, Modal และการ์ดให้มีลำดับความสูงชัดเจน

Section 9: Lab: รูปภาพและการเก็บรายละเอียด

ทำให้ข้อความบนรูปอ่านได้ด้วย Overlay, ลด Contrast ของรูป หรือ Text Shadow
aspect-ratio และ object-fit สำหรับรูปที่ผู้ใช้อัปโหลด และขนาดไอคอนที่เหมาะ
ใช้เส้นขอบให้น้อยลง: แยกส่วนด้วยเงา พื้นหลัง หรือระยะห่างแทน
Accent Border, พื้นหลังที่มีลวดลายเล็กน้อย และ Empty State ที่ชวนให้ใช้งาน
Lab: ปรับหน้า Hero, ตาราง และหน้ารายการว่างของระบบตัวอย่าง

Section 10: Workshop: ปรับหน้าเว็บจริงแบบก่อนและหลัง

Workshop: เลือกหน้า Landing Page, Dashboard หรือหน้าเว็บของผู้เรียนเอง
ตรวจปัญหาด้วย Checklist แล้วปรับทีละด้าน: Hierarchy, ระยะห่าง, ตัวอักษร และสี
ทดสอบบนมือถือ ตรวจ Contrast และ Dark Mode
นำเสนอผลงานก่อนและหลัง พร้อมอธิบายเหตุผลของแต่ละการเปลี่ยนแปลง

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

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

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

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

Refactoring UI คืออะไร ช่วยให้หน้าเว็บดูดีขึ้นได้อย่างไร

Refactoring UI คือแนวทางออกแบบหน้าจอจากหนังสือของ Adam Wathan และ Steve Schoger ที่เน้นเทคนิคเชิงปฏิบัติแทนทฤษฎีศิลปะ เช่น กำหนดระบบระยะห่างและขนาดตัวอักษรไว้ล่วงหน้า สร้างลำดับความสำคัญด้วยน้ำหนักและสีของตัวอักษรแทนการขยายขนาด ใช้เงาและแสงสร้างมิติ และเลือกสีจากชุดเฉดที่เตรียมไว้ นักพัฒนาจึงปรับหน้าเว็บให้ดูเป็นระเบียบและใช้ง่ายขึ้นได้โดยไม่ต้องมีพื้นฐานศิลปะ หลักสูตรนี้นำแนวคิดดังกล่าวมาสร้างแบบฝึกใหม่ด้วย CSS รุ่นปัจจุบัน

กำหนดระบบระยะห่างและขนาดตัวอักษรของหน้าเว็บทำอย่างไร

เริ่มจากกำหนดชุดค่าระยะห่างที่จำกัดไว้ เช่น 4 8 12 16 24 32 48 และ 64 พิกเซล แล้วเลือกใช้เฉพาะค่าในชุดนี้ ไม่ใส่ค่าตามใจทีละจุด จากนั้นกำหนด Type Scale เป็นชุดขนาดตัวอักษรสำหรับหัวข้อ เนื้อหา และข้อความรอง ใช้ clamp() ให้ขนาดหัวข้อปรับตามความกว้างจอ แล้วประกาศเป็น CSS Custom Properties เพื่อใช้ซ้ำทั้งเว็บ ระยะห่างระหว่างกลุ่มควรมากกว่าระยะภายในกลุ่ม เพื่อให้ผู้ใช้เห็นว่าอะไรอยู่ด้วยกัน

ทำไมควรกำหนดสีในเว็บด้วย HSL หรือ OKLCH แทน HEX

HSL แยกค่าสีออกเป็น Hue, Saturation และ Lightness ทำให้อ่านแล้วเข้าใจทันทีว่าเป็นสีอะไร และปรับอ่อนเข้มได้โดยเปลี่ยนค่าเดียว ส่วน OKLCH ซึ่งเบราว์เซอร์รุ่นปัจจุบันรองรับ ให้ค่าความสว่างที่ใกล้กับสายตามนุษย์มากกว่า เฉดที่สร้างจึงสม่ำเสมอกว่าเมื่อเปลี่ยนสีหลัก การสร้างชุดสีให้วางสีหลักไว้ตรงกลาง ไล่เฉดอ่อนและเข้มราว 9 ถึง 10 ระดับ ทำแบบเดียวกันกับสีเทา แล้วตรวจ Contrast ของตัวอักษรกับพื้นตามเกณฑ์ WCAG

หลักสูตรนี้ต่างจากหลักสูตร Tailwind CSS หรือ Figma อย่างไร

หลักสูตรนี้สอนหลักการออกแบบว่าควรปรับอะไรและเพราะอะไร เช่น ลำดับความสำคัญ ระยะห่าง ตัวอักษร สี และเงา แล้วฝึกด้วย CSS มาตรฐานซึ่งนำไปใช้กับ Framework ใดก็ได้ ส่วนหลักสูตร Tailwind CSS เน้นการใช้ Utility Class และหลักสูตร Figma เน้นการใช้เครื่องมือออกแบบ ผู้ที่เรียนหลักสูตรนี้จะนำ Design Token ที่ได้ไปตั้งเป็น Theme ของ Tailwind หรือ Variables ใน Figma ได้ทันที

หลักสูตร Website Design with Refactoring UI เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับผู้ที่พัฒนาเว็บไซต์ด้วยตนเอง Frontend Developer, UX/UI Designer นักเรียนนักศึกษา และนักไอทีที่อยากปรับหน้าตาเว็บให้ดีขึ้น ควรเขียน HTML และ CSS เบื้องต้นได้ เช่น Selector, Box Model และ Flexbox โดยไม่ต้องมีพื้นฐานด้านศิลปะ ผู้ที่ยังไม่เคยเขียน HTML และ CSS ควรเรียนหลักสูตร Basic HTML+CSS ก่อน

จัดอบรมหลักสูตร Website Design with Refactoring UI ให้ทีมในองค์กรได้ไหม

ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น นำหน้าเว็บหรือระบบที่ทีมดูแลอยู่มาฝึกปรับหน้าตา ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449