Branding, Identity & Style Guide

รายละเอียดในไฟล์ Figma สามารถดูประกอบกับเนื้อหาใน Wiki นี้ได้

Table of Contents

• Brand Personality
• Style Guide
  • Font Family
  • Color Styles
  • Logo

Brand Personality

หากมอง CU Get Reg เป็นคนคนหนึ่ง เขาจะเป็นคน...

1. สะอาด การนำเสนอของ CU Get Reg สะอาดและทันสมัย เป็นระเบียบและน่ามอง ชอบเล่นกับข้อมูล แต่ให้ข้อมูลเป็นตัวเอกเพื่อบอกเล่าเรื่องราวของมันเอง
2. สุขุมและน่าเชื่อถือ CU Get Reg เป็นผู้ที่ทุกคนเห็นแล้ววางใจ เชื่อในสิ่งที่บอกได้ หรือถ้าอยากคุยด้วยก็จะคุยด้วยอย่างจริงจังตั้งใจเช่นกัน ตัวอย่างการสร้างภาพลักษณ์ เช่น การใช้สีหลักเป็นสีน้ำเงินเข้ม และเลือกฟอนต์ไม่มีหัวที่ให้ความรู้สึกทันสมัยและมืออาชีพ
3. สว่างสดใส แม้จะมีความสุขุมเพียงใดแต่ก็ไม่ได้น่าเบื่อหรือหดหู่ ยังดูเฟรนด์ลี่เข้าถึงได้ ตัวอย่างการสร้างความสดใส เช่นการใช้ accent หลากสีประปรายเพื่อเพิ่มชีวิตชีวาให้กับหน้าเว็บ แต่ต้องใช้ให้พอดีเพื่อไม่ให้เกินหน้าความสุขุมไป

Style Guide

CU Get Reg อิง Design System จาก Material Design เป็นหลัก ซึ่งรวมไปถึง Type System และบางส่วนของ Color System แบบ Material Design ด้วย รายละเอียดของ Type System และ Color System จะกล่าวถึงในส่วนนี้ และแนะนำให้ดูประกอบกับ Figma หน้า Design System เพื่อภาพที่ดูง่ายขึ้น

Font Family

• หัวข้อ (Heading) ใช้ Prompt (Google Fonts) กับตัวอักษรภาษาไทย และ Poppins (Google Fonts) กับตัวอักษรภาษาอังกฤษและตัวเลข
• เนื้อความ (Body) ใช้ Chula Charas New (Download)

ในการใช้งานจริง มีการนิยาม Type System ตาม Material Design ไว้ โดยขนาดฟอนต์บน Desktop และ Mobile จะแตกต่างกันด้วย สามารถศึกษาการใช้งานจริงเพื่มเติมได้ที่

• Wiki: Design Guidelines (สำหรับ UX/UI Designer)
• Wiki: Theming (สำหรับ Frontend Developer)

Color Styles

แนะนำให้ดู Color Styles ใน Figma ประกอบกัน รวมถึงใช้โค้ดสีจากใน Figma

ชุดสีทั้งหมดที่ใช้ในเว็บไซต์ ได้แก่

• Neutral Scale สีน้ำเงิน-เทาออกไปทางน้ำเงิน มีตั้งแต่ 0 ถึง 900

  • 0: สีขาว
  • 10: ใช้ในโลโก้บนพื้นเข้ม และเป็นสีของข้อความบนพื้นเข้ม (Primary)
  • 500: Primary สีหลักของ CU Get Reg ใช้ในโลโก้บนพื้นอ่อน และเป็นสีของข้อความบนพื้นขาว

• Secondary สีเหลืองสด มีตั้งแต่ 50 ถึง 900

  • 300: Light Variant
  • 500: Medium Variant
  • 700: Dark Variant

• Highlight ประกอบด้วยสีทั้งหมด 8 สี

  • Pink
  • Red
  • Orange
  • Green
  • Teal
  • Blue
  • Indigo
  • Purple

  แต่ละสีมี 300, 500, 700

  • 300: Light Variant
  • 500: Medium Variant
  • 700: Dark Variant

มีการนิยาม Color System ตาม Material Design เอาไว้ แต่เรียกว่าไม่ได้ใช้เท่าไรนัก

สามารถศึกษาการใช้งานจริงเพื่มเติมได้ที่

• Wiki: Design Guidelines (สำหรับ UX/UI Designer)
• Wiki: Theming (สำหรับ Frontend Developer)

Logo

• โลโก้ย่อ ใช้ใน Favicon กับในสถานการณ์ที่จำเป็นจะต้องใช้โลโก้จัตุรัสหรือโลโก้ขนาดเล็ก เท่านั้น เช่น ใช้แบบเล็กๆ ที่ขอบของภาพประชาสัมพันธ์
• โลโก้เต็ม ใช้ในทุกสถานการณ์ นอกเหนือจากสถานการณ์ที่ใช้โลโก้ย่อ
• บนพื้นสีอ่อน/ขาว ใช้โลโก้ที่เป็นสี Primary500
• บนพื้นสีเข้ม/Primary ใช้โลโก้ที่เป็นสี Primary10