กลับมาพบกับ Blueseas Design Talks#21 ครั้งนี้เรามาร่วมพูดคุยกันใหหัวข้อ Typography in UX/UI Design กัน โดยประเด็นนี้ นำโดย พี่หนุ่ม UX/UI Design ตัวตึงของเรา ในการออกแบบ UX/UI เรามักให้ความสำคัญกับโครงสร้าง ฟังก์ชัน และกราฟิก แต่มีอีกหนึ่งองค์ประกอบที่ทรงพลังไม่แพ้กัน — นั่นคือ Typography หรือศิลปะการใช้ตัวอักษร
“ตัวอักษรไม่ใช่แค่ตัวหนังสือ… มันคือประสบการณ์!”
ถ้า UX/UI Design คือการเล่าเรื่อง Typography ก็เหมือนเสียงเล่าเรื่องนั้น
ตัวอักษรที่เราเลือก ขนาดที่เราใช้ หรือแม้แต่ระยะห่างระหว่างบรรทัด ล้วนส่งผลโดยตรงกับความรู้สึกของผู้ใช้งานแบบที่บางครั้งเราไม่รู้ตัวเลยด้วยซ้ำ
แล้ว Typography สำคัญยังไงใน UX/UI?
- อ่านง่าย สบายตา การเลือกฟอนต์ที่อ่านง่าย และมี contrast ที่พอดี ช่วยให้ผู้ใช้เข้าใจข้อมูลได้เร็วขึ้น ไม่ต้องพยายามอ่านจนปวดตา
- สื่ออารมณ์และบุคลิกของแบรนด์ ตัวหนังสือบางแบบดูสนุกสนาน บางแบบดูจริงจัง บางแบบก็ดูหรูหรา การเลือก Typography ที่เข้ากับ Mood & Tone ของแบรนด์ คือจุดเริ่มต้นของการสร้างอารมณ์ร่วม
- ช่วยนำสายตา หัวข้อใหญ่ ตัวเน้น หรือข้อความย่อย — ทุกอย่างทำหน้าที่จัดระเบียบความสนใจของผู้ใช้ให้ไหลลื่น และไม่สับสน
- เพิ่มความน่าเชื่อถือ งานดีไซน์ที่ใช้ Typography อย่างตั้งใจทำให้แบรนด์ดู Professional ทันที และน่าเชื่อถือมากขึ้นโดยไม่ต้องพูดเยอะ
Key Elements of Typography “ดีไซน์ที่ดี เริ่มต้นจากตัวอักษรที่ใส่ใจรายละเอียด”
Typography ไม่ได้แค่เลือกฟอนต์สวยๆ แล้วจบ
มันมีองค์ประกอบหลายอย่างที่ทำให้ตัวอักษร “ทำงาน” ได้จริง ทั้งสวย ทั้งอ่านง่าย ทั้งส่งอารมณ์ที่ถูกต้อง
มาดูกันว่า Key Elements ที่สำคัญมีอะไรบ้าง! 👇
1. Font & Typeface
Typeface คือ “ตระกูลตัวอักษร” เช่น Helvetica, Roboto, หรือ TH Sarabun
Font คือ “สไตล์เฉพาะ” ของตัวอักษรนั้น เช่น Bold, Italic, Regular
👉 เลือก Typeface ให้เหมาะกับแบรนด์และบริบทการใช้งาน เช่น ใช้ฟอนต์ทางการสำหรับองค์กร หรือฟอนต์สนุกๆ สำหรับแบรนด์ไลฟ์สไตล์
2. Hierarchy (ลำดับความสำคัญ)
หัวข้อใหญ่ หัวข้อย่อย เนื้อหาปกติ ต้องมีขนาดและน้ำหนักตัวอักษรแตกต่างกัน เพื่อ “นำทางสายตา” ให้ผู้อ่านรู้ว่าควรโฟกัสที่จุดไหนก่อน
👉 เทคนิคง่ายๆ: หัวข้อใหญ่ใช้ขนาดใหญ่ที่สุด, หัวข้อย่อยเล็กลง, เนื้อหาปกติขนาดมาตรฐาน
3. Contrast (ความแตกต่าง)
ความต่างระหว่างตัวหนังสือกับพื้นหลัง เช่น ดำบนขาว, ขาวบนดำ หรือใช้น้ำหนักตัวอักษรต่างกัน
👉 Contrast ที่ดีทำให้อ่านง่ายและลดภาระสายตา
4. Alignment (การจัดวางตัวอักษร)
ซ้าย, ขวา, กึ่งกลาง หรือ justify (ชิดขอบทั้งสองข้าง) การจัดวางที่เหมาะสมทำให้งานดูเป็นระเบียบ อ่านสบาย ไม่สับสน
👉 ในเว็บ/แอป ส่วนใหญ่มักจัดชิดซ้าย เพราะอ่านง่ายที่สุด
5. Spacing (ระยะห่าง)
Kerning: ระยะห่างระหว่างตัวอักษรแต่ละตัว
Tracking: ระยะห่างของทั้งกลุ่มข้อความ
Leading: ระยะห่างระหว่างบรรทัด
👉 ระยะห่างที่ดีทำให้ข้อความดูโปร่งโล่ง อ่านสบาย ไม่อึดอัด
6. Color
สีของตัวอักษรสามารถสร้างอารมณ์และเน้นจุดสำคัญได้ เช่น ใช้สีแดงเพื่อเตือน หรือสีเขียวเพื่อแสดงความปลอดภัย
👉 ต้องคำนึงถึงความสามารถในการเข้าถึง (Accessibility) ด้วย เช่น อย่าใช้สีอ่อนบนพื้นอ่อน
นอกจากนี้เรามาดูตัวอย่างของเว็บไซต์ที่มี Visual Hierarchy แข็งแรงกันต่อ
Visual Hierarchy คือการจัดลำดับความสำคัญขององค์ประกอบต่างๆ บนหน้าเว็บ (หรือแอป) ให้ผู้ใช้รู้ว่า “ควรสนใจอะไรเป็นอันดับแรก” “อ่านอะไรก่อน” และ “ทำอะไรต่อ”
โดยใช้ ขนาด สี ระยะห่าง ความหนา รูปทรง หรือแม้แต่ตำแหน่งการวาง เป็นตัวช่วย
Websites with strong visual hierarchy ก็คือเว็บไซต์ที่ จัดลำดับสายตาได้เก่งมาก เข้าใจง่าย นำผู้ใช้ไปสู่เป้าหมายได้ลื่นไหล ไม่งง ไม่สับสน
“การออกแบบที่ดี คือการใส่ใจทั้ง Typography และ Whitespace ให้พอดีและสมดุล” ตัวอักษรต้องออกแบบให้อ่านง่าย และพื้นที่ว่างต้องถูกใช้เพื่อสร้างจังหวะที่สบายตา อย่ามองข้ามรายละเอียดเล็กๆ พวกนี้ เพราะมันคือหัวใจของการออกแบบที่ผู้ใช้สัมผัสได้จริงตั้งแต่เสี้ยววินาทีแรก! ✨
ในโลกของการออกแบบ UX/UI ทุกวันนี้ การทำงานร่วมกันถือเป็นปัจจัยสำคัญที่ช่วยผลักดันความสำเร็จของโครงการออกแบบต่างๆ เพราะการออกแบบที่ดีไม่ได้เกิดขึ้นจากความคิดของคนคนเดียว แต่เกิดจากการผสมผสานของทักษะ ความรู้ และมุมมองที่หลากหลายจากทุกคนในทีม Blueseas Design Talk เป็นการสร้างพื้นที่ให้ทุกคนได้เรียนรู้และเติบโตไปพร้อมกัน ผ่านกระบวนการระดมสมอง การทดลอง และการปรับปรุงงานที่มีส่วนร่วมจากทุกฝ่าย
Blueseas Design Talk มุ่งหวังให้ทุกคนในทีมได้มีการแลกเปลี่ยนความคิดเห็นและการใช้เครื่องมือต่างๆ ที่ช่วยให้การทำงานในทีมมีประสิทธิภาพมากขึ้น เราจะได้เห็นว่าแต่ละคนในทีมมีบทบาทที่สำคัญในการสร้างสรรค์ผลงานออกมาอย่างไร และทำอย่างไรให้ทุกขั้นตอนในการออกแบบเป็นไปอย่างราบรื่นและเข้ากันได้
การทำงานร่วมกันในทีม UX/UI Design ไม่ได้เป็นแค่การแบ่งงาน แต่เป็นการสร้างความเข้าใจร่วมกันในภาพรวมของโปรเจ็กต์ การมีวิสัยทัศน์เดียวกัน และการเคารพในความคิดเห็นของเพื่อนร่วมทีม ล้วนเป็นปัจจัยที่ช่วยให้การออกแบบนั้นตอบสนองความต้องการของผู้ใช้ได้ดีที่สุด
งานในสาย UX/UI นั้น ต้องเรียนรู้ตลอดเวลาเพราะมีสิ่งใหม่ๆ เกิดขึ้นตลอด อย่าพลาด! 📚 ติดตามตอนต่อไป แล้วมาปลดล็อกสกิล UX/UI ให้เหนือชั้นไปอีกขั้นด้วยกัน! แล้วเจอกันใหม่กับ Blueseas Design Talk ครั้งต่อไป บายยยยยยย
