16 KiB
16 KiB
🎨 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