Kompoziční analýza a layout design

# Layout Design: Online Course Landing Page

## 1. Compositional Principles

**Rule of Thirds Applied:**
```
│ │ │ │
├─────┼─────┼─────┤ ← Top third: Hero headline + value prop
│ 1 │ 2 │ 3 │ (most important, above fold)
├─────┼─────┼─────┤ ← Middle third: Benefits + social proof
│ 4 │ 5 │ 6 │ (engagement, builds trust)
├─────┼─────┼─────┤ ← Bottom third: CTA + form
│ 7 │ 8 │ 9 │ (conversion point)
```

**Golden Ratio Usage:**
- Content width: 61.8% of viewport (φ ratio)
- Sidebar (if desktop): 38.2%
- Hero image height: 61.8% of above-fold area

**Reading Flow: F-Pattern** (Natural for long-form content)
- Users scan horizontally at top (headline)
- Vertical scan down left side (section headers)
- Horizontal scan midway (key benefits)
- Final vertical to CTA

**Symmetry Choice: Asymmetric**
- More modern, dynamic feel
- Allows emphasis on specific elements
- Breaks monotony of centered layouts

## 2. Visual Hierarchy

**Level 1 - Primary (Hero Section):**
- Headline: 48px bold, dark color, left-aligned
- Subheadline: 20px, lighter weight
- CTA Button: 56px tall, high contrast, right side
- Dominance: 50% of above-fold real estate

**Level 2 - Secondary (Benefits):**
- Section titles: 32px medium
- Benefit icons: 64x64px
- Descriptions: 18px regular
- Dominance: 30% of page attention

**Level 3 - Tertiary (Social Proof):**
- Testimonials: 16px italic
- Logos: 80px width, grayscale
- Stats: 24px bold numbers + 14px labels
- Dominance: 20% (supporting role)

