GeoPoverty Light: UI/UX Design Context & Guidelines (v1.0)

Dokumen ini mendefinisikan bahasa visual dan standar antarmuka untuk platform GeoPoverty GIS. Fokus utama desain adalah kejernihan data, profesionalisme, dan efisiensi navigasi spasial dalam balutan estetika yang bersih dan modern.

1. Filosofi Desain: "Lumina GIS"

Estetika ini mengutamakan kejernihan (clarity) dan kedalaman (depth). Dengan menggunakan latar belakang yang terang dan kontras tinggi, data kemiskinan yang kompleks diubah menjadi informasi yang mudah dicerna tanpa kehilangan kesan premium.

2. Identitas Visual & Palet Warna

Menggunakan skema warna yang didominasi oleh warna dingin dan netral untuk menciptakan kesan platform yang objektif dan tepercaya.

Warna Utama (Core Colors)

Primary (Electric Indigo): #6366F1 - Digunakan untuk aksi utama (CTA), indikator aktif, dan elemen branding.
Surface (Ghost White): #F7F9FB - Warna latar belakang utama untuk menjaga tampilan tetap segar dan bersih.
On-Surface (Deep Slate): #1A2138 - Warna teks utama untuk keterbacaan maksimal.
Secondary (Teal): #14B8A6 - Digunakan untuk indikator status positif atau kategori infrastruktur tertentu.
Error (Crimson): #EF4444 - Digunakan untuk status "Prioritas 1" atau kondisi kritis.
Outline (Soft Steel): #D8DADC - Untuk garis pemisah dan border yang halus.

3. Tipografi

Menggunakan font Hanken Grotesk untuk kesan modern dan teknis yang tetap ramah pengguna.

Display/Headlines: Bold, kerning rapat (-0.02em). Memberikan penekanan kuat pada judul panel.
Body Text: Regular, line-height 1.6. Memastikan alamat dan deskripsi panjang mudah dibaca.
Labels/Data: Semi-bold, ukuran 11-12px. Digunakan untuk statistik wilayah dan label marker.

4. Prinsip Layout & Komposisi

Platform ini menggunakan pendekatan Layered Architecture:

A. Base Layer (The Map)

Peta selalu menjadi kanvas dasar. Gunakan basemap dengan saturasi rendah agar marker data (Indigo/Teal/Red) terlihat menonjol.

B. Glassmorphic Panels

Semua panel UI (Sidebar, Header, Cards) menggunakan efek transparansi:

background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.3);

C. Container Strategy

Corner Radius: Konsisten di 16px untuk elemen besar dan 8px untuk elemen kecil (tombol/badge).
Elevation: Gunakan bayangan yang sangat lembut (shadow-sm) untuk memisahkan panel dari peta, menghindari garis hitam yang kaku.

5. Komponen Antarmuka (UI Components)

Data Cards (Keluarga & Infrastruktur)

State: Kartu yang dipilih (selected) harus mendapatkan aksen border Primary 2px.
Hierarchy: Nama Kepala Keluarga sebagai judul utama, diikuti oleh alamat dan status bantuan dalam bentuk badge berwarna.

Interactive Markers

Active State: Saat diklik, marker harus memberikan feedback visual (pembesaran ukuran atau pendaran cahaya/glow).
Radius Visualization: Lingkaran radius rumah ibadah menggunakan fill opacity 5% dengan garis tepi tipis (1px dashed).

6. Pengalaman Pengguna (UX) & Interaksi

Contextual Disclosure: Tampilkan detail data hanya saat dibutuhkan (on-click/on-hover) untuk menjaga kebersihan peta.
Smooth Transitions: Gunakan durasi transisi 300ms untuk pembukaan panel sidebar atau modal.
Action Priority: Tombol "Lapor Kondisi" atau "Tambah Data" harus memiliki kontras warna tertinggi (Primary) agar mudah ditemukan seketika.

7. Implementasi CSS (Tokens)

:root {
  --lumina-primary: #6366f1;
  --lumina-surface: rgba(247, 249, 251, 0.8);
  --lumina-text: #1a2138;
  --lumina-radius: 16px;
  --lumina-glass: blur(16px);
}

.panel-premium {
  background: var(--lumina-surface);
  backdrop-filter: var(--lumina-glass);
  border-radius: var(--lumina-radius);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

3.9 KiB Raw Blame History