● PHASE 03 — VISUAL & COMMUNICATION GUIDELINE

หน้าตาที่จับต้องได้
ของแบรนด์

คู่มืออ้างอิงด้านภาพลักษณ์ สำหรับทีม Designer, Content, Video และ Web ใช้ตัดสินใจเรื่องสี ตัวอักษร ภาพ และองค์ประกอบกราฟิกให้ไปในทิศทางเดียวกัน

01 — Brand Foundation

ก่อนออกแบบ ต้องเข้าใจตัวตนนี้ก่อน

ทุกองค์ประกอบภาพในคู่มือนี้ถูกออกแบบให้สื่อสาร 3 คำนี้เสมอ: เข้าใจง่าย · อบอุ่น · น่าเชื่อถือ — ไม่ใช่แบรนด์สถาบันกวดวิชาทั่วไป แต่เป็น "ครู" ที่มีตัวตนจริง (อ่านเหตุผลเพิ่มเติมที่หน้า Personal Brand)

Positioning

ครูผู้เปลี่ยนความกลัวคณิตศาสตร์ ให้กลายเป็นความมั่นใจในการเรียนรู้

Primary Audience

ผู้ปกครองที่ต้องการครูที่ไว้ใจได้ เห็นผลจริง ดูแลลูกได้

Content Tone

Educate 60% · Inspire 25% · Entertain 10% · Promotion 5%

WarmFriendlyPassionate HumbleTrustworthyCreative InspirationalLifelong Learner
03 — Color System

ชุดสีแบรนด์

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

Primary — ใช้เป็นสีหลักของแบรนด์

Sun Yellow#FFCC00
White#FFFFFF

Secondary — พื้นหลังและข้อความ

Ink Navy#16233F
Charcoal#2B2620
Warm Gray#A79C8E
Cream#FBF3DF

Accent — ใช้เน้นจุดสำคัญเท่านั้น

Ember Orange#F2711C
Sky Blue#4FB8E8
Success Green#3FA34D — ใช้เฉพาะสื่อความสำเร็จ/รางวัล

สัดส่วนการใช้งานในหน้าจอ 1 ชิ้นงาน

Cream/White 45%
Yellow 25%
Navy 20%
Accent 10%
04 — Typography

ระบบตัวอักษร

Headline ใช้ฟอนต์หนา อ่านง่าย ให้ความรู้สึกมั่นใจแบบครูหน้ากระดาน ส่วน Body เน้นความสบายตาสำหรับผู้ปกครองที่ต้องอ่านเนื้อหายาว

Headline
Kanit

Bold / ExtraBold — หัวข้อ, ปุ่ม, ตัวเลขเด่น

Body
Sarabun

Regular / Medium — เนื้อหา, คำอธิบาย, บทความ

Formula / Data
x² + y

ใช้เฉพาะโจทย์คณิต, ตัวเลขสถิติ, แคปชันเชิงเทคนิค

H1 · Kanit ExtraBold · 46px
เลขไม่ยาก เพราะทุกเรื่องมีวิธีเข้าใจ
H2 · Kanit Bold · 32px
คอร์สติวคณิตสอบเข้า ม.4
H3 · Kanit SemiBold · 23px
เทคนิคการแก้โจทย์แบบเข้าใจจริง
Body · Sarabun Regular · 17px
การศึกษาที่ดีสามารถเปลี่ยนชีวิตคนได้ คณิตศาสตร์จึงไม่ใช่เพียงวิชาสอบ แต่เป็นเครื่องมือในการฝึกกระบวนการคิดและสร้างความมั่นใจ
Formula accent · JetBrains Mono · 19px
เข้าใจ + ฝึกฝน = มั่นใจ
Caption · Sarabun Medium · 13px
26 พฤษภาคม 2567 · SupK Center
05 — Iconography

สไตล์ไอคอน

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

Geometry

Notebook

∑x²

Formula

Mind Mapping

Connection

Learning

Growth

Achievement

06 — Illustration & Mascot

คาแรกเตอร์และภาพประกอบ

คาแรกเตอร์ครูซุปเค
01

เรียบง่าย โค้งมน — ไม่ใช้เส้นแหลมคม สัดส่วนหัวใหญ่กว่าตัวเล็กน้อยให้ดูเป็นมิตร

02

สีจำกัดในชุดแบรนด์ — ใช้เนวี่ + เหลือง + สีผิวธรรมชาติ ไม่ใส่สีสันจัดเกินความจำเป็น

