UX/UI · Design System · Next.js + Tailwind

Premium Club Revamp
เขียนกฎว่าห้ามทำอะไร ก่อนจะเริ่มออกแบบ

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

Design System OKLCH Tokens Next.js Tailwind WCAG AA Editorial Layout Mobile First
Empathize · Define

ความเสี่ยงอันดับหนึ่งของงานนี้คือ “ดูออกว่าไม่ได้ตั้งใจทำ”

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

ถ้าเห็นงานนี้ในเว็บรวมผลงานนักออกแบบ จะเชื่อไหมว่าสตูดิโอเป็นคนทำ — คำถามเดียวนี้ถูกใช้เป็นเกณฑ์ผ่าน/ไม่ผ่านของทุกหน้าและทุกสไลด์ ตอบว่าไม่เมื่อไร แปลว่าต้องแก้ ไม่ใช่ต้องอธิบาย

— เกณฑ์ QA ข้อสุดท้ายก่อนส่งงาน

จังหวะเดิมซ้ำทุกหน้า

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

ตัวหนังสือหนาดำเท่ากันหมดทุกหัวข้อ

เมื่อทุกหัวข้อเน้นเท่ากัน ก็เท่ากับไม่มีอะไรถูกเน้นเลย สายตาไม่รู้จะเริ่มตรงไหน และหน้าตาจะกลายเป็นแบบที่เห็นได้ทั่วไปทันที

ลูกเล่นที่ใคร ๆ ก็ใช้

ไล่สีม่วงฟ้า พื้นผิวกระจกฝ้า มุมโค้งทุกกล่อง เงาค่าเริ่มต้น และไอคอนโปรยเต็มหน้า — แต่ละอย่างไม่ผิด แต่พอมารวมกันคือลายเซ็นของงานที่ทำจากค่าเริ่มต้น

กำแพงตัวหนังสือที่ไม่มีจังหวะ

ย่อหน้ายาวติดกันโดยไม่มีคำไหนถูกดึงขึ้นมาเน้น ทำให้เนื้อหาที่ดีอ่านไม่ผ่านย่อหน้าแรก และทำให้สไลด์ดูเหมือนเอกสารมากกว่างานนำเสนอ


Define

รายการสิ่งต้องห้าม เขียนก่อนออกแบบ ไม่ใช่ตอนรีวิว

ข้อห้ามที่เขียนไว้ล่วงหน้าตัดสินง่าย เพราะยังไม่มีงานให้เสียดาย ส่วนข้อห้ามที่คิดตอนรีวิวมักกลายเป็นการหาเหตุผลให้ของที่ทำไปแล้ว

เรื่องกติกาเหตุผล
ไอคอนชุดเดียวเท่านั้นใช้ชุดไอคอนเส้นชุดเดียวทั้งงาน ห้ามใช้อีโมจิ และห้ามวาดเองปนเข้ามา เพราะน้ำหนักเส้นที่ไม่ตรงกันมองออกทันทีแม้คนดูจะบอกไม่ถูกว่าอะไรผิด
เลย์เอาต์ไม่สมมาตรแบ่งจอเป็นสัดส่วนใหญ่ชัด ๆ แล้วให้พื้นที่ว่างทำงาน ห้ามหั่นจอเป็นการ์ดย่อยเยอะ ๆ และห้ามใช้จังหวะเดิมสองหน้าติดกัน
ตัวอักษรคุมน้ำหนักใช้ฟอนต์ของแบรนด์คู่กับเซริฟน้ำหนักเบา ห้ามหัวข้อหนาดำทุกหัว ให้คอนทราสต์มาจากขนาดและสไตล์ ไม่ใช่จากความหนาอย่างเดียว
ภาพต้องกำกับศิลป์ทุกภาพต้องเกรดสีเข้าชุดเดียวกัน มีเกรน มีแสงที่ไม่สมบูรณ์แบบ ภาพไหนดูสังเคราะห์ชัดให้ทำใหม่หรือตัดทิ้ง ไม่ใช้เพราะเสียดาย
ข้อความห้ามคำโหลประโยคสั้น มั่นใจ ไม่มีคำอย่าง “ยกระดับ” “ปลดล็อก” “ไร้รอยต่อ” และไม่มีเครื่องหมายอัศเจรีย์ เพราะคำเหล่านี้บอกว่าไม่ได้เขียนเพื่อแบรนด์นี้โดยเฉพาะ
ร่องรอย craftต้องมีใส่สิ่งที่เทมเพลตไม่มี — โมทีฟกราฟิกที่ถอดมาจากตัวโลโก้ ลายที่มาจากงานพิมพ์ของแบรนด์ และระบบเลขลำดับหน้า ทั้งหมดนี้คือสิ่งที่ทำให้งานดูเหมือนมีคนคิด

Prototype

