STYLE 1

โมเดิร์นโปรเฟสชันนัล

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

แนวคิดการออกแบบ

หลักการและปรัชญาของดีไซน์สไตล์นี้

ความเรียบง่าย (Minimalist)

ใช้องค์ประกอบเท่าที่จำเป็น ลดความซับซ้อน เน้นพื้นที่ว่างเพื่อให้เนื้อหาสำคัญโดดเด่น

🎯

ฟังก์ชันนำ (Function First)

ทุกองค์ประกอบมีจุดประสงค์ที่ชัดเจน ไม่มีการตกแต่งที่ไม่จำเป็น

🔄

Responsive & Modern

รองรับทุกขนาดหน้าจอ ใช้เทคนิคการออกแบบที่ทันสมัย

💡

เข้าใจง่าย (Intuitive)

ผู้ใช้สามารถเข้าใจและใช้งานได้ทันทีโดยไม่ต้องเรียนรู้มาก

ชุดสี (Color Palette)

สีหลักและสีรองที่ใช้ในระบบ

Primary
สีหลัก (Primary)
#0f172a
ใช้สำหรับ Sidebar, ข้อความหลัก
Accent
สีเน้น (Accent)
#0ea5e9
ปุ่มหลัก, ลิงก์, ไอคอนสำคัญ
Success
สำเร็จ (Success)
#10b981
สถานะอนุมัติ, การดำเนินการสำเร็จ
Warning
เตือน (Warning)
#f59e0b
รอดำเนินการ, แจ้งเตือน
Danger
อันตราย (Danger)
#ef4444
ข้อผิดพลาด, การลบ, ปฏิเสธ
Background
พื้นหลัง (Background)
#f8fafc
พื้นหลังหน้าเว็บหลัก

ตัวอักษร (Typography)

ฟอนต์และขนาดตัวอักษรที่ใช้ในระบบ

Font Family
Prompt
Google Fonts - รองรับภาษาไทยและอังกฤษ
หัวข้อหลัก (H1)
แดชบอร์ดบริหารทรัพยากรบุคคล
28px / Bold (700) / Letter-spacing: -0.5px
หัวข้อรอง (H2)
รายการบุคลากรล่าสุด
20px / Semi-bold (600)
หัวข้อย่อย (H3)
ข้อมูลทั่วไป
16px / Semi-bold (600)
ข้อความปกติ (Body)
ยินดีต้อนรับกลับมา! นี่คือภาพรวมข้อมูลทรัพยากรบุคคลของมหาวิทยาลัย
14px / Regular (400) / Line-height: 1.6
ข้อความรอง (Secondary)
แสดง 10 รายการจากทั้งหมด 156 รายการ
14px / Regular (400) / Color: #64748b
ข้อความเล็ก (Small)
อัปเดตล่าสุด: 5 นาทีที่แล้ว
12px / Regular (400) / Color: #94a3b8

ปุ่ม (Buttons)

รูปแบบปุ่มต่างๆ ที่ใช้ในระบบ

ปุ่มหลัก (Primary Buttons)
ปุ่มรอง (Secondary Buttons)

สถานะ (Status Badges)

ป้ายแสดงสถานะต่างๆ

อนุมัติแล้ว รอดำเนินการ ปฏิเสธ กำลังดำเนินการ

ฟอร์ม (Form Elements)

องค์ประกอบฟอร์มต่างๆ

การ์ด (Cards)

รูปแบบการ์ดที่ใช้แสดงข้อมูล

👥
8,547
บุคลากรทั้งหมด
รายการล่าสุด ดูทั้งหมด →

เนื้อหาของการ์ดจะแสดงที่นี่ การ์ดมี hover effect ที่ยกขึ้นเล็กน้อย

ระยะห่าง (Spacing)

ระบบระยะห่างที่ใช้ในการออกแบบ

8px
12px
16px
24px
32px
48px

มุมโค้ง (Border Radius)

ระดับความโค้งมนของมุม

4px
ปุ่มเล็ก
8px
Badge
10px
ปุ่ม, Input
12px
การ์ดเล็ก
20px
การ์ดใหญ่

เงา (Shadows)

ระดับเงาที่ใช้สร้างความลึก

Small
เงาเบา
Medium
เงาปกติ
Large
เงา Hover

ข้อดี-ข้อควรพิจารณา

สรุปจุดเด่นและข้อควรพิจารณาของสไตล์นี้

✅ จุดเด่น

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

⚠️ ข้อควรพิจารณา

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

เหมาะสำหรับ