Rules

Dokumen ini menetapkan peraturan desain dan pedoman pendukung yang penting untuk pengembangan serta pemeliharaan Proyek NontonFlix. Semua anggota UI/UX diharapkan mengikuti aturan dan pedoman ini untuk menjaga konsistensi dan kualitas.

Panduan Figma

NontonFlix menggunakan dasar template Design System dari UNTITLED UI yang akan dimodifikasi sesuai dengan project NontonFlix.

Terdapat 3 File pada Project NontonFlix di Figma

1. Components → All Modified Components from UNTITLED UI & Design Tokens → Includes Colors, Shadow, Typographic Scale, Spacing, Radius...
2. Web Client → Web Application Design for Client
3. Admin Panel → Admin Backoffice

Pengerjaan termasuk, Dokumentasi: prinsip UX, patterns, aksesibilitas, microcopy, empty/error states.

Struktur & Organisasi File Figma

Contoh Struktur Admin panel Seperti ini:

Cover
BASE
  │── Dashboard
  │── Settings
  │── Movies
  │── Series
  │── Anime
  │── Manga
  │── C-Drama
  │── K-Drama
  │── Plan
  │── Member
  │── Users
  │── CMS
  │── ...
──────────────────
MODULES
  │── Payment Gateway
  │── Integration
  │── ...

Contoh Struktur Components seperti ini:

Cover
Foundations
  │── Colors
  │── Typography
  │── Icons
  │── Logos
  │── Spacing, Radius, Grids
  │── Effect Styles
──────────────────
UI Components
  │── Avatars
  │── Buttons & Buttons Groups
  │── Badges
  │── Checkboxes
  │── Dropdowns
  │── Inputs
  │── Sliders
──────────────────
Block Components
  │── App Style
  │── Table
  │── Modal
  │── Widgets
  │── Form
  │── Charts
  │── Tabs

Prinsip Desain Utama

• Mudah di Pahami: Informasi dan navigasi harus intuitif.
• Konsisten: Gunakan komponen yang sama di seluruh platform.
• Responsive: Harus optimal di berbagai ukuran layar.
• Aksesibel: Sesuai dengan WCAG untuk inklusivitas.

Identitas Visual

Logo

• Gunakan logo NontonFlix sesuai dengan varian yang tersedia (primary, ikon).
• Jaga ruang kosong sekitar logo agar tidak terkesan sempit.
• Hindari mengubah proporsi, warna, atau bentuk logo.

Warna Brand

• Gradient = #f8292a → #c10100 → # #7d0000
• Primary = #f8292a
• Secondary = #1c1c1c
• Accent = #fff

Typographic

• Brand Font = Groovy Fast Reguler
• Web Font = Geist

Animasi & Interaksi

• Kecepatan Animasi: 200-300ms (smooth & tidak berlebihan).
• Hover & Click Effect:
  • Tombol harus memiliki efek hover (misalnya perubahan warna atau shadow).
  • Komponen yang dapat diklik harus memberikan feedback visual.
• Transisi Halaman:
  • Gunakan efek fade-in-bottom atau slide-in ringan.
  • Hindari animasi berlebihan yang menghambat performa.

Aksesibilitas & UX

• Kontras Warna: Pastikan teks memiliki rasio kontras minimal 4.5:1 terhadap background.
• Keyboard Navigation: Semua elemen dapat diakses melalui tab keyboard.
• Form & Validasi:
  • Pesan error harus jelas dan spesifik.
  • Gunakan warna + ikon sebagai indikator kesalahan.
  • Dark Mode: Tema Default namun sediakan juga Light Mode.