Updatweb
This commit is contained in:
Local Server
399
docs/DESIGN_PREVIEW.md
Normal file
399
docs/DESIGN_PREVIEW.md
Normal file
@@ -0,0 +1,399 @@
|
||||
# Visual Design Preview - Modern Ecommerce Redesign
|
||||
|
||||
## Color Palette
|
||||
|
||||
### Primary Colors
|
||||
|
||||
```
|
||||
Primary Red: #FF6B6B ████████ (Coral red - energy, urgency)
|
||||
Primary Light: #FF8E8E ████████ (Hover states)
|
||||
Primary Dark: #FF4949 ████████ (Active states)
|
||||
|
||||
Secondary: #4ECDC4 ████████ (Turquoise - trust)
|
||||
Secondary Light: #71D7D0 ████████
|
||||
Secondary Dark: #2BB3A9 ████████
|
||||
|
||||
Accent: #FFE66D ████████ (Yellow - attention)
|
||||
```
|
||||
|
||||
### Neutral Grays
|
||||
|
||||
```
|
||||
Gray 50: #F9FAFB ▓▓▓▓▓▓▓▓ (Lightest background)
|
||||
Gray 100: #F3F4F6 ▓▓▓▓▓▓▓▓
|
||||
Gray 200: #E5E7EB ▓▓▓▓▓▓▓▓ (Borders)
|
||||
Gray 300: #D1D5DB ▓▓▓▓▓▓▓▓
|
||||
Gray 400: #9CA3AF ▓▓▓▓▓▓▓▓ (Muted text)
|
||||
Gray 500: #6B7280 ▓▓▓▓▓▓▓▓ (Secondary text)
|
||||
Gray 600: #4B5563 ▓▓▓▓▓▓▓▓
|
||||
Gray 700: #374151 ▓▓▓▓▓▓▓▓ (Primary text)
|
||||
Gray 800: #1F2937 ▓▓▓▓▓▓▓▓
|
||||
Gray 900: #111827 ▓▓▓▓▓▓▓▓ (Darkest)
|
||||
```
|
||||
|
||||
### Status Colors
|
||||
|
||||
```
|
||||
Success: #10B981 ████████ (Green)
|
||||
Warning: #F59E0B ████████ (Orange)
|
||||
Error: #EF4444 ████████ (Red)
|
||||
Info: #3B82F6 ████████ (Blue)
|
||||
```
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Families
|
||||
|
||||
- **Headings:** Poppins (600, 700, 800 weights)
|
||||
- **Body:** Inter (400, 500, 600, 700 weights)
|
||||
|
||||
### Font Scale
|
||||
|
||||
```
|
||||
4xl - 40px - Page Titles (h1)
|
||||
3xl - 32px - Section Headings (h2)
|
||||
2xl - 24px - Subsections (h3)
|
||||
xl - 20px - Card Titles (h4)
|
||||
lg - 18px - Emphasized Text
|
||||
base- 16px - Body Text
|
||||
sm - 14px - Secondary Text
|
||||
xs - 12px - Labels, Captions
|
||||
```
|
||||
|
||||
## Spacing System (8px Base)
|
||||
|
||||
```
|
||||
xs - 8px - Tight spacing (button padding, small gaps)
|
||||
sm - 16px - Standard spacing (between elements)
|
||||
md - 24px - Medium spacing (section padding)
|
||||
lg - 32px - Large spacing (container padding)
|
||||
xl - 48px - Extra large (between sections)
|
||||
2xl - 64px - Section dividers
|
||||
3xl - 96px - Major sections
|
||||
```
|
||||
|
||||
## Component Preview
|
||||
|
||||
### Buttons
|
||||
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ PRIMARY BUTTON │ ← Red background, white text
|
||||
└─────────────────────────┘
|
||||
|
||||
┌─────────────────────────┐
|
||||
│ SECONDARY BUTTON │ ← Turquoise background
|
||||
└─────────────────────────┘
|
||||
|
||||
┌─────────────────────────┐
|
||||
│ OUTLINE BUTTON │ ← Transparent, red border
|
||||
└─────────────────────────┘
|
||||
|
||||
Ghost Button ← Transparent, subtle hover
|
||||
```
|
||||
|
||||
### Product Card
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ ╔════════════════════════════════╗ │
|
||||
│ ║ ║ │
|
||||
│ ║ [Product Image] ║ │ ← Zoom on hover
|
||||
│ ║ ║ │
|
||||
│ ║ ♡ 👁 ║ │ ← Floating actions
|
||||
│ ╚════════════════════════════════╝ │
|
||||
│ │
|
||||
│ Product Name │
|
||||
│ Short description text here... │
|
||||
│ │
|
||||
│ ★★★★☆ (4.5) │ ← Ratings
|
||||
│ │
|
||||
│ $29.99 [Add to Cart] │
|
||||
└──────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Navigation Bar
|
||||
|
||||
```
|
||||
════════════════════════════════════════════════════════════════
|
||||
⚡ Free Shipping on Orders Over $50 | Shop Now
|
||||
════════════════════════════════════════════════════════════════
|
||||
|
||||
🎨 Sky Art Shop [Search products...] ♡ 🛒 👤 ☰
|
||||
|
||||
Home Shop Portfolio About Blog Contact
|
||||
────────────────────────────────────────────────────────────────
|
||||
```
|
||||
|
||||
### Product Grid Layout
|
||||
|
||||
```
|
||||
Desktop (4 columns):
|
||||
┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐
|
||||
│Product│ │Product│ │Product│ │Product│
|
||||
└───────┘ └───────┘ └───────┘ └───────┘
|
||||
|
||||
Tablet (3 columns):
|
||||
┌───────┐ ┌───────┐ ┌───────┐
|
||||
│Product│ │Product│ │Product│
|
||||
└───────┘ └───────┘ └───────┘
|
||||
|
||||
Mobile (1 column):
|
||||
┌─────────────────┐
|
||||
│ Product │
|
||||
└─────────────────┘
|
||||
```
|
||||
|
||||
## Shop Page Layout
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ NAVIGATION BAR (Sticky) │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ SHOP HERO │
|
||||
│ Shop All Products │
|
||||
│ Discover unique art pieces and supplies │
|
||||
│ │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ [All] [Paintings] [Prints] [Sculptures] [Digital] [Supplies]│ ← Scrolling chips
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────┬──────────────────────────────────────────┐ │
|
||||
│ │ FILTERS │ PRODUCT GRID │ │
|
||||
│ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
|
||||
│ │ Price │ │ │ │ │ │ │ │ │ │ │
|
||||
│ │ Range │ └────┘ └────┘ └────┘ └────┘ │ │
|
||||
│ │ │ │ │
|
||||
│ │ Avail. │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
|
||||
│ │ [x] In │ │ │ │ │ │ │ │ │ │ │
|
||||
│ │ [ ] Out │ └────┘ └────┘ └────┘ └────┘ │ │
|
||||
│ │ │ │ │
|
||||
│ │ Sort By │ [1] [2] [3] [4] [Next] │ │
|
||||
│ │ ▼ │ │ │
|
||||
│ └──────────┴──────────────────────────────────────────┘ │
|
||||
│ │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ FOOTER │
|
||||
│ Sky Art Shop Shop About Customer Service │
|
||||
│ Description Links Links Links │
|
||||
│ │
|
||||
│ © 2025 Sky Art Shop. All rights reserved. │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Hover Effects & Animations
|
||||
|
||||
### Product Card Hover
|
||||
|
||||
```
|
||||
Normal: Hover:
|
||||
┌──────────┐ ┌──────────┐
|
||||
│ Image │ → │ Image+5% │ ← Zoom
|
||||
│ │ │ ♡ 👁 │ ← Buttons appear
|
||||
└──────────┘ └──────────┘
|
||||
+ Shadow increases
|
||||
```
|
||||
|
||||
### Button Hover
|
||||
|
||||
```
|
||||
Normal → Hover:
|
||||
- Background darkens 10%
|
||||
- Transform: translateY(-1px)
|
||||
- Shadow increases
|
||||
- Transition: 150ms
|
||||
```
|
||||
|
||||
### Category Chip Active
|
||||
|
||||
```
|
||||
Inactive: Active:
|
||||
┌─────────┐ ┌─────────┐
|
||||
│ Paintings│ → │Paintings│
|
||||
└─────────┘ └─────────┘
|
||||
Gray bg Red bg
|
||||
Gray text White text
|
||||
```
|
||||
|
||||
## Shadow Levels
|
||||
|
||||
```
|
||||
sm: ▁ - Subtle card border
|
||||
md: ▂ - Default card elevation
|
||||
lg: ▃ - Hover state
|
||||
xl: ▄ - Dropdown/modal
|
||||
2xl: █ - Dramatic emphasis
|
||||
```
|
||||
|
||||
## Border Radius
|
||||
|
||||
```
|
||||
sm: ┌─┐ 6px - Buttons, inputs
|
||||
md: ┌──┐ 8px - Cards
|
||||
lg: ┌───┐12px - Large cards
|
||||
xl: ┌────┐16px- Modal
|
||||
2xl: ┌─────┐24px- Hero sections
|
||||
full: ● 9999px- Circular (badges, icons)
|
||||
```
|
||||
|
||||
## Responsive Breakpoints
|
||||
|
||||
```
|
||||
Mobile: 320px ═══════════════
|
||||
Mobile L: 640px ═══════════════════════════
|
||||
Tablet: 768px ════════════════════════════════════
|
||||
Desktop: 1024px ══════════════════════════════════════════════
|
||||
Desktop L: 1280px ═══════════════════════════════════════════════════
|
||||
Wide: 1536px+ ════════════════════════════════════════════════════════
|
||||
```
|
||||
|
||||
## Badge Variations
|
||||
|
||||
```
|
||||
NEW [Bold yellow background, dark text]
|
||||
SALE [Red background, white text, -20%]
|
||||
BESTSELLER [Green background, white text]
|
||||
LOW STOCK [Orange background, white text]
|
||||
```
|
||||
|
||||
## Form Elements
|
||||
|
||||
```
|
||||
Input Field:
|
||||
┌──────────────────────────────────┐
|
||||
│ [Icon] Enter text here... │
|
||||
└──────────────────────────────────┘
|
||||
|
||||
Focused:
|
||||
┌══════════════════════════════════┐ ← Blue border
|
||||
│ [Icon] Enter text here... │ ← 3px shadow
|
||||
└══════════════════════════════════┘
|
||||
|
||||
Select Dropdown:
|
||||
┌──────────────────────────────┬─┐
|
||||
│ Featured │▼│
|
||||
└──────────────────────────────┴─┘
|
||||
|
||||
Checkbox:
|
||||
☐ Out of Stock → ☑ In Stock
|
||||
```
|
||||
|
||||
## Z-Index Layers
|
||||
|
||||
```
|
||||
Base: 0 - Regular content
|
||||
Dropdown: 1000 - Category/filter dropdowns
|
||||
Sticky: 1020 - Sticky navigation
|
||||
Fixed: 1030 - Fixed elements
|
||||
Backdrop: 1040 - Modal overlay
|
||||
Modal: 1050 - Modal dialogs
|
||||
Popover: 1060 - Tooltips/popovers
|
||||
Tooltip: 1070 - Highest priority tooltips
|
||||
```
|
||||
|
||||
## Comparison: Old vs New
|
||||
|
||||
### Navigation
|
||||
|
||||
```
|
||||
OLD: Simple purple gradient navbar
|
||||
Basic links, minimal styling
|
||||
|
||||
NEW: Multi-tier professional navigation
|
||||
Top banner + main nav + links
|
||||
Search bar, action icons, dropdowns
|
||||
Sticky positioning, mobile menu
|
||||
```
|
||||
|
||||
### Product Cards
|
||||
|
||||
```
|
||||
OLD: Basic image + text + price
|
||||
Simple hover effect
|
||||
No interactions
|
||||
|
||||
NEW: Advanced ecommerce card
|
||||
Hover zoom, floating actions
|
||||
Badges, ratings, animations
|
||||
Quick add-to-cart button
|
||||
```
|
||||
|
||||
### Colors
|
||||
|
||||
```
|
||||
OLD: Purple #6A3A9C theme
|
||||
Pink accents
|
||||
Dark backgrounds
|
||||
|
||||
NEW: Coral Red #FF6B6B primary
|
||||
Turquoise secondary
|
||||
Clean white backgrounds
|
||||
Professional gray scale
|
||||
```
|
||||
|
||||
### Spacing
|
||||
|
||||
```
|
||||
OLD: Random pixel values
|
||||
Inconsistent gaps
|
||||
Mixed units
|
||||
|
||||
NEW: 8px grid system
|
||||
CSS variables
|
||||
Consistent throughout
|
||||
Harmonious rhythm
|
||||
```
|
||||
|
||||
## Mobile Experience
|
||||
|
||||
```
|
||||
Phone View (375px):
|
||||
┌──────────────────┐
|
||||
│ 🎨 Sky 🛒 ☰ │ ← Compact nav
|
||||
├──────────────────┤
|
||||
│ │
|
||||
│ Hero Banner │
|
||||
│ │
|
||||
├──────────────────┤
|
||||
│ [Chip][Chip]→ │ ← Scrollable
|
||||
├──────────────────┤
|
||||
│ [🔍 Filters] │ ← Drawer button
|
||||
├──────────────────┤
|
||||
│ ┌────────────┐ │
|
||||
│ │ Product │ │ ← 1 column
|
||||
│ └────────────┘ │
|
||||
│ ┌────────────┐ │
|
||||
│ │ Product │ │
|
||||
│ └────────────┘ │
|
||||
└──────────────────┘
|
||||
```
|
||||
|
||||
## Performance Metrics
|
||||
|
||||
### CSS Size
|
||||
|
||||
- design-system.css: ~10 KB
|
||||
- modern-nav.css: ~8 KB
|
||||
- modern-shop.css: ~8 KB
|
||||
- **Total:** 26 KB (minified will be ~15 KB)
|
||||
|
||||
### Load Times (Target)
|
||||
|
||||
- First Paint: < 1s
|
||||
- Interactive: < 2s
|
||||
- Full Load: < 3s
|
||||
|
||||
## Accessibility Features
|
||||
|
||||
- ✅ Keyboard navigation
|
||||
- ✅ Focus visible states
|
||||
- ✅ ARIA labels
|
||||
- ✅ Semantic HTML
|
||||
- ✅ Color contrast WCAG AA
|
||||
- ✅ Screen reader friendly
|
||||
- ✅ Touch targets 44x44px+
|
||||
|
||||
---
|
||||
|
||||
**Ready to view:** <http://localhost:5000/shop.html>
|
||||
Reference in New Issue
Block a user