454 lines
16 KiB
Markdown
454 lines
16 KiB
Markdown
# 🎨 WIREFRAME & VISUAL GUIDE - BERANDA WISATA
|
||
|
||
## 📱 Full Page Layout
|
||
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ │
|
||
│ ╔═══════════════════════╗ │ ← SliverAppBar (Expandable)
|
||
│ ║ Jelajahi Lumajang ║ │ Height: 140pt
|
||
│ ║ Temukan 8 destinasi ║ │ Gradient: #1F8F5F → #2FA86B
|
||
│ ║ wisata alam ║ │
|
||
│ ╚═══════════════════════╝ │
|
||
│ │
|
||
├─────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────┐ │ ← Search Bar
|
||
│ │ 🔍 Cari wisata favori │ │ Rounded: 14pt
|
||
│ └─────────────────────────┘ │ Shadow: subtle
|
||
│ │
|
||
│ Kategori │ ← Filter Title
|
||
│ [Semua] [Gunung] [Danau] ... │ Filter Buttons
|
||
│ │ Horizontal scroll
|
||
│ 3 wisata │ ← Result Counter
|
||
│ │
|
||
├─────────────────────────────────┤
|
||
│ │
|
||
│ ┌──────────────┬──────────────┐ │ ← Grid 2 Kolom
|
||
│ │ Card 1 │ Card 2 │ │ CrossAxisSpacing: 14pt
|
||
│ ├──────────────┼──────────────┤ │
|
||
│ │ Card 3 │ Card 4 │ │
|
||
│ ├──────────────┼──────────────┤ │ MainAxisSpacing: 18pt
|
||
│ │ Card 5 │ Card 6 │ │
|
||
│ ├──────────────┼──────────────┤ │
|
||
│ │ Card 7 │ Card 8 │ │
|
||
│ └──────────────┴──────────────┘ │
|
||
│ │
|
||
│ [Bottom Pad] │ ← 40pt padding
|
||
│ │
|
||
└─────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 💳 Card Detail Wireframe
|
||
|
||
### Card Dimensions
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ │
|
||
│ ╔═════════════════════════╗ │
|
||
│ ║ [Image Area] ⭐4.8 ║ │ ← Image: 60% height
|
||
│ ║ 🏔️ [Category] ║ │ Rating Badge (top-right)
|
||
│ ║ [Gradient Overlay] ║ │ Category Badge (top-left)
|
||
│ ║ ║ │
|
||
│ ╚═════════════════════════╝ │
|
||
│ ┌─────────────────────────┐ │
|
||
│ │ Gunung Semeru │ │ ← Content: 40% height
|
||
│ │ Gunung tertinggi di J.. │ │ Name: 14pt bold
|
||
│ │ 📍 Ranu Pani, Lumajang │ │ Desc: 12pt
|
||
│ └─────────────────────────┘ │ Lokasi: 11pt
|
||
│ │
|
||
└─────────────────────────────────┘
|
||
|
||
Width: Full screen - 40pt padding (20pt left, 20pt right)
|
||
AspectRatio: 0.75 (height = width × 1.33)
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 Card Color Breakdown
|
||
|
||
### Image Section
|
||
```
|
||
┌──────────────────────────────┐
|
||
│ [Gambar Landscape] │ ← Image.asset()
|
||
├──────────────────────────────┤
|
||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ ← Gradient: transparent → black
|
||
│ ▓▓▓ Rating Badge ▓▓ 4.8 ▓▓ │ Opacity: 0 → 0.3
|
||
│ ▓▓▓ ⭐ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||
│ ▓▓ 🏔️ Gunung ▓▓▓▓▓▓▓▓▓▓▓▓ │ ← Category Badge
|
||
│ │
|
||
└──────────────────────────────┘
|
||
|
||
Rating Badge:
|
||
- Color: #E28D42 (Orange)
|
||
- Position: 10pt top, 10pt right
|
||
- Padding: 8px horizontal, 4px vertical
|
||
- Radius: 8pt
|
||
|
||
Category Badge:
|
||
- Color: Category color (depends on kategori)
|
||
- Position: 10pt top, 10pt left
|
||
- Padding: 8px horizontal, 4px vertical
|
||
- Radius: 8pt
|
||
```
|
||
|
||
### Content Section
|
||
```
|
||
┌──────────────────────────────┐
|
||
│ Gunung Semeru │ ← Name: 14pt bold, #1F8F5F
|
||
│ Gunung tertinggi di Jawa │ ← Desc: 12pt, gray
|
||
│ │
|
||
│ 📍 Ranu Pani, Lumajang │ ← Location: 11pt, #537561
|
||
│ │
|
||
└──────────────────────────────┘
|
||
|
||
Padding:
|
||
- Horizontal: 12pt
|
||
- Vertical: 10pt
|
||
- Space between lines: 4-6pt
|
||
|
||
Colors:
|
||
- Nama: #1F8F5F (Primary)
|
||
- Deskripsi: #999999 (Gray)
|
||
- Lokasi: #537561 (Dark Green)
|
||
- Icon: #8B6F47 (Brown)
|
||
```
|
||
|
||
---
|
||
|
||
## 🔍 Search Bar Wireframe
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 🔍 Cari wisata favoritmu... ✕ │
|
||
└─────────────────────────────────────────┘
|
||
↑ ↑
|
||
Padding: 16pt Padding: 16pt
|
||
|
||
Properties:
|
||
- Border radius: 14pt
|
||
- Background: White (#FFFFFF)
|
||
- Placeholder color: #CCCCCC
|
||
- Text color: #1F8F5F
|
||
- Focus border: 2pt #1F8F5F
|
||
- Shadow: 8pt blur, 4pt offset
|
||
- Vertical padding: 13pt
|
||
```
|
||
|
||
---
|
||
|
||
## 🏷️ Filter Buttons Wireframe
|
||
|
||
### State: Unselected
|
||
```
|
||
┌──────────────┐
|
||
│ Semua │ ← Background: #CCCCCC (gray)
|
||
└──────────────┘ Text: gray[600]
|
||
Padding: 16px h, 9px v
|
||
Radius: 10pt
|
||
```
|
||
|
||
### State: Selected
|
||
```
|
||
┌──────────────┐
|
||
│ Gunung │ ← Background: #8B6F47 (brown)
|
||
└──────────────┘ Text: white
|
||
Shadow: brown 0.3 opacity
|
||
Transition: 200ms
|
||
```
|
||
|
||
### Filter Row Layout
|
||
```
|
||
[Semua] [Gunung] [Danau] [Pantai]
|
||
10pt 10pt 10pt 10pt
|
||
↑ ↑
|
||
ScrollView horizontal Container
|
||
Start padding End padding
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 Category Badge Colors
|
||
|
||
### Warna Category:
|
||
```
|
||
🏔️ Gunung:
|
||
Selected: #8B6F47 (Brown)
|
||
Badge: #8B6F47
|
||
|
||
🌊 Danau:
|
||
Selected: #4A90E2 (Blue)
|
||
Badge: #4A90E2
|
||
|
||
🏖️ Pantai:
|
||
Selected: #E28D42 (Orange)
|
||
Badge: #E28D42
|
||
|
||
🎯 Semua:
|
||
Selected: Colors.grey
|
||
Badge: No specific color
|
||
```
|
||
|
||
---
|
||
|
||
## 🎬 Animation Specs
|
||
|
||
### Card Tap Animation
|
||
```
|
||
Before:
|
||
┌─────────────┐
|
||
│ Card │ Scale: 1.0
|
||
│ 100% │
|
||
└─────────────┘
|
||
|
||
During tap:
|
||
┌──────────┐
|
||
│ Card │ Scale: 0.95
|
||
│ 95% │ Duration: 300ms
|
||
└──────────┘ Curve: easeInOut
|
||
|
||
After release:
|
||
┌─────────────┐
|
||
│ Card │ Scale: 1.0
|
||
│ 100% │
|
||
└─────────────┘
|
||
```
|
||
|
||
### Filter Button Transition
|
||
```
|
||
Unselected → Selected:
|
||
- Duration: 200ms
|
||
- Property: backgroundColor
|
||
- Curve: default
|
||
- Shadow appears when selected
|
||
```
|
||
|
||
---
|
||
|
||
## 📐 Spacing System
|
||
|
||
### Horizontal Spacing
|
||
```
|
||
┌──────────┬────────────┬──────────┐
|
||
│ Card 1 │ Spacing │ Card 2 │
|
||
│ │ 14pt │ │
|
||
└──────────┴────────────┴──────────┘
|
||
↑ ↑
|
||
Padding 20pt Padding 20pt
|
||
```
|
||
|
||
### Vertical Spacing
|
||
```
|
||
Card 1
|
||
↓ 18pt
|
||
Card 2
|
||
↓ 18pt
|
||
Card 3
|
||
↓ 18pt
|
||
Card 4
|
||
...
|
||
↓
|
||
Bottom padding 40pt
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 Header Expandable Bar
|
||
|
||
### Collapsed State (Pinned)
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ Jelajahi Lumajang │ ← Title: 32pt bold
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### Expanded State
|
||
```
|
||
┌────────────────────────────────────┐
|
||
│ │
|
||
│ Jelajahi Lumajang │ ← Title: 32pt
|
||
│ Temukan 8 destinasi wisata alam│ ← Subtitle: 14pt
|
||
│ │
|
||
│ [Gradient background] │
|
||
│ │
|
||
└────────────────────────────────────┘
|
||
|
||
Height: 140pt
|
||
Expanded background fills with gradient
|
||
Text aligned to bottom-left
|
||
```
|
||
|
||
---
|
||
|
||
## 🔄 Layout Flow
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 1. SliverAppBar │ ← Expandable header
|
||
│ (140pt) │
|
||
└─────────────────────────────┘
|
||
↓
|
||
┌─────────────────────────────┐
|
||
│ 2. Search + Filter │ ← SliverToBoxAdapter
|
||
│ (120pt total) │
|
||
└─────────────────────────────┘
|
||
↓
|
||
┌─────────────────────────────┐
|
||
│ │
|
||
│ 3. Grid Cards │ ← SliverGrid
|
||
│ (8 cards × 4 rows) │
|
||
│ (Scrollable) │
|
||
│ │
|
||
└─────────────────────────────┘
|
||
↓
|
||
┌─────────────────────────────┐
|
||
│ 4. Bottom Padding │ ← SliverPadding
|
||
│ (40pt) │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 📱 Responsive Behavior
|
||
|
||
### Portrait (< 600dp)
|
||
```
|
||
┌─────────────────┐
|
||
│ Card 1 │
|
||
├─────────────────┤
|
||
│ Card 2 │
|
||
├─────────────────┤
|
||
│ Card 3 │
|
||
├─────────────────┤
|
||
│ Card 4 │
|
||
└─────────────────┘
|
||
|
||
Grid: 2 kolom
|
||
Spacing: 14pt
|
||
```
|
||
|
||
### Landscape (600-900dp)
|
||
```
|
||
┌──────────────┬──────────────┬──────────────┐
|
||
│ Card 1 │ Card 2 │ Card 3 │
|
||
├──────────────┼──────────────┼──────────────┤
|
||
│ Card 4 │ Card 5 │ Card 6 │
|
||
└──────────────┴──────────────┴──────────────┘
|
||
|
||
Grid: 3 kolom (optional)
|
||
```
|
||
|
||
---
|
||
|
||
## 🖼️ Image Placeholder Fallback
|
||
|
||
```
|
||
┌──────────────────────────┐
|
||
│ [Gradient Background] │ ← #1F8F5F → #2FA86B
|
||
│ ╔════════════════════╗ │
|
||
│ ║ ║ │
|
||
│ ║ 🏔️ Icon ║ │ ← Icon: 50pt white
|
||
│ ║ (Landscape) ║ │
|
||
│ ║ ║ │
|
||
│ ╚════════════════════╝ │
|
||
│ │
|
||
└──────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 Empty State Layout
|
||
|
||
```
|
||
┌────────────────────────────────┐
|
||
│ │
|
||
│ │
|
||
│ ┌────────────┐ │
|
||
│ │ ┌────────┐ │ │ ← Circular background
|
||
│ │ │ 🔍 │ │ │ (diameter: 90pt)
|
||
│ │ │ off │ │ │
|
||
│ │ └────────┘ │ │
|
||
│ └────────────┘ │
|
||
│ │
|
||
│ Wisata tidak ditemukan │ ← Title: 16pt bold
|
||
│ │ ← Margin: 20pt
|
||
│ Coba ubah pencarian atau │ ← Message: 13pt
|
||
│ filter kategori │
|
||
│ │
|
||
└────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 Color Palette Visual
|
||
|
||
```
|
||
Primary Colors:
|
||
┌──────────────────────────┐
|
||
│ ███ #1F8F5F (Main) │ Hijau Alam
|
||
│ ███ #2FA86B (Light) │ Hijau Terang
|
||
│ ███ #0D6A45 (Dark) │ Hijau Gelap
|
||
└──────────────────────────┘
|
||
|
||
Category Colors:
|
||
┌──────────────────────────┐
|
||
│ ███ #8B6F47 (Mountain) │ Coklat Earthy
|
||
│ ███ #4A90E2 (Lake) │ Biru Danau
|
||
│ ███ #E28D42 (Beach) │ Orange
|
||
└──────────────────────────┘
|
||
|
||
Neutral Colors:
|
||
┌──────────────────────────┐
|
||
│ ███ #FFFFFF (Surface) │ Putih
|
||
│ ███ #F7F4EA (Background)│ Krem
|
||
│ ███ #999999 (Hint) │ Abu-abu
|
||
└──────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 🔗 Touch Target Areas
|
||
|
||
### Card Touch Area
|
||
```
|
||
┌────────────────────────────────┐
|
||
│ ╔════════════════════════════╗ │
|
||
│ ║ ║ │
|
||
│ ║ Touch Area: Entire ║ │ ← Minimum: 48pt
|
||
│ ║ Card (safe from edges) ║ │ Recommended
|
||
│ ║ ║ │
|
||
│ ╚════════════════════════════╝ │
|
||
└────────────────────────────────┘
|
||
```
|
||
|
||
### Button Touch Area
|
||
```
|
||
┌──────────────┐
|
||
│ Semua │ ← Min height: 44pt
|
||
│ Tap Area: 44x44pt
|
||
└──────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 📐 Typography Scale
|
||
|
||
```
|
||
Header: 32pt bold ← "Jelajahi Lumajang"
|
||
Subtitle: 14pt ← "Temukan 8 destinasi..."
|
||
Card Name: 14pt bold ← "Gunung Semeru"
|
||
Card Desc: 12pt ← "Gunung tertinggi..."
|
||
Card Location:11pt ← "📍 Ranu Pani, Lumajang"
|
||
Button: 13pt ← Filter buttons
|
||
Counter: 12pt ← "3 wisata"
|
||
Hint: 14pt ← Placeholder text
|
||
```
|
||
|
||
---
|
||
|
||
**Visual Guide Complete**
|
||
*Gunakan wireframe ini sebagai referensi saat development*
|
||
*Untuk kode implementasi, lihat destination_card_modern.dart*
|