# GTL Maps - Visual Assets Design Specifications

## Brand Identity

**Plugin Name:** GTL Maps  
**Tagline:** Showcase cycling routes with GPX tracks, interactive maps, and elevation profiles  
**Core Concepts:** Cycling, Routes, Maps, GPX, Outdoor Tourism  
**Visual Theme:** Clean, modern, outdoor/adventure aesthetic

### Suggested Color Palette

**Primary Colors:**
- Map Blue: `#2C5F8D` (trust, navigation)
- Route Orange: `#FF6B35` (energy, adventure)
- Nature Green: `#4A9F4D` (outdoors, paths)

**Accent Colors:**
- Light Gray: `#F5F5F5` (backgrounds)
- Dark Gray: `#333333` (text)
- White: `#FFFFFF`

**Usage:**
- Use Map Blue for primary branding elements
- Route Orange for route lines and highlights
- Nature Green for POI markers and accents

---

## 1. Plugin Icon Design

### Required Files
- `icon-128x128.png` (REQUIRED)
- `icon-256x256.png` (REQUIRED - create at 256px and downscale)

### Design Specifications

**Dimensions:** 256×256px (then export at 128×128px)  
**Format:** PNG with transparency or solid background  
**File Size:** <50KB each

**Design Concept:**
Create a simple, recognizable icon combining map and route elements.

**Recommended Elements:**
1. **Base Shape:** Rounded square or circle (leaves 20px padding)
2. **Primary Symbol:** Map location pin
3. **Secondary Element:** Stylized route/path line or elevation profile silhouette
4. **Style:** Flat design, 2-3 colors max

**Example Composition:**
```
┌─────────────────┐
│   [Icon Area]   │  Padding: 20px on all sides
│                 │
│      📍         │  Map pin (centered-top)
│     ╱╲╱╲       │  Simple route line beneath
│   ▁▂▃▂▁        │  OR: Elevation profile below
│                 │
└─────────────────┘
```

**Design Tips:**
- Keep it simple - must be recognizable at 32×32px
- Avoid fine details or thin lines (<3px)
- Use solid, bold shapes
- Test visibility in both light and dark contexts

**Tools:**
- Canva: Use "Icon" template (256×256px)
- Figma: Create 256×256px frame with 20px padding guides
- Illustrator: Export as PNG @2x (256px) and @1x (128px)

---

## 2. Banner (Header Image) Design

### Required Files
- `banner-772x250.png` (REQUIRED)
- `banner-1544x500.png` (Retina - RECOMMENDED)

### Design Specifications

**Dimensions:** 1544×500px (then export at 772×250px)  
**Format:** PNG or JPG  
**File Size:** <200KB each

**Design Concept:**
Showcase the plugin's main feature: interactive maps with cycling routes.

**Layout Structure:**
```
┌────────────────────────────────────────────────────────┐
│                                                        │
│  [Left 40%: Interactive Map]    [Right 60%: Content] │
│  - Route line visible            - Plugin logo/name   │
│  - Elevation profile             - Key features       │
│  - POI markers                   - Call-to-action     │
│                                                        │
└────────────────────────────────────────────────────────┘
```

**Content Breakdown:**

**Left Section (40% - 617px wide):**
- Screenshot of the interactive Leaflet map
- Visible route line in orange/red
- 2-3 POI markers
- Elevation profile chart at bottom
- Slight overlay/blur to highlight text on right

**Right Section (60% - 927px wide):**
- Plugin Name: "GTL Maps" (72pt, Bold)
- Tagline: "Beautiful cycling routes with GPX elevation profiles" (24pt)
- 3 Key Features (icons + text, 18pt):
  - 🗺️ Interactive Leaflet Maps
  - 📈 Elevation Profiles & Stats
  - 📍 Points of Interest
