88 lines
3.9 KiB
Markdown
88 lines
3.9 KiB
Markdown
# 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
|
|
1. **Contextual Disclosure**: Tampilkan detail data hanya saat dibutuhkan (on-click/on-hover) untuk menjaga kebersihan peta.
|
|
2. **Smooth Transitions**: Gunakan durasi transisi 300ms untuk pembukaan panel sidebar atau modal.
|
|
3. **Action Priority**: Tombol "Lapor Kondisi" atau "Tambah Data" harus memiliki kontras warna tertinggi (Primary) agar mudah ditemukan seketika.
|
|
|
|
---
|
|
|
|
## 7. Implementasi CSS (Tokens)
|
|
```css
|
|
: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);
|
|
}
|
|
``` |