paletteDesign System

Mood Board
& Style Guide

แนวทางภาพลักษณ์ของเว็บไซต์คณะวิทยาศาสตร์การกีฬา มหาวิทยาลัยบูรพา — รวมอารมณ์ของแบรนด์ สี ตัวอักษร ระยะห่าง และองค์ประกอบหน้าจอที่ใช้จริงทั่วทั้งเว็บไซต์

  • sportsพลังงาน · การเคลื่อนไหว
  • verifiedความน่าเชื่อถือทางวิชาการ
  • smartphoneMobile-first
  • accessibility_newWCAG AA
01 · Mood Board

อารมณ์และทิศทางภาพ

ผสาน “พลังของการกีฬา” เข้ากับ “ความน่าเชื่อถือของสถาบันการศึกษา” ภาพถ่ายจึงเน้นการเคลื่อนไหวจริงในสนามและห้องปฏิบัติการ ควบคู่กับพื้นที่สีเขียวเข้มและสีทองที่สะท้อนอัตลักษณ์มหาวิทยาลัยบูรพา

บรรยากาศการทดสอบสมรรถภาพบนลู่วิ่งในห้องปฏิบัติการ
วิทยาศาสตร์ที่วัดผลได้ห้องปฏิบัติการ สมรรถภาพ และข้อมูลเชิงประจักษ์
นิสิตนักกีฬาถือถ้วยรางวัลในหอเกียรติยศ
ความภาคภูมิใจของคณะเหรียญรางวัล นักกีฬา และศิษย์เก่าที่สร้างชื่อเสียง
การทดสอบ VO2max ในห้องปฏิบัติการ
การเรียนรู้ลงมือทำเครื่องมือจริง การทดลองจริง และการฝึกปฏิบัติ
บรรยากาศชายหาดบางแสนใกล้มหาวิทยาลัย
พื้นที่ของมหาวิทยาลัยบางแสน ชลบุรี และชีวิตนิสิตชายทะเล
บรรยากาศกิจกรรมเปิดบ้านแนะนำหลักสูตร
ประตูสู่อนาคตการรับสมัคร หลักสูตร และเส้นทางอาชีพ
บรรยากาศกิจกรรมประเพณีของมหาวิทยาลัย
ชุมชนและประเพณีกิจกรรม วัฒนธรรม และความผูกพันของนิสิต
#พลังงาน#การเคลื่อนไหว#วิชาการ#ความน่าเชื่อถือ #ชุมชน#ความภาคภูมิใจ#เรียบง่าย#เข้าถึงง่าย
02 · Colour

ชุดสีหลัก

สีเขียวเข้มเป็นสีหลักแทนคณะและมหาวิทยาลัย สีทองใช้เน้นสิ่งที่ต้องตัดสินใจ (CTA) ส่วนสีกรมท่าใช้กับพื้นที่เข้มเพื่อให้ตัวอักษรสีขาวอ่านง่าย

Green 700 · Primary#0A5C2F
Green 500 · Accent#16803F
Gold 500 · Highlight#EEB31C
Navy 800 · Text/Dark#0B1C30
Background#F6F8FB
Surface#FFFFFF
Muted Text#5D6F82
Danger / ประกาศด่วน#B42318
03 · Typography

ตัวอักษรและลำดับชั้น

ใช้ Noto Sans Thai เป็นฟอนต์หลักเพื่อความอ่านง่ายของภาษาไทย และ Space Grotesk สำหรับตัวเลข หัวข้อภาษาอังกฤษ และป้ายกำกับ เพื่อให้ได้อารมณ์ทันสมัยแบบงานกีฬา

Display / H1
คณะวิทยาศาสตร์การกีฬา
Heading / H2
หลักสูตรที่เปิดสอน
Heading / H3
วิทยาศาสตร์การออกกำลังกายและการกีฬา
Body
คณะวิทยาศาสตร์การกีฬา มหาวิทยาลัยบูรพา มุ่งผลิตบัณฑิตและสร้างองค์ความรู้ด้านวิทยาศาสตร์การออกกำลังกายและการกีฬา
Caption / Meta
อัปเดต 25 ตุลาคม 2569 · ประชาสัมพันธ์
Latin / Numbers
3 Gold · 5 Silver · 5 Bronze
04 · Layout Tokens

ระยะห่าง มุมโค้ง และเงา

ทุกองค์ประกอบใช้ชุดค่าร่วมกัน เพื่อให้ระยะห่างสม่ำเสมอและดูแลง่ายเมื่อเพิ่มเนื้อหาใหม่

Radius SM10px
Radius MD16px
Radius LG24px
Pill999px
Shadow SMการ์ดทั่วไป
Shadow MDhover / dropdown
Shadow LGmodal
Spacing base4 / 8 / 12 / 16 / 24 / 48
05 · Components

องค์ประกอบที่ใช้จริง

ตัวอย่างปุ่ม ป้าย ฟอร์ม และการ์ดจากหน้าเว็บจริง — ทุกองค์ประกอบมีสถานะ hover และ focus ที่ชัดเจน รองรับการใช้งานด้วยคีย์บอร์ด

campaignประกาศด่วน sports_scoreข่าวกีฬา ทุนวิจัย กีฬา
school

การ์ดเนื้อหา

ใช้กับการ์ดข่าว หลักสูตร ทุน และผลงาน โดยมีมุมโค้ง 16px และเงาเบาเมื่อ hover

info
กล่องแจ้งเตือน
ใช้กับข้อมูลที่ต้องอ่านก่อนตัดสินใจ เช่น กำหนดการหรือข้อควรระวัง
06 · Usage Rules

หลักการใช้งาน

กฎสั้น ๆ ที่ทีมใช้ตรวจงานก่อนเผยแพร่ทุกครั้ง

  • check_circleMobile-first: ออกแบบที่ความกว้าง 390px ก่อน แล้วขยายเป็น 768 / 1024 / 1200px — ห้ามมี horizontal scroll
  • check_circleตัวอักษร: เนื้อหาอย่างน้อย 16px บนมือถือ และมี contrast ไม่ต่ำกว่า 4.5:1
  • check_circleปุ่มหลัก: ใช้สีเขียวเข้มหรือทองเพียงหนึ่งปุ่มต่อหนึ่งพื้นที่ เพื่อให้ผู้ใช้รู้ว่าต้องกดอะไร
  • check_circleรูปภาพ: ใช้ภาพบรรยากาศจริงของคณะฯ ถ้าเป็นภาพประกอบต้องระบุ “ภาพประกอบ” ใต้ภาพ
  • check_circleตัวเลขและกำหนดการ: อ้างอิงประกาศทางการเท่านั้น หากไม่แน่ใจให้ลิงก์ไปยังประกาศต้นทาง
  • check_circleเข้าถึงได้: ทุกภาพมี alt ที่สื่อความหมาย ทุกปุ่มมี aria-label และโฟกัสเห็นชัด
homeกลับหน้าแรก descriptionBenchmark & AI Log