KID LMS Home Design Notes

KID_LMS_HOME_DESIGN_NOTES

Purpose

• Giữ một design source-of-truth ngắn cho KID LMS Home để screen concept và các lần build sau không drift khỏi cùng một visual direction.

Visual Direction

• Mood: cute but calm
• Tone: playful but not noisy
• User feeling:
  • trẻ thấy dễ gần và dễ bấm,
  • phụ huynh nhìn vào vẫn hiểu ngay bé đang ở đâu và nên làm gì tiếp theo.

Typography

• Font family mặc định: Quicksand
• Weight:
  • body / label: regular hoặc medium
  • title / tab active / CTA chính: semibold hoặc bold
• Text density:
  • hero title tối đa 1-2 dòng
  • body copy ngắn 1-3 dòng
  • không dùng paragraph dài trên LMS Home

Layout Rhythm

• First view chỉ nên có:
  • Top Context Bar
  • Home Header
  • Tab Strip
  • 1 organism chính của tab hiện tại
• Spacing:
  • gap trong cluster nhỏ: 12-16
  • card padding: 20-24
  • gap giữa section: 24-32
• Không để nhiều block đồng trọng số ở first view.

Shape Language

• Button height 56 -> radius 20
• Button height 48 -> radius 18
• Tab control height 48 -> radius 18
• Hero / large card -> radius 32
• Medium card -> radius 24
• Nested card / panel nhỏ -> radius 16-20
• Không dùng full-round mặc định cho toàn bộ component.

Organism Set

• Overview Hero
• Overview To-do Board
• Snapshot Card
• Reminder Card
• Course Snapshot
• Next Action Hero
• Task List
• Upcoming Schedule List
• Achievement Cluster
• Later Placeholder Panel

Interaction Mood

• Tab switch nhẹ, nhanh, không phô trương.
• Hover/press feedback rõ nhưng ngắn.
• Không dùng celebration motion ở Home.
• Motion chỉ để hỗ trợ hiểu hierarchy và phản hồi thao tác.

Content Density Rules

• Overview: summary + preview only
• Khóa học: quyết định chính + course-specific stats
• Kho đề: optional self-practice by level
• Lịch học: schedule only
• Thành tích: motivation only
• Learning Stats: reflection only
• Kỷ niệm: placeholder nhẹ

Content Allocation Rule

• One organism, one question
• Overview Hero: Hôm nay nên chú ý gì trước tiên?
• Overview To-do Board: Những việc nào nên làm ngay bây giờ?
• Snapshot Card - Khóa học: Khóa đang học hiện tại là gì?
• Snapshot Card - Lịch học: Buổi học nào gần nhất cần được chú ý?
• Snapshot Card - Thành tích: Gần đây vừa đạt được gì?
• Learning Stats Snapshot: Điểm tiến bộ cô đọng nhất là gì?
• Kỷ niệm Snapshot: Có khoảnh khắc mới nào đáng xem không?
• Course Snapshot: Đang ở đâu trong khóa này?
• Next Action Hero: Làm gì tiếp theo?
• Upcoming Schedule List: Sắp học gì?
• Achievement Cluster: Đã đạt được gì?
• Learning Stats: Mình đang tiến bộ tới đâu?

Anti-pattern

• biến Overview thành dashboard dày thông tin
• lặp lại nguyên content của Khóa học, Lịch học, Thành tích trong Overview
• nhồi quá nhiều snapshot đồng trọng số trên cùng một first view
• biến Overview To-do Board thành backlog dài hoặc checklist course đầy đủ
• trộn Thành tích với Learning Stats trong cùng một organism
• làm Lịch học thành lesson breakdown screen
• dùng nhiều accent color mạnh cùng lúc
• cho nhiều CTA cùng trọng số trong cùng một hero