Homepage Nasıl Tasarlanır? 2026'da İyi Homepage Tasarımı

Homepage'iniz, ziyaretçilerin ilk 3 saniyesi'nde sizin hakkında karar veriyor.

"Bu şirket profesyonel mi?" "Bana helal edebilir mi?" "Devam etmeliyim mi?"

Hepsi homepage'deki visual, metin ve flow'a bağlı. Yanlış tasarlanmış homepage = ziyaretçi gidiyor. Doğru tasarlanmış homepage = lead generation engine'i.

Bu rehberde, bölüm bölüm iyi homepage tasarımını öğreneceksiniz.

Homepage Nedir?

Homepage: Sitenizin "giriş kapısı". Ziyaretçilerin %70+'ı homepage'den başlıyor.

Homepage'nin amacı:

✅ Şirketi tanıt
✅ Value proposition açık yap
✅ Ziyaretçiyi action'a yönlendir (lead, satış)
✅ Trust/credibility kur
✅ Next step belli yap

Homepage Bölümleri (Ideal Sıra)

1. Navigation Bar

Ne olmalı:

Logo (left)
Menu (center, 5-7 link max)
CTA button (right)
Mobile: Hamburger menu
Sticky (scroll'da visible kalmalı)

<header class="navbar">
    <div class="logo">
        <img src="logo.svg" alt="Company">
    </div>
    
    <nav class="menu">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/services">Services</a>
        <a href="/blog">Blog</a>
        <a href="/contact">Contact</a>
    </nav>
    
    <button class="cta">Get Started</button>
</header>

Mobile'de:

Hamburger menu açılır
CTA button'u prominent
Sticky header

2. Hero Section (Başlık + Alt-başlık + CTA)

İçerik:

H1 Başlık: Value proposition (max 10 kelime)
H2 Alt-başlık: Açıklama (1-2 cümle)
Background: Resim veya video (ama okunabilir)
CTA Button: Primary action

Kötü Hero:

"Comprehensive Enterprise Solutions for Digital Transformation"
(Çok jargon, generic, benefit yok)

İyi Hero:

"Increase Sales by 40% in 3 Months"
(Benefit, specific, time-bound)

<section class="hero">
    <div class="hero-content">
        <h1>Increase Sales 40% in 3 Months</h1>
        <p>Sales teams use our platform to close deals faster</p>
        <button class="btn-primary">Start Free Trial</button>
    </div>
    
    <div class="hero-image">
        <img src="hero.jpg" alt="Dashboard preview">
    </div>
</section>

Hero Tasarım İpuçları:

✅ Text + image (50/50 split desktop, 100% mobile)
✅ Contrast yeterli (yazı okunmalı)
✅ CTA prominent (renkli, büyük)
✓ Video background (ama user-initiated, auto-play değil)

3. Problem Statement

Ziyaretçinin sorununu acknowledge et.

<section class="problem">
    <h2>Your Sales Team is Losing Time</h2>
    <p>
        Typical sales teams waste 30% of their time on manual tasks. 
        Your team could be closing deals instead.
    </p>
</section>

Amaç: "Beni anladılar" hissi yaratmak.

4. Features/Benefits Grid

3-4 main benefit, visual + text.

<section class="features">
    <h2>Why Teams Choose Us</h2>
    
    <div class="features-grid">
        <div class="feature">
            <icon>📊</icon>
            <h3>Real-Time Analytics</h3>
            <p>Track deals and sales velocity in real-time</p>
        </div>
        
        <div class="feature">
            <icon>⚡</icon>
            <h3>Lightning Fast</h3>
            <p>Setup takes 5 minutes, not 5 days</p>
        </div>
        
        <div class="feature">
            <icon>🔐</icon>
            <h3>Enterprise Security</h3>
            <p>SOC 2 Type II certified, encryption at rest</p>
        </div>
    </div>
</section>

Design Tips:

✅ Icon + title + description (3 liner)
✅ 3-4 feature (fazla olmaysin, minimal)
✅ Consistent spacing
✅ Benefit-focused (feature değil)

5. Social Proof (Testimonials)

Başkaları da güveniyorsa, yeni ziyaretçi de güvenir.

<section class="testimonials">
    <h2>Trusted by 5,000+ Teams</h2>
    
    <div class="testimonial-grid">
        <div class="testimonial">
            <p>"Increased our close rate by 35%"</p>
            <div class="author">
                <img src="avatar1.jpg" alt="Sarah">
                <div>
                    <strong>Sarah Johnson</strong>
                    <small>Sales Director, TechCorp</small>
                </div>
            </div>
        </div>
        
        <div class="testimonial">
            <p>"Best investment we made this year"</p>
            <div class="author">
                <img src="avatar2.jpg" alt="Mike">
                <strong>Mike Chen</strong>
                <small>Founder, StartupXYZ</small>
            </div>
        </div>
    </div>
</section>

Social Proof Types:

✅ Customer testimonials (fotoğraf + isim + şirket)
✅ "5,000+ customers" gibi metrics
✅ Customer logos (Fortune 500, known brands)
✅ Star ratings (4.8/5, "300 reviews")
✅ Media mentions ("Featured in Forbes, TechCrunch")

6. Use Cases / How It Works

Ziyaretçi "bu bana nasıl yardım eder?" merak ediyor. Göster.

<section class="how-it-works">
    <h2>How It Works</h2>
    
    <div class="steps">
        <div class="step">
            <div class="number">1</div>
            <h3>Connect Your Tools</h3>
            <p>Link your CRM, email, and calendar</p>
        </div>
        
        <div class="step">
            <div class="number">2</div>
            <h3>Set Your Goals</h3>
            <p>Tell us your sales targets and metrics</p>
        </div>
        
        <div class="step">
            <div class="number">3</div>
            <h3>Start Selling Better</h3>
            <p>Get actionable insights and recommendations</p>
        </div>
    </div>
</section>

Design Tips:

✅ 3-5 adım (max)
✅ Number/icon + title + description
✅ Timeline veya vertical flow
✅ Visual (screenshot veya video)

7. Pricing (Eğer B2B SaaS ise)

Fiyat transparansi, trust yaratır.

<section class="pricing">
    <h2>Simple Pricing</h2>
    <p>Choose the plan that fits your team</p>
    
    <div class="pricing-cards">
        <div class="pricing-card">
            <h3>Starter</h3>
            <p class="price">$99<span>/month</span></p>
            <ul>
                <li>5 users</li>
                <li>Basic analytics</li>
                <li>Email support</li>
            </ul>
            <button>Start Free Trial</button>
        </div>
        
        <div class="pricing-card featured">
            <h3>Professional</h3>
            <p class="price">$299<span>/month</span></p>
            <ul>
                <li>Unlimited users</li>
                <li>Advanced analytics</li>
                <li>Priority support</li>
            </ul>
            <button>Start Free Trial</button>
        </div>
        
        <div class="pricing-card">
            <h3>Enterprise</h3>
            <p class="price">Custom</p>
            <ul>
                <li>Custom features</li>
                <li>Dedicated support</li>
                <li>SLA guarantee</li>
            </ul>
            <button>Contact Sales</button>
        </div>
    </div>
</section>

Pricing Card Tips:

✅ Most popular plan: "featured" styling
✅ Same CTA button (consistency)
✅ Features clear (bullet list)
✅ Annual discount option (save 20% gibi)

8. FAQ (Skeptic Handling)

Son şüpheleri çöz.

<section class="faq">
    <h2>Frequently Asked Questions</h2>
    
    <div class="faq-item">
        <h3>Do you offer a free trial?</h3>
        <p>Yes, 14 days for free. No credit card required.</p>
    </div>
    
    <div class="faq-item">
        <h3>How is my data secured?</h3>
        <p>We're SOC 2 Type II certified with encryption...</p>
    </div>
    
    <div class="faq-item">
        <h3>Can I cancel anytime?</h3>
        <p>Yes, cancel anytime. No contracts or hidden fees.</p>
    </div>
</section>

FAQ Topics:

✅ Trial details (Free? How long?)
✅ Security/Privacy (Data safe mı?)
✅ Cancellation (Lock-in var mı?)
✅ Support (Destek var mı?)
✅ Integration (Bağlantı kurabilir miyim?)

9. Final CTA (Conversion Push)

Son kez, "kayıt ol / satın al" çağrı.

<section class="final-cta">
    <h2>Ready to Transform Your Sales?</h2>
    <p>Join 5,000+ teams already using our platform</p>
    <button class="btn-large">Start Your Free Trial Today</button>
    <p class="fine-print">14 days free. No credit card required.</p>
</section>

Tips:

✅ Button prominent (large, bold color)
✅ Reassurance message (no credit card, 14 days)
✅ Same message hero + CTA (consistency)

10. Footer

<footer>
    <div class="footer-content">
        <div class="footer-section">
            <h4>Product</h4>
            <ul>
                <li><a href="/features">Features</a></li>
                <li><a href="/pricing">Pricing</a></li>
                <li><a href="/security">Security</a></li>
            </ul>
        </div>
        
        <div class="footer-section">
            <h4>Company</h4>
            <ul>
                <li><a href="/about">About</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/careers">Careers</a></li>
            </ul>
        </div>
        
        <div class="footer-section">
            <h4>Legal</h4>
            <ul>
                <li><a href="/privacy">Privacy</a></li>
                <li><a href="/terms">Terms</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </div>
        
        <div class="footer-social">
            <a href="https://twitter.com">Twitter</a>
            <a href="https://linkedin.com">LinkedIn</a>
            <a href="https://github.com">GitHub</a>
        </div>
    </div>
    
    <div class="footer-bottom">
        <p>&copy; 2026 Company. All rights reserved.</p>
    </div>
</footer>

Homepage Tasarım Best Practices

1. One Column Flow (Mobil'de)

Homepage, mobil'de vertical, tüm bölümler sırasıyla:

Hero
↓
Features
↓
Social Proof
↓
How It Works
↓
Pricing
↓
FAQ
↓
Final CTA
↓
Footer

2. Visual Hierarchy

Başlık > Alt-başlık > Body > Caption

h1 { font-size: 48px; font-weight: 700; }
h2 { font-size: 32px; font-weight: 600; }
p { font-size: 16px; font-weight: 400; }

3. Whitespace

%30-40 whitespace, site açık ve premium görünür.

4. Color Consistency

2 brand color maximum, greys for neutrals.

5. Image Quality

High quality, relevant images (stock fotoğraf değil).

6. CTA Placement

Hero: Primary CTA
Features: Secondary (optional)
Pricing: Every card
Final section: Primary CTA
Footer: Link (optional)

7. Mobile-First

Desktop tasarımdan, mobile'e scale down değil. Mobil tasarımdan, desktop'a scale up.

Homepage Length: Optimal

İdeal homepage uzunluğu: 3.000-5.000px (3-5 sayfalık scroll)

Çok kısa (< 1.000px): Incomplete hissettirme
Normal (1.500-3.000px): Most conversions
Uzun (5.000px+): Still fine (long-form sales page)
Çok uzun (10.000px+): Boring, drop-off

Homepage Copy Examples

Hero Başlık:

❌ "Advanced Enterprise Solutions"
✅ "Close 40% More Deals"

Feature Title:

❌ "Comprehensive Analytics Dashboard"
✅ "See What's Working (and What's Not)"

CTA Button:

❌ "Submit"
✅ "Start Free Trial"

Homepage Performance

Lighthouse targets:

Performance: 90+
SEO: 100
Accessibility: 90+
Best Practices: 90+

Homepage A/B Testing

Test edilmesi gerekenler:

[ ] H1 headline variations
[ ] Hero image vs video
[ ] CTA button color
[ ] Number of features (3 vs 4)
[ ] Pricing visibility (show or hide)
[ ] Testimonial position
[ ] FAQ placement

Kurumsal Sitede Homepage Checklist

[ ] Navigation: 5-7 link, hamburger mobil
[ ] Hero: Value prop açık, CTA prominent
[ ] Problem statement: Ziyaretçi acknowledges
[ ] Features: 3-4, visual + text
[ ] Social proof: Logo/testimonials
[ ] How it works: 3-5 adım
[ ] Pricing (varsa): Transparent
[ ] FAQ: Common questions
[ ] Final CTA: Conversion push
[ ] Footer: Links, contact, legal
[ ] Mobile: Responsive, touch-friendly
[ ] Performance: LCP < 2.5s
[ ] Images: High quality, optimized
[ ] Scroll flow: Natural, sequential
[ ] Colors: 2-3 brand color + greys

Sonuç: Homepage = 24/7 Sales Person

İyi tasarlanmış homepage:

%40-50 daha fazla lead
%30 daha yüksek conversion
Better brand perception
More organic traffic (SEO friendly)

Homepage'niz sitenizin en önemli sayfasıdır. Takılmayın.

Professional homepage tasarımında yardımcı olabiliriz. İletişime geçin.