BAB 59. UI/UX DESIGN SYSTEM (MATERIAL 3)

Prinsip Desain

Prinsip	Implementasi
Ramah Pelajar	Bahasa sederhana, ikon intuitif
Modern	Material 3 dengan warna hidup
Bersih	Whitespace cukup, tidak padat
Mudah Dipahami	Hierarki visual jelas
Konsisten	Token desain dipakai di seluruh aplikasi

---

Design Philosophy

TemuBelajar menggunakan Material 3 dari Google dengan pendekatan Friendly Academic Interface — antarmuka yang terasa seperti teman belajar, bukan aplikasi formal yang kaku.

---

Prinsip Visual Utama

flowchart LR
    A["🎨 Color System\n(Dynamic Color M3)"] --> APP["📱 TemuBelajar\nUI"]
    B["✍️ Typography\n(Poppins / Roboto)"] --> APP
    C["📐 Spacing System\n(4px grid)"] --> APP
    D["🌟 Component Library\n(Material 3)"] --> APP
    E["♿ Accessibility\n(WCAG 2.1 AA)"] --> APP

    style APP fill:#2563EB,color:#fff

---

Komponen Material 3 yang Digunakan

Komponen	Penggunaan
App Bar	Judul halaman + navigasi kembali
Navigation Bar	Bottom nav: Home, Request, Chat, Profile
Card (Elevated)	Request card, booking card, user card
Filled Button	Aksi utama: Login, Kirim, Accept
Outlined Button	Aksi sekunder: Batal, Reject
FAB (Extended)	Tombol buat request baru
Dialog	Konfirmasi aksi penting
Bottom Sheet	Filter, detail cepat
Chip	Tag mata pelajaran, status
Badge	Jumlah notifikasi belum dibaca
Linear Progress	Loading indikator
Skeleton Loader	Placeholder saat data loading

---

Navigasi Utama

Bottom Navigation Bar
├── 🏠 Home (Dashboard)
├── 📝 Request (Buat & Lihat Request)
├── 💬 Chat (Daftar Percakapan)
└── 👤 Profile (Profil & Pengaturan)

---

Responsif & Adaptif

Device	Lebar Layar	Layout
Phone	< 600dp	Single column, bottom nav
Tablet	600–1024dp	Two columns, rail nav
Desktop	> 1024dp	Three columns, drawer nav

---

Aksesibilitas

• Kontras warna minimum 4.5:1 (WCAG 2.1 AA)
• Ukuran tap target minimum 48x48dp
• Screen reader support via Semantics widget Flutter
• Font scaling mendukung sistem accessibility Android/iOS

---

Halaman Utama

Halaman	Komponen Utama
Login	Logo, TextField, Filled Button
Dashboard Siswa	Greeting card, Quick actions, Jadwal, Leaderboard mini
Request Bantuan	Form stepper, Dropdown, DateTimePicker
Booking List	Card list, Status chip, Filter
Meeting Screen	Timer, QR Scanner, Check-In/Out button
Chat	Bubble chat, Input field, Attach button
Leaderboard	Rank list, Avatar, SIS Score badge
Profile	Avatar, Level bar, Badge grid, History

---

Flutter Theme Configuration

// app/theme/app_theme.dart

ThemeData get lightTheme => ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xFF2563EB), // Primary Blue
    brightness: Brightness.light,
  ),
  textTheme: GoogleFonts.poppinsTextTheme(),
  cardTheme: const CardThemeData(
    elevation: 1,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(16)),
    ),
  ),
  filledButtonTheme: FilledButtonThemeData(
    style: FilledButton.styleFrom(
      minimumSize: const Size(double.infinity, 52),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
    ),
  ),
);