Fitaru UI Mockup

Dokumen ini mencatat hasil mockup high fidelity awal untuk Fitaru.

File Prototype

Prototype HTML statis:

fitaru-mockup.html

Preview screenshot:

fitaru-mockup-preview.png

Tujuan Mockup

Mockup ini dibuat untuk melihat gambaran luas arah visual Fitaru sebelum masuk ke development aplikasi mobile.

Fokus mockup:

• Rasa brand Fitaru
• Warna utama dan aksen
• Struktur layar mobile
• Komponen dashboard
• Komponen pencatatan makan dan olahraga
• Gaya progress page
• Gaya profile page

Screen yang Sudah Dibuat

1. Splash
2. Onboarding
3. Home / Dashboard
4. Catat Makan
5. Catat Olahraga
6. Progress
7. Profil

Arah Visual

Mockup menggunakan arah visual dari design system:

• Primary teal untuk aksi utama dan progress
• Deep teal untuk emphasis
• Soft mint untuk surface yang lembut
• Coral dan amber sebagai aksen hangat
• Background off-white agar aplikasi terasa ringan
• Card putih dengan border lembut
• Rounded UI yang ramah tapi tetap rapi

Catatan UI

• Home menonjolkan skor konsistensi, aksi cepat, dan ringkasan harian.
• Catat Makan dibuat sederhana dan kalori tetap opsional.
• Catat Olahraga memberi rasa apresiasi pada aktivitas ringan.
• Progress fokus pada tren dan insight, bukan sekadar angka berat.
• Profil memuat target dan pengaturan utama.

Catatan Iterasi Berikutnya

Hal yang bisa diperbaiki pada iterasi mockup berikutnya:

1. Membuat versi mobile satu layar penuh untuk setiap screen.
2. Mengganti emoji placeholder dengan icon final.
3. Membuat variasi state kosong.
4. Membuat flow setup profil.
5. Membuat komponen bottom sheet untuk tambah data.
6. Membuat prototype interaktif sederhana.