- Background: Semi-transparent white overlay (#FFFFFF 90% opacity)

**Typography:**
- Heading: Sans-serif bold (Montserrat, Poppins, or similar)
- Body: Sans-serif regular (Open Sans, Roboto)

**Design Tips:**
- Keep text readable at small sizes
- Use high contrast (dark text on light background)
- Ensure map imagery shows actual plugin functionality
- Avoid generic stock photos - use real plugin screenshots

---

## 3. Screenshots Design

### Required Files
- `screenshot-1.png` - Backend route editor
- `screenshot-2.png` - Frontend map display
- `screenshot-3.png` - POI management (optional)
- `screenshot-4.png` - Settings page (optional)

### Specifications

**Dimensions:** 1280×960px (4:3 ratio) or 1920×1080px (16:9)  
**Format:** PNG or JPG  
**File Size:** <500KB each  
**Recommended:** 1280px wide (displayed at 772px on WordPress.org)

### Screenshot 1: Backend Route Editor

**What to Capture:**
- WordPress admin screen: Edit Route post type
- GPX upload meta box visible and in use
- Automatically computed statistics displayed:
  - Distance (e.g., "42.5 km")
  - Elevation Gain (e.g., "+850 m")
  - Elevation Loss (e.g., "-820 m")
  - Route duration/time
  - Bounding box coordinates
- Show a GPX file name after upload
- Map preview if visible

**How to Take:**
1. Log into WordPress admin (https://gtl-wp.ddev.site/wp-admin)
2. Navigate to: Routes → Edit an existing route with GPX uploaded
3. Scroll to show the GPX meta box clearly
4. Take full-screen screenshot (Cmd+Shift+3 on Mac)
5. Crop to show just the relevant content area (no browser chrome)

**Annotations (Optional):**
- Add arrows pointing to key features
- Highlight the automatic calculations
- Use semi-transparent overlays for emphasis

---

### Screenshot 2: Frontend Interactive Map

**What to Capture:**
- Public-facing website view (not admin)
- Full interactive Leaflet map
- Route line clearly visible (orange/red color)
- Elevation profile chart below map
- POI markers on map (if available)
- Category filter buttons (if visible)
- Clean, professional design

**How to Take:**
1. Navigate to a published route's public URL
2. Ensure map is fully loaded
3. Zoom map to show entire route clearly
4. Expand elevation profile if collapsible
5. Take screenshot showing map + elevation together
6. Crop to focus on plugin content (exclude header/footer if busy)

**Design Notes:**
- Map should show clear route path
- Elevation chart should be visible
- Include 2-3 POI markers if possible
- Show map controls (zoom, layers)

---

### Screenshot 3: POI Management Screen

**What to Capture:**
- WordPress admin: POIs → All POIs listing
- Table showing multiple POIs with:
  - POI title
  - Categories with custom icons
  - Coordinates (lat/long)
  - Associated routes
- Highlight the custom icon feature

**How to Take:**
1. Navigate to: POIs → All POIs in admin
2. Ensure at least 3-5 POIs are visible
3. Show POI categories with custom icons if set
4. Take screenshot of the admin list view
5. Crop to remove unnecessary browser elements

**Alternative View:**
- Single POI edit screen showing:
  - Category selection with icon preview
  - Coordinate input fields
  - Automatic route association

---

### Screenshot 4: Settings Page

**What to Capture:**
- GTL Maps settings page
- Configuration options visible:
  - Map tile provider selection
  - POI association radius
  - Display options
  - Default map settings
- Show the settings in a configured state (not empty)

**How to Take:**
1. Navigate to: Settings → GTL Maps
2. Scroll to show primary settings
3. Take screenshot of settings panel
4. Crop to focus on settings content

---

## Screenshot Post-Processing

**Recommended Tools:**
- **CleanShot X** (Mac): Annotate and highlight features
- **Snagit**: Cross-platform screenshot tool with annotations
- **Photoshop/Figma**: Professional editing and annotations

**Post-Processing Steps:**
1. Crop to 1280×960px or similar (4:3 ratio)
2. Ensure text is readable (not too small)
3. Add subtle annotations if helpful:
   - Arrows pointing to key features
   - Text callouts in plugin brand colors
   - Semi-transparent highlight boxes
4. Optimize file size with TinyPNG or Squoosh
5. Save as PNG for crisp text or JPG at 90% quality

**Quality Checklist:**
- [ ] Text is sharp and readable
- [ ] No personal/sensitive information visible
- [ ] Screenshot shows plugin in best light
- [ ] Consistent styling across all screenshots
- [ ] File size under 500KB
- [ ] Dimensions at least 1200px wide

---

## Quick Start Workflow

### For Canva Users (Free)

1. **Icon:**
   - Create custom 256×256px design
   - Use "Icon" or "Logo" template
   - Add map pin + route elements
   - Export as PNG (transparent)

2. **Banner:**
   - Search for "Banner 1544x500" template
   - Use landscape/outdoor background
   - Add text overlay with plugin name
   - Include screenshot of map (take first, then import)
   - Export as PNG

### For Figma Users

1. **Create Frames:**
   - Icon: 256×256px
   - Banner: 1544×500px
   - Screenshot template: 1280×960px

2. **Design System:**
   - Save brand colors as styles
   - Create text styles for consistency
   - Use components for repeated elements

### For Designer Handoff

**Provide:**
- This specification document
- Brand colors and fonts
- Sample screenshots from WordPress admin
- Examples of preferred style (show 2-3 WordPress.org plugin pages you like)
- Final file naming requirements (icon-256x256.png, etc.)

---

## File Naming Reference

After creating all assets, ensure they're named exactly as follows:

```
.wordpress-org/
├── banner-772x250.png      (REQUIRED)
├── banner-1544x500.png     (Recommended for Retina)
├── icon-128x128.png        (REQUIRED)
├── icon-256x256.png        (REQUIRED)
├── screenshot-1.png        (Backend editor)
├── screenshot-2.png        (Frontend map)
├── screenshot-3.png        (POI management - optional)
└── screenshot-4.png        (Settings page - optional)
```

**Important:** File names are case-sensitive and must match exactly.

---

## Inspiration & Examples

**Well-Designed Plugin Pages:**
- [Advanced Custom Fields](https://wordpress.org/plugins/advanced-custom-fields/)
- [Yoast SEO](https://wordpress.org/plugins/wordpress-seo/)
- [WPForms](https://wordpress.org/plugins/wpforms-lite/)
- [MonsterInsights](https://wordpress.org/plugins/google-analytics-for-wordpress/)

**Icon Design Inspiration:**
- Look for map/GPS/location plugins
- Check cycling/fitness plugins
- Review travel/tourism plugins

**Browse:**
https://wordpress.org/plugins/browse/popular/

---

## Support

If you need help with specific design questions or asset creation, refer to:
- WordPress.org Plugin Assets Guide: https://developer.wordpress.org/plugins/wordpress-org/plugin-assets/
- WordPress Design Handbook: https://make.wordpress.org/design/handbook/

---

**Next Steps:**
1. Create icon first (simplest, sets visual direction)
2. Take screenshots from WordPress admin
3. Design banner last (can incorporate actual screenshots)
4. Place all files in `.wordpress-org/` directory
5. Commit to Git
6. Verify deployment configuration in `.github/workflows/deploy.yml`