**Hierarchy Techniques:**
- Size: H1 (48px) >> H2 (32px) >> Body (18px)
- Color: Dark (#1A1A1A) > Medium (#666) > Light (#999)
- Position: Top-left gets most attention, bottom-right least

## 3. Grid System

**12-Column Grid** (industry standard, flexible)

```
Desktop (1200px+):
[ 1 ][ 2 ][ 3 ][ 4 ][ 5 ][ 6 ][ 7 ][ 8 ][ 9 ][ 10 ][ 11 ][ 12 ]
├─────────────────────── Hero Content (8 col) ───────────────────────┤ ├──── Form (4 col) ────┤

Tablet (768px - 1199px):
[ 1 ][ 2 ][ 3 ][ 4 ][ 5 ][ 6 ][ 7 ][ 8 ][ 9 ][ 10 ][ 11 ][ 12 ]
├─────────────────────────────────── Full Width (12 col) ────────────────────────────────────┤

Mobile (< 768px):
[ 1 ][ 2 ][ 3 ][ 4 ][ 5 ][ 6 ][ 7 ][ 8 ][ 9 ][ 10 ][ 11 ][ 12 ]
├─────────────────────────────────── Full Width (12 col) ────────────────────────────────────┤
```

**Specifications:**
- Gutter: 24px (space between columns)
- Margin: 32px (space from viewport edges)
- Max container width: 1200px (centered)
- Column width: Fluid (calc-based)

**Breakpoints:**
```css
--mobile: < 768px
--tablet: 768px - 1199px
--desktop: ≥ 1200px
```

## 4. Whitespace Strategy

**Macro Whitespace (Between Sections):**
- Hero → Benefits: 120px gap
- Benefits → Social Proof: 80px gap
- Social Proof → CTA Form: 120px gap
- **Reasoning:** Large gaps signal "new topic", aid scanning

**Micro Whitespace (Within Elements):**
- Headline → Subheadline: 16px
- Benefit icon → text: 24px
- Paragraph spacing: 24px (1.5x line-height)
- **Reasoning:** Grouped elements feel related

**CTA Breathing Room:**
- Padding around button: 80px top/bottom, 40px sides
- Nothing within 60px radius competes for attention
- Creates "island" effect (impossible to miss)

**Whitespace Ratios:**
- 50% content, 50% whitespace (modern, spacious)
- Avoid cramming (reduces cognitive load)

## 5. Content Zones

**Above the Fold (Hero - 100vh):**
```
┌────────────────────────────────────────┐
│ [Logo] [Nav: Features|Pricing|Login] │
│ │
│ "Master Web Development │
│ in 12 Weeks" (H1) │ ← 60% width
│ │
│ Online bootcamp with job guarantee │
│ Learn React, Node.js, databases │ ← Subhead
│ │
│ [Start Free Trial →] │ ← CTA button
│ [▼ See Curriculum] │ ← Scroll hint
└────────────────────────────────────────┘
```
**Must-Haves:** Value prop, primary CTA, credibility signal (e.g., "1000+ graduates")

**Scroll Zone 1 (Benefits - starts ~100vh):**
- 3-column benefit grid
- Icons + headline + short description
- Progressive disclosure: Click for details

**Scroll Zone 2 (Social Proof - ~200vh):**
- Testimonials carousel
- Company logos (where grads work)
- Stats: "95% job placement rate"

**Scroll Zone 3 (CTA + Form - ~280vh):**
- Registration form (sticky sidebar on desktop)
- Final CTA: "Join 1,000+ Students"
- Trust badges (money-back guarantee)

## 6. Visual Flow

**Eye-Tracking Path:**
```
1. LOGO (top-left) ──→ 2. HEADLINE (large, center-left)
↓
3. SUBHEADLINE (supporting info)
↓
4. CTA BUTTON (right side, contrasting color)
↓
5. SCROLL INDICATOR (animated arrow)
↓
6. BENEFITS (three icons in horizontal row, left to right)
↓ ↓ ↓
7. SOCIAL PROOF (testimonials, faces guide eyes across)
↓
8. FORM (right sidebar, always visible) ──→ 9. SUBMIT (green button)
```

**Directive Cues:**
- Arrow icons point to CTA
- Person in photo gazes toward form
- Curved SVG lines guide from benefit to benefit

**Friction Points to AVOID:**
❌ Long form above fold (intimidating)
❌ Multiple competing CTAs (decision paralysis)
❌ Automatic video (annoying, slows load)
❌ Popup immediately (user hasn't seen value yet)

## 7. Responsive Behavior

**Mobile-First Approach (< 768px):**
```
┌──────────────┐
│ [☰] Logo │ ← Hamburger menu
├──────────────┤
│ Headline │ ← Stacked, full-width
│ (smaller) │
│ │
│ Subheadline │
│ │
│ [CTA Button] │ ← Full-width button
├──────────────┤
│ Benefit 1 │ ← Vertical stack
│ Benefit 2 │ (no columns)
│ Benefit 3 │
├──────────────┤
│ Testimonial │ ← Single card,
│ (swipeable) │ swipe for more
├──────────────┤
│ Form │ ← Appears last
└──────────────┘ (after all content)
```

**Tablet Adaptations (768px - 1199px):**
- 2-column benefit grid (instead of 3)
- Form remains in flow (not sidebar)
- Slightly larger text (18px → 20px)

**Desktop Enhancements (≥ 1200px):**
- Sticky form sidebar (always visible)
- Parallax scroll effects (subtle)
- Hover states on benefits (expand details)

**Reordering Priority:**
1. Value proposition (headline + CTA)
2. Key benefits (why this course?)
3. Social proof (who else joined?)
4. Form (action to take)
5. Footer links (least important)

## 8. Accessibility Considerations

**Heading Hierarchy:**
```html
<h1>Master Web Development in 12 Weeks</h1> <!-- Page title -->
<h2>What You'll Learn</h2> <!-- Benefits section -->
<h3>React Fundamentals</h3> <!-- Individual benefit -->
<h3>Node.js Backend</h3>
<h2>Student Success Stories</h2> <!-- Testimonials section -->
<h2>Start Your Journey Today</h2> <!-- Form section -->
```

**Landmark Regions:**
```html
<header> <!-- Logo + nav -->
<nav> <!-- Main navigation -->
<main> <!-- Primary content -->
<section aria-labelledby="benefits-heading"> <!-- Benefits -->
<aside> <!-- Form sidebar (if desktop) -->
<footer> <!-- Links, legal -->
```

**Keyboard Navigation Order:**
1. Skip to main content link (hidden, shows on Tab)
2. Logo (focusable, returns to top)
3. Nav links (Features, Pricing, Login)
4. Hero CTA button (primary action)
5. Benefit cards (Tab through, Enter to expand)
6. Form fields (logical order: name, email, password)
7. Submit button
8. Footer links

**Screen Reader Flow:**
- Alt text for images: "Icon representing React framework"
- Form labels: "Email address" (not just placeholder)
- Button text: "Start Free Trial" (not "Click Here")
- Skip navigation link for blind users

## ASCII Wireframe

```
╔═══════════════════════════════════════════════════════════════════╗
║ ABOVE THE FOLD (100vh) ║
║ ┌─────┐ [Features] [Login] ║
║ │LOGO │ ────────────────────────────────────────────────────── ║
║ └─────┘ ║
║ ║
║ ┌────────────────────────┐ ┌─────────────────────┐ ║
║ │ │ │ │ ║
║ │ "Master Web Dev │ │ 📋 Quick Start │ ║
║ │ in 12 Weeks" │ (8 col) │ │(4c) ║
║ │ │ │ [Name_______] │ ║
║ │ Build real apps, │ │ [Email______] │ ║
║ │ get hired faster │ │ [Start Trial] │ ║
║ │ │ │ │ ║
║ │ [→ See Curriculum] │ │ ✓ No credit card │ ║
║ └────────────────────────┘ └─────────────────────┘ ║
║ ↓ Scroll ║
╠═══════════════════════════════════════════════════════════════════╣
║ BENEFITS SECTION (~100vh scroll) ║
║ ║
║ "What You'll Learn" ← H2 ║
║ ║
║ ┌──────────┐ ┌──────────┐ ┌──────────┐ ║
║ │ ⚛️ Icon │ │ 🔧 Icon │ │ 📊 Icon │ ║
║ │ │ │ │ │ │ ║
║ │ React │ │ Node.js │ │ Deploy │ ║
║ │ Front │ │ Backend │ │ & Scale │ ║
║ │ │ │ │ │ │ ║
║ └──────────┘ └──────────┘ └──────────┘ ║
║ ║
╠═══════════════════════════════════════════════════════════════════╣
║ SOCIAL PROOF (~200vh) ║
║ ║
║ "Join 1,000+ Successful Graduates" ← H2 ║
║ ║
║ ╭─────────────────────────────────────────────────────╮ ║
║ │ "This course changed my life. I went from │ ║
║ │ bartender to software engineer in 4 months." │ ║
║ │ — Sarah K. (★★★★★) │ ║
║ ╰─────────────────────────────────────────────────────╯ ║
║ ║
║ [Google] [Meta] [Amazon] [Netflix] ← Employer logos ║
║ ║
╠═══════════════════════════════════════════════════════════════════╣
║ FINAL CTA + FORM (~280vh) ║
║ ║
║ ┌─────────────────────────────────┐ ┌──────────────────┐ ║
║ │ "Ready to Start?" │ │ Form (sticky) │ ║
║ │ │ │ [Name______] │ ║
║ │ ✓ 12-week program │ │ [Email_____] │ ║
║ │ ✓ Job guarantee │ │ [Password__] │ ║
║ │ ✓ Lifetime access │ │ [ Enroll Now] │ ║
║ │ │ │ │ ║
║ │ [→ Enroll Now for $2,999] │ └──────────────────┘ ║
║ └─────────────────────────────────┘ ║
║ ║
╚═══════════════════════════════════════════════════════════════════╝
```

## Numbered Reading Order

**Desktop:**
1 → Logo (top-left)
2 → Headline (large, center-left)
3 → Subheadline (below headline)
4 → Primary CTA (button, hero)
5 → Form (right sidebar, sticky)
6 → Benefits heading
7-9 → Three benefits (left to right)
10 → Social proof heading
11-13 → Testimonials (top to bottom)
14 → Final CTA section

**Mobile (linearized):**
1 → Logo
2 → Headline
3 → Subhead
4 → CTA button
5 → Benefit 1 ↓ Benefit 2 ↓ Benefit 3
6 → Testimonial 1 (swipe for more)
7 → Form (at end, after all content)
8 → Footer

## Implementation CSS Grid

```css
.landing-page {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
}

.hero-content {
grid-column: 1 / 9; /* Spans 8 columns */
}

.hero-form {
grid-column: 9 / 13; /* Spans 4 columns */
position: sticky;
top: 32px; /* Stays visible while scrolling */
}

@media (max-width: 768px) {
.hero-content, .hero-form {
grid-column: 1 / 13; /* Full width on mobile */
}
.hero-form {
position: static; /* Not sticky on mobile */
}
}
```