03

ท่าทางสื่อการเรียนรู้ — ชี้กระดาน ถือดินสอ ยิ้มมั่นใจ ไม่ใช้ท่าทางที่ดูเป็นการขาย

04

ต่อยอดได้หลายรูปแบบ — Sticker, Mascot ประกอบคอร์ส, Motion เปิด-ปิดคลิป

07 — Photography Style

แนวทางภาพถ่าย

ภาพจริง ยิ้ม สบตากล้อง มีนักเรียนและบรรยากาศห้องเรียนจริง ไม่ใช่ภาพโพสสวยแบบสถาบันทั่วไป เน้น "โมเมนต์จริง" มากกว่าภาพจัดฉาก

บรรยากาศห้องเรียน + กระดาน
โมเมนต์ยินดีกับนักเรียน
ครูอธิบายโจทย์ใกล้ชิด
✓ ทำได้
  • แสงธรรมชาติ โทนอบอุ่น
  • สบตากล้องหรือสบตานักเรียน
  • มีองค์ประกอบกระดาน/สมุด/โจทย์จริงในเฟรม
✕ ห้ามทำ
  • ภาพสต็อกทั่วไปที่ไม่เกี่ยวกับแบรนด์
  • ฟิลเตอร์จัดจ้านผิดโทนสีแบรนด์
  • การจัดโพสที่ดูฝืน ไม่เป็นธรรมชาติ
08 — Motion Principles

การเคลื่อนไหว

Smooth, Friendly, Dynamic แต่ไม่หวือหวา — เน้นอธิบายเนื้อหามากกว่าการโชว์เอฟเฟกต์

Ease-Out

ใช้กับการเข้าเฟรมของข้อความ/ปุ่ม ให้ความรู้สึกมั่นใจ หนักแน่น

Gentle Bounce

ใช้กับ Mascot หรือไอคอน เพื่อความเป็นมิตร ไม่ใช้กับข้อความสำคัญ

Linear Reveal

ใช้กับ Diagram/Infographic แสดงลำดับขั้นตอนการคิด

09 — Applied Components

ตัวอย่างองค์ประกอบใช้งานจริง

ตัวอย่างการนำสี ตัวอักษร และหลักการข้างต้น มาประกอบเป็นชิ้นงานจริงสำหรับเว็บและโซเชียล — ดูตัวอย่างเต็มหน้าได้ที่ ตัวอย่างเว็บไซต์

Buttons

Content Cards

คอร์สติวคณิตสอบเข้า ม.4อัปเดต 26 พ.ค. 2567
เทคนิคแก้โจทย์แบบเข้าใจContent Pillar: Learn Better
เรื่องราวลูกศิษย์Content Pillar: Student Success

Quote / Testimonial

"เลขไม่ยาก เพราะทุกเรื่องมีวิธีเข้าใจ"

— ครูซุปเค, Positioning Statement
10 — Signature Graphic

สมการแห่งความมั่นใจ

องค์ประกอบกราฟิกที่เป็นลายเซ็นเฉพาะของแบรนด์ ถอดจาก Core Belief — ใช้เปิดคลิป, ปิดท้ายโพสต์ หรือใช้เป็นลวดลายพื้นหลัง

เข้าใจ
สนุก
รัก
ทำได้ดี
อนาคตเปลี่ยน
11 — Summary

สรุป Do & Don't ภาพรวม

✓ ควรทำเสมอ
  • ใช้เหลืองเป็นสีนำ เนวี่เป็นสีคุมโทน
  • เว้นพื้นที่หายใจ ไม่อัดองค์ประกอบแน่นเกินไป
  • ใช้ภาพ/โมเมนต์จริงจากห้องเรียน
  • สื่อสารด้วยน้ำเสียงอบอุ่น ให้กำลังใจ
✕ ควรหลีกเลี่ยง
  • เน้นโปรโมชั่นเป็นแกนหลักของภาพ
  • ใช้ Fear Marketing หรือคำขายตรงเกินไป
  • ภาพที่ดูเหมือนสถาบันกวดวิชาทั่วไปจนกลบตัวตนของครู
  • ใช้สีเขียวตกแต่งทั่วไป (สงวนไว้สื่อความสำเร็จเท่านั้น)
ต่อไป

ตัวอย่างเว็บไซต์ — Mockup หน้า Home

ไปหน้าถัดไป →