หน้าตาของเว็บไซต์ส่วนใหญ่ ไม่ได้เพี้ยนไปเพราะการตัดสินใจผิดครั้งเดียว แต่ค่อย ๆ เบี่ยงเบนไปทีละนิด หน้าแคมเปญที่มีเฉดสีน้ำเงินเป็นของตัวเอง ผู้แก้ไขที่ทำตัวหนาหัวข้อด้วยมือ หรือเวอร์ชันภาษาที่ปุ่มไม่ตรงกันอีกต่อไป Design system ของเว็บไซต์ ป้องกันการเบี่ยงเบนนั้น ด้วยการฝังการตัดสินใจของแบรนด์ ไว้ในชิ้นส่วนที่ทุกหน้าใช้สร้าง
แนวคิดนี้มาจากผลิตภัณฑ์ซอฟต์แวร์ ที่มีหน้าจอหลายร้อยหน้า มันจึงอาจฟังดูเกินจำเป็น สำหรับเว็บไซต์บริษัท แต่ถ้ากำหนดขนาดให้เหมาะสม มันไม่เกินจำเป็น โดยเฉพาะกับเว็บไซต์องค์กร เว็บไซต์หลายภาษา หรือธุรกิจที่มีหลายเว็บไซต์
คำตอบสั้น ๆ
Design system คือชุดการตัดสินใจร่วมกัน และชิ้นส่วนที่นำกลับมาใช้ซ้ำได้ ที่ใช้สร้างเว็บไซต์ โดยแบ่งเป็นสี่ชั้น
- Design token ค่าที่มีชื่อเรียก สำหรับสี ตัวอักษร และระยะห่าง
- คอมโพเนนต์ ชิ้นส่วนที่ใช้ซ้ำได้ เช่น ปุ่ม ช่องกรอกฟอร์ม การ์ด และเมนูนำทาง
- แพตเทิร์น การผสมคอมโพเนนต์ที่ทดสอบแล้ว สำหรับงานที่เกิดซ้ำ เช่น ส่วนรับการติดต่อสอบถาม
- แนวทางการใช้งาน ใช้แต่ละชิ้นเมื่อไรและอย่างไร รวมถึงถ้อยคำ
ต่างจาก style guide ตรงที่มันถูกสร้างไว้ในตัวเว็บไซต์เลย การเปลี่ยนค่าครั้งเดียว จึงเปลี่ยนทุกที่ ถ้ามีหลายคนแก้ไขเว็บไซต์ของคุณ เว็บไซต์มีหลายภาษา หรือคุณเผยแพร่หน้าแคมเปญเป็นประจำ คุณต้องมี design system แต่ไม่ใช่แบบบริษัทซอฟต์แวร์ โดยทั่วไป สีส่วนกลาง สเกลตัวอักษร สเกลระยะห่าง และคอมโพเนนต์ที่ใช้ซ้ำได้ใน CMS ก็เพียงพอแล้ว
Design system กับ style guide และแนวทางแบรนด์
คำเหล่านี้มักใช้แทนกัน แต่ทำหน้าที่ต่างกัน แนวทางแบรนด์กำหนดแบรนด์ในทุกช่องทาง และเวอร์ชันที่ทำมาเพื่องานพิมพ์ก่อน มักมีช่องโหว่บนหน้าจอ (ดู แนวทางแบรนด์สำหรับเว็บไซต์) style guide อธิบายว่าเว็บไซต์หนึ่งควรมีหน้าตาอย่างไร ส่วน design system เพิ่มชิ้นส่วนที่ใช้งานได้จริงเข้าไป ปุ่มในแนวทาง คือปุ่มเดียวกับที่ผู้แก้ไขวางลงบนหน้า
ใน design system ของเว็บไซต์ มีอะไรบ้าง
Design token
Token คือการตัดสินใจด้านดีไซน์ที่มีชื่อเรียก เช่น color-action-primary แทนรหัสสี hex หรือ space-md แทน 24 พิกเซล ดีไซน์และโค้ดอ้างถึงชื่อ ค่าจึงเปลี่ยนได้ โดยไม่ต้องแตะอะไรที่ใช้มันอยู่
ระบบส่วนใหญ่แยกเป็นสองระดับ Primitive token เก็บชุดสีดิบ เช่น blue-700 ส่วน semantic token บอกหน้าที่ เช่น color-text-body และชี้ไปที่ primitive คอมโพเนนต์ใช้แต่ semantic token การรีแบรนด์ แบรนด์ที่สอง หรือธีมแคมเปญ จึงกลายเป็นแค่การเปลี่ยนการจับคู่ ไม่ใช่การออกแบบใหม่
บนเว็บ token มักกลายเป็น CSS custom property กลุ่ม Community Group ด้าน Design Tokens ซึ่งมี W3C เป็นเจ้าภาพ เผยแพร่รูปแบบไฟล์ token กลางเวอร์ชันเสถียรแรกในปี 2025 มันช่วยทีมที่ซิงก์เครื่องมือดีไซน์กับโค้ด แต่ไม่ใช่มาตรฐาน W3C อย่างเป็นทางการ และเว็บไซต์ธุรกิจไม่มีมันก็ได้
คอมโพเนนต์ และ component library
ปุ่ม ช่องกรอกฟอร์ม การ์ด accordion เมนูนำทาง และกล่องคำพูดอ้างอิง คอมโพเนนต์ยังไม่เสร็จ จนกว่าจะสร้างครบทุกสถานะ ทั้ง hover โฟกัสจากคีย์บอร์ด ปิดการใช้งาน ข้อผิดพลาด และป้ายข้อความที่ยาวมาก หรือรูปที่หายไป
คอมโพเนนต์ยังเป็นจุด ที่ทำเรื่องการเข้าถึงได้ถูกที่สุด สร้างสไตล์โฟกัสที่มองเห็นได้ ช่องกรอกที่มีป้ายกำกับ และคู่สีที่ผ่านค่าคอนทราสต์ขั้นต่ำของ WCAG 2.2 (4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ และส่วนที่มองเห็นของตัวควบคุม เช่น ขอบช่องกรอกและตัวบอกโฟกัส) ไว้ในแต่ละคอมโพเนนต์ แล้วทุกหน้าจะได้สิ่งเหล่านี้ไปด้วย คู่มือ คอนทราสต์สี ของเรา แสดงวิธีตรวจ
คอมโพเนนต์ที่สร้างเสร็จแล้ว รวมกันเป็น component library ซึ่งมักมีอยู่สองที่ คือในเครื่องมือดีไซน์อย่าง Figma และใน CMS ให้ตั้งชื่อเหมือนกันทั้งสองที่ เพื่อให้ “การ์ดโปรเจกต์” มีความหมายเดียว สำหรับนักออกแบบ นักพัฒนา และผู้แก้ไขเนื้อหา
แพตเทิร์น
แพตเทิร์นผสมคอมโพเนนต์ เพื่อแก้ปัญหาที่เกิดซ้ำ เช่น ส่วนรับการติดต่อสอบถาม ที่มีฟอร์ม ข้อความสร้างความมั่นใจ และช่องทางติดต่ออื่น ตารางโปรเจกต์ที่กรองได้ หรือส่วนเปิดของหน้าแคมเปญ ตรงนี้คือจุดที่ระบบเริ่มเก็บสิ่งที่ช่วยให้คนติดต่อเข้ามา ไม่ใช่แค่เรื่องหน้าตา
แนวทางการใช้งาน
กฎที่ป้องกันการใช้ผิด เช่น ปุ่มหลักหนึ่งปุ่มต่อหนึ่งส่วน เมื่อไรการ์ดดีกว่ารายการ หัวข้อส่วนเปิดยาวได้แค่ไหน และแต่ละช่องใช้รูปสัดส่วนไหน
เว็บไซต์ธุรกิจต้องการ design system แค่ไหน
ระบบสาธารณะอย่าง Material Design ของ Google, Carbon ของ IBM และ Design System ของ GOV.UK รองรับหลายทีม และมีคนดูแลโดยเฉพาะ เว็บไซต์บริษัทต้องการน้อยกว่านั้นมาก และส่วนใหญ่อยู่ใน CMS ได้
- สีส่วนกลาง ที่มีชื่อบทบาทชัดเจน เช่น แบรนด์ ข้อความ พื้นหลัง พื้นผิว เส้นขอบ สำเร็จ และข้อผิดพลาด
- สเกลตัวอักษร ขนาดหัวข้อและเนื้อหาไม่กี่ขนาด ที่เพิ่มขึ้นตามสัดส่วน พร้อมระยะห่างบรรทัด ที่เหมาะกับทุกระบบตัวเขียนที่คุณเผยแพร่ (ดู ตัวอักษรบนเว็บ)
- สเกลระยะห่าง ไม่กี่ขั้น เช่น 8, 16, 24, 32, 48 และ 64 พิกเซล ใช้กับทุกช่องว่าง
- คอมโพเนนต์หลัก แพตเทิร์น และเทมเพลตหน้า สำหรับประเภทหน้าที่คุณเผยแพร่บ่อยที่สุด
- แนวทางสักหนึ่งหรือสองหน้า เก็บไว้ในที่ที่ผู้แก้ไขเนื้อหาจะเห็น
Global styles ใน WordPress และ page builder
WordPress มีสิ่งเหล่านี้ในตัวอยู่มาก ธีมสมัยใหม่กำหนดชุดสี ขนาดตัวอักษร ระยะห่าง และความกว้างของเนื้อหา ในไฟล์ theme.json ซึ่ง WordPress แปลงเป็น CSS custom property เช่น --wp--preset--color--primary ให้บล็อกนำไปใช้ซ้ำ ใน block theme แผง Styles ใน Site Editor เปลี่ยน global styles เหล่านี้ได้ทั้งเว็บไซต์ และ theme.json ปิดตัวเลือกสีเองกับขนาดตัวอักษรเองได้ เพื่อให้ผู้แก้ไขเลือกจากชุดสี แทนที่จะคิดเฉดสีขึ้นมาใหม่
Synced pattern ทำให้ส่วนหนึ่งของหน้า เช่น แถบชวนให้ติดต่อ (CTA) เป็นองค์ประกอบเดียวที่ใช้ร่วมกัน แก้ครั้งเดียว ก็อัปเดตทุกที่ที่ใช้ ส่วนการล็อกแบบ content-only ตรึงเลย์เอาต์และดีไซน์ของส่วนนั้นไว้ แต่ยังให้แก้ข้อความและรูปภาพได้
page builder อย่าง Elementor และ Breakdance มีสีและฟอนต์ส่วนกลาง พร้อมเทมเพลตหรือ global block ที่ใช้ซ้ำได้ วินัยสำคัญกว่าเครื่องมือ builder ที่พิมพ์สีลงในทุกวิดเจ็ต ไม่มี design system ไม่ว่าการตั้งค่าจะบอกว่าอะไร ดู แนวปฏิบัติที่ดีสำหรับ WordPress ว่างานที่สร้างมาอย่างแข็งแรง มีหน้าตาอย่างไร
หลายเว็บไซต์หรือหลายแบรนด์
ดูแลหลายเว็บไซต์ หลายแบรนด์ หรือหลายเวอร์ชันตามภูมิภาคอยู่หรือเปล่า? ใช้คอมโพเนนต์ร่วมกัน และให้แต่ละแบรนด์มีค่า semantic token ของตัวเอง แบรนด์ที่สองจึงเป็นแค่การจับคู่ใหม่ ไม่ใช่การสร้างครั้งที่สอง นี่คือจุดที่ design system คืนทุนเร็วที่สุด และจุดที่เว็บไซต์เอกสารแยกต่างหาก เริ่มคุ้มค่า
ทำให้ทุกหน้า ทุกแคมเปญ และทุกภาษา ตรงกับแบรนด์
ความสม่ำเสมอของแบรนด์บนออนไลน์ ส่วนใหญ่หายไปหลังเปิดตัว โดยคนที่ไม่ได้อยู่ในโปรเจกต์แรก ซึ่งทำงานแข่งกับกำหนดส่ง คอมโพเนนต์ทำหน้าที่ปกป้องเป็นส่วนใหญ่ นิสัยห้าอย่างดูแลส่วนที่เหลือ
ล็อกสไตล์ในคอมโพเนนต์ที่ใช้ซ้ำ
ให้ผู้แก้ไขมีตัวเลือก ไม่ใช่ตัวควบคุม แถบ CTA อาจมีพื้นหลังที่อนุมัติแล้วสองแบบ และรูปที่ใส่หรือไม่ใส่ก็ได้ แต่ไม่มีตัวเลือกสีหรือช่องขนาดตัวอักษร ผู้แก้ไขเปลี่ยนข้อความ ลิงก์ และรูปภาพ ส่วน token ดูแลที่เหลือ ความต้องการใหม่จริง ๆ จะกลายเป็น variant ใหม่ ที่สร้างครั้งเดียวให้ทุกคนใช้
Style guide ด้านเนื้อหา
หน้าอาจเหมือนกันทางภาพ แต่ยังอ่านแล้วไม่ใช่แบรนด์ได้ เก็บคู่มือสั้น ๆ เรื่องน้ำเสียง การใช้ตัวพิมพ์ในหัวข้อ ถ้อยคำบนปุ่ม (“นัดดูสถานที่” ไม่ใช่ “ส่ง”) ตัวเลข วันที่ ราคา และ alt text โดยลิงก์ไว้จากแดชบอร์ดของ CMS ไม่ใช่ฝังอยู่ในไดรฟ์ที่ใช้ร่วมกัน
อภิธานศัพท์แยกตามภาษา
สำหรับแต่ละภาษา ให้บันทึกชื่อสินค้าและบริการ คำที่ไม่แปลเลย คำแปลที่อนุมัติแล้วของวลีสำคัญ และข้อความในหน้าจอ เช่น ป้ายเมนูและข้อความแจ้งข้อผิดพลาดในฟอร์ม แชร์ให้นักแปลและเครื่องมือแปลทุกตัว จากนั้นทดสอบคอมโพเนนต์ด้วยคำแปลจริง ข้อความจะยาวขึ้นหรือสั้นลง บางระบบตัวเขียน ต้องการระยะห่างบรรทัดมากขึ้น และปุ่มที่พอดีในภาษาหนึ่ง อาจขึ้นบรรทัดใหม่ในอีกภาษา ดู การวางแผนเว็บไซต์หลายภาษา
ขั้นตอนตรวจทานแบบเบา ๆ
ก่อนเทมเพลต แพตเทิร์น หรือหน้าแคมเปญใหม่จะออนไลน์ ให้เจ้าของระบบหรือผู้แก้ไขที่ผ่านการฝึกแล้ว ตรวจว่า
ถ้าคอมโพเนนต์แข็งแรง การตรวจนี้ใช้เวลาแค่ไม่กี่นาที
ตรวจแบรนด์ปีละสองครั้ง
ทุกหกเดือน ให้สุ่มหน้าจากทุกเว็บไซต์ ทุกภาษา และแคมเปญล่าสุด แผง CSS Overview ในเครื่องมือนักพัฒนาของ Chrome แสดงทุกสีและทุกขนาดตัวอักษรที่หน้าหนึ่งใช้ เฉดสีหลงจึงโผล่ออกมาเร็ว เลิกใช้คอมโพเนนต์ที่ทำครั้งเดียว และจดสิ่งที่ผู้แก้ไขต้องหาทางเลี่ยงอยู่เรื่อย ๆ นั่นคือรายการคอมโพเนนต์ ที่คุณควรสร้างต่อไป
สัญญาณว่าเว็บไซต์ต้องมี design system
ลองตรวจเอง จับภาพหน้าจอทุกปุ่ม หัวข้อ การ์ด และฟอร์ม บนสิบหน้าที่มีคนเข้าชมมากที่สุด แล้ววางรวมไว้บนบอร์ดเดียว ซึ่งเรียกว่า interface inventory ถ้ามันดูเหมือนงานของหลายบริษัท คุณก็ได้คำตอบแล้ว
ติ๊กหนึ่งหรือสองข้อ จัด global styles และเทมเพลตให้เรียบร้อย ถ้าหลายข้อ โดยเฉพาะข้ามเว็บไซต์หรือข้ามภาษา ให้วางแผนระบบแบบเบา ๆ เว็บไซต์ภาษาเดียวขนาดเล็ก ที่มีผู้แก้ไขคนเดียว ต้องการแค่ global styles ที่ดี กับอีกเพียงเล็กน้อย
เริ่มเมื่อไร และทำอย่างไรไม่ให้เสื่อม
รีดีไซน์หรือรีแบรนด์คือจังหวะที่เหมาะ
การรีดีไซน์สร้างทุกเทมเพลตใหม่อยู่แล้ว จึงเป็นจังหวะที่ถูกที่สุด ที่จะสร้างมันเป็นระบบ การเพิ่มระบบภายหลัง หมายถึงการแก้หน้าเดิมซ้ำสองรอบ การรีแบรนด์ยิ่งตรงกว่านั้น เมื่อมี semantic token แล้ว อัตลักษณ์ใหม่ส่วนใหญ่ ก็แค่การเปลี่ยนค่า บทความ รีแบรนด์เว็บไซต์ อธิบายส่วนที่เหลือของการเปิดตัวนั้น
การเปลี่ยนแปลงในภายหลังก็ถูกลงด้วย เมื่อ เทรนด์การออกแบบเว็บที่ควรนำมาใช้ สักเทรนด์คุ้มค่าที่จะใช้ มันเป็นการเปลี่ยนแปลงครั้งเดียวในระบบ และย้อนกลับได้ง่ายพอกัน นี่คือเหตุผลที่ อนาคตของเว็บไซต์ ชี้ไปที่ design system มากกว่าการออกแบบทีละหน้า
การกำกับดูแลที่ทำให้มันยังมีชีวิต
Design system ที่ไม่มีเจ้าของ จะเสื่อมลงเป็น style guide ที่ไม่มีใครอ่าน ให้การกำกับดูแลเบา ๆ
- เจ้าของที่ระบุชื่อหนึ่งคน ผู้อนุมัติคอมโพเนนต์และ variant ใหม่
- ช่องทางขอเพิ่ม เพื่อให้ความต้องการใหม่ถูกสร้างเข้า library ไม่ใช่ด้นสดบนหน้าเดียว
- บันทึกการเปลี่ยนแปลงสั้น ๆ ว่าอะไรใหม่ และอะไรถูกเลิกใช้
- วันหมดอายุของข้อยกเว้น เช่น สไตล์พิเศษของแคมเปญครั้งเดียว
สำหรับบทบาท สิทธิ์ และการอนุมัติบนเว็บไซต์ขนาดใหญ่ ดู การกำกับดูแลเว็บไซต์ ที่มีหลายทีมร่วมกัน
แผนเริ่มต้นจากเล็กไปใหญ่
จะรีดีไซน์หรือไม่ก็ตาม ให้เริ่มจากเล็ก ๆ ตามลำดับนี้
- สำรวจ สี สไตล์ตัวอักษร ปุ่ม และส่วนต่าง ๆ บนเทมเพลตที่มีคนเข้าชมมากที่สุด
- กำหนด token บทบาทของสี สเกลตัวอักษร และสเกลระยะห่าง พร้อมตรวจคอนทราสต์ของคู่ข้อความกับพื้นหลัง
- สร้างคอมโพเนนต์หลัก ให้ครบทุกสถานะ และทดสอบในทุกภาษา
- ประกอบเทมเพลต สำหรับหน้าที่คุณเผยแพร่บ่อยที่สุด เริ่มจากแลนดิ้งเพจแคมเปญ ถ้าคุณทำแคมเปญเยอะ
- ล็อกให้แน่น จำกัดการปรับแต่งเอง และจำกัดคนที่เปลี่ยน global styles ได้
- เขียนแนวทาง บันทึกของคอมโพเนนต์ style guide ด้านเนื้อหา และอภิธานศัพท์แยกตามภาษา
- ระบุเจ้าของ และนัดการตรวจครั้งแรกในอีกหกเดือน
- ขยายตามความต้องการ เพิ่มคอมโพเนนต์ เมื่อหน้าที่สองต้องใช้มัน
สร้างระบบไว้ในเว็บไซต์ ไม่ใช่ใน PDF
สำหรับเว็บไซต์ธุรกิจ design system ไม่ใช่ผลงานส่งมอบเพื่อตัวมันเอง มันรักษาการตัดสินใจด้านกลยุทธ์ UX การเข้าถึง เนื้อหา และประสิทธิภาพ ที่ทำไว้ระหว่างสร้าง ให้คงอยู่ไปอีกนานหลังเปิดตัว
ถ้าเว็บไซต์ของคุณเบี่ยงไปแล้ว การรีดีไซน์เว็บไซต์ มักเป็นจังหวะที่คุ้มที่สุด ในการวางระบบนี้ เราตรวจสอบสิ่งที่มีอยู่ เก็บสิ่งที่ใช้ได้ และสร้างส่วนที่เหลือใหม่บน WordPress พร้อม global styles และส่วนที่ใช้ซ้ำได้ ซึ่งทีมของคุณแก้ไขได้ โดยไม่ทำให้ดีไซน์พัง ไม่แน่ใจว่าควรไปไกลแค่ไหน? คุยกับเราว่าเว็บไซต์ของคุณต้องการอะไร