ระบบดีไซน์ที่บังคับตัวเองได้ ไม่ใช่แค่เอกสารแนะนำ

กติกาที่อยู่ในหัวคนอย่างเดียวจะหลุดเสมอตอนงานเร่ง จึงย้ายให้มากที่สุดไปอยู่ในไฟล์ที่ตรวจได้

ไฟล์ token ไฟล์เดียว ใช้ร่วมกันทุกที่

ประกาศสี ตัวอักษร และระยะห่างไว้ที่เดียว แล้วให้ทั้งเว็บสาธิตและงานนำเสนอดึงไปใช้ชุดเดียวกัน สีที่ไม่ได้อยู่ในไฟล์นี้คือสีที่ใช้ไม่ได้

ตัวตรวจคอนทราสต์ที่ต้องผ่านก่อนใช้สี

มีสคริปต์ตรวจคู่สีทุกคู่ในระบบ ต้องขึ้นว่าผ่านทั้งหมดก่อนถึงจะเอา token ไปใช้ได้ ทำให้เรื่องการอ่านออกไม่ขึ้นกับว่าวันนั้นใครนึกได้

ฟอนต์เก็บไว้ในโปรเจกต์เอง

ไม่พึ่งบริการฟอนต์ภายนอก เพราะหน้าที่เปิดตอนนำเสนอแล้วฟอนต์ไม่มา คือหน้าที่พังในนาทีที่สำคัญที่สุด

เลือกใช้ระบบสีแบบ OKLCH

ทำให้ปรับความสว่างของสีได้โดยที่เฉดไม่เพี้ยนตาม ซึ่งสำคัญมากกับงานโทนเข้มที่มีสีเน้นเพียงสีเดียว — เวลาต้องทำสีเน้นให้อ่อนลงเพื่อผ่านคอนทราสต์ สีจะไม่กลายเป็นคนละสี


Prototype

สลับลำดับงาน — ทำของที่กดได้จริงก่อน แล้วค่อยทำเอกสารนำเสนอ

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

ภาพจำลองในสไลด์ พิสูจน์ไม่ได้ว่าของจริงทำได้

งานนำเสนอที่ใส่ภาพจำลองสวย ๆ บอกได้แค่ว่าเราวาดรูปเป็น ไม่ได้บอกว่าเว็บจริงจะออกมาแบบนั้น และคนดูที่เคยเจองานลักษณะนี้มาเยอะจะรู้ทัน

แก้: สร้างเว็บสาธิตที่กดได้จริงให้เสร็จก่อน แล้วค่อยเอาภาพหน้าจอจากของจริงไปวางในสไลด์ ผลพลอยได้คือได้พิสูจน์ชุดเทคโนโลยีที่เสนอไปในตัว เพราะตัวอย่างถูกสร้างด้วยชุดเดียวกับที่เสนอ

สีเน้นของแบรนด์ตกเกณฑ์คอนทราสต์ในหลายจุดพร้อมกัน

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

แก้: ไม่ไล่แก้ทีละจุด แต่แก้ที่ token แล้วให้ผลกระจายไปเองทั้งงาน — เพราะระบบสีทำให้ปรับความสว่างได้โดยเฉดไม่เพี้ยน สีจึงยังเป็นสีของแบรนด์อยู่ ทั้งงานถูกแก้พร้อมกันในรอบเดียว

ทุกหน้าถูกกติกา แต่รวมกันแล้วยังดูจืด

ทำตามข้อห้ามครบทุกข้อ ไม่มีอะไรผิด แต่ผลลัพธ์ยังไม่มีบุคลิก เพราะรายการสิ่งต้องห้ามบอกได้แค่ว่าอย่าทำอะไร ไม่ได้บอกว่าต้องมีอะไร

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

Test

รีวิวทีละหน้าโดยมีเกณฑ์ ไม่ใช่รีวิวด้วยความรู้สึกรวม ๆ

ทำตารางสถานะรายหน้าไว้ ทุกหน้าต้องถูกตัดสินทีละหน้าว่าผ่านหรือยังไม่ผ่าน พร้อมระบุสิ่งที่ต้องแก้

1
ไฟล์ token ที่ทั้งเว็บสาธิตและงานนำเสนอใช้ร่วมกัน
12
จุดที่แก้คอนทราสต์พร้อมกันจากการแก้ที่ token
3
ความกว้างที่ต้องผ่านทุกหน้า
0
อีโมจิและไอคอนนอกชุดที่หลุดเข้าไปในงาน

Level Up · Reflect

สิ่งที่เอาไปใช้ต่อได้กับงานอื่น

วิธีทำงานชุดนี้ไม่ได้ผูกกับแบรนด์ใดแบรนด์หนึ่ง และถูกเอามาใช้กับงานถัดมาแล้ว

Premium Club Revamp

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

Next.js Tailwind OKLCH Design Tokens WCAG AA Self-hosted fonts Mobile First
Projects