Anasayfa Draft'ları Homepage için tasarım örnekleri

Anasayfa için

Canlı Tasarım Örnekleri

Her bölümün basit anlatımı + kopyalanabilir draft

1

Hero Section

EN ÖNEMLİ

Ne: Sitenin ilk görünen büyük bölümü. Başlık + açıklama + CTA butonu + görsel/video.
Neden: İlk izlenim, %70 kullanıcı sadece hero'yu görüp karar verir.

Sektör Lideri

Endüstriyel Çözümler

Modern üretim hatları için güvenilir ekipman ve profesyonel servis hizmetleri.

Varyasyonlar: Tam ekran video arka plan, Slider/Carousel, Paralaks efekt, Tek kolonlu merkezi
2

Skeleton Loading

MÜKEMMEL UX

Ne: İçerik yüklenirken gösterilen animasyonlu placeholder.
Neden: Kullanıcı beklerken "boşluk" görmez, site hızlı hisseder. Spinner'dan çok daha iyi!

↓ Gerçek zamanlı skeleton animasyonu

Kullanım: Livewire wire:loading, Alpine x-show ile. Her modül kendi skeleton'ına sahip olmalı.
3

Animated Gradient Text

Ne: Hero başlıklarında renk geçişli, hareketli yazı.
Neden: Dikkat çeker, premium his verir.

Endüstriyel Çözümler

Alt başlık normal renkte kalır

Endüstriyel
Tech/Modern
Sıcak/Enerji
Doğal
4

Service/Feature Cards

Ne: Hizmet veya özellik kartları. İkon + başlık + kısa açıklama.
Neden: "Ne yapıyoruz?" sorusuna hızlı cevap. Hover efekti interaktiflik katar.

↓ Kartların üzerine gel

Üretim

Modern üretim hatları

Lojistik

Hızlı teslimat ağı

Destek

7/24 teknik servis

5

İstatistik / Counter

Ne: Sayısal başarı göstergeleri. Animasyonlu sayaç efekti.
Neden: Güven oluşturur, "bizi tercih etmek için sebepler" verir.

1500+
Mutlu Müşteri
25Yıl
Tecrübe
98%
Memnuniyet
50+
Ülke
İpucu: Sayılar görünür olduğunda animate et (Intersection Observer). Yuvarlak sayılar kullan (1523 değil 1500+).
6

Product/Content Slider

Ne: Yatay kaydırmalı ürün/içerik listesi.
Neden: Az alanda çok içerik gösterir, mobilde dokunmatik kaydırma.

Popüler Ürünler

Forklift XL-500

5 ton kapasiteli

₺850.000

Transpalet T-200

2 ton kapasiteli

₺125.000

İstif Makinesi S-300

3 ton kapasiteli

₺350.000

Raf Sistemi R-100

Modüler tasarım

₺75.000
7

Testimonials / Referanslar

Ne: Müşteri yorumları, referans logoları.
Neden: Sosyal kanıt (social proof). "Başkaları güvendi, sen de güvenebilirsin."

LOGO 1
LOGO 2
LOGO 3
LOGO 4
LOGO 5

"25 yıldır beraber çalışıyoruz. Her zaman profesyonel ve güvenilir hizmet aldık."

AK
Ahmet Kaya
Lojistik Müdürü, ABC Şirketi

"Teknik servis ekibi müthiş. Arıza durumunda 2 saat içinde müdahale ediyorlar."

MY
Mehmet Yılmaz
Fabrika Müdürü, XYZ Ltd.
8

CTA Section

Ne: Sayfanın sonunda aksiyon çağrısı.
Neden: Tüm sayfayı gezen kullanıcıya son bir "harekete geç" mesajı.

Projeniz İçin Teklif Alın

Uzman ekibimiz 24 saat içinde size dönüş yapacaktır.

9

Header & Footer

REFERANS

Header: Sticky, backdrop-blur, logo + menü + CTA
Footer: 4 kolon grid, logo + linkler + iletişim + sosyal medya

Kısa açıklama

Kurumsal

  • Hakkımızda
  • Ekibimiz

Hizmetler

  • Ürünler
  • Servis

İletişim

© 2026 Şirket Adı
10

Renk & Grid Sistemi

TEKNİK

Renk: CSS custom properties ile tutarlılık

Primary
Secondary
Accent

Grid: Görsel = 3 kolon, Text = 2 kolon

1
2
3

Anasayfa Checklist

Hero Section (ilk izlenim)
Skeleton Loading (UX)
Feature/Service Cards
İstatistik Counter
Product Slider
Testimonials
CTA Section
Animated Text (opsiyonel)
Consistent Colors
Responsive Grid