Proje; Anasayfa, Hakkımızda, Hizmetler (liste + 13 ayrı detay sayfası), Referanslar, Blog (liste + makale), Haberler, İletişim ve Ücretsiz Analiz sayfalarını içeriyor. Her sayfanın mobil ve masaüstü versiyonu ayrı tasarlandı. Ek olarak form yönetimi için özel bir Admin Paneli geliştirildi.

Problem & İhtiyaç

Ajansın eski WordPress tabanlı sitesi:

❌ Marka kimliğiyle uyuşmuyordu (jenerik tema)

❌ Mobilde kırılıyordu, kullanıcı deneyimi zayıftı

❌ Kod altyapısı kontrol edilemez durumda (200+ plugin)

❌ Form gönderimleri kayıt altına alınmıyordu (kayıp lead)

❌ Sayfa yüklenme hızları yetersiz

Hedef: Tasarımcı ekibin Figma'da titizlikle hazırladığı tasarım sistemini birebir uygulayan; sade, hızlı, mobil öncelikli ve yönetilebilir bir platform kurmak.

Çözüm Yaklaşımı

Mevcut WordPress yığınını terk edip özel PHP altyapısı kurdum. Framework kullanmadan, ihtiyaç duyulan parçaları minimum bağımlılıkla yazdım:

Backend: Saf PHP 8 + SQLite (form kayıtları için)

Frontend: Vanilla HTML/CSS/JS, ~4000 satır özenle yazılmış custom CSS

Mimari: Shared includes pattern (header / footer / config / page-hero)

Admin Panel: Login + lead listesi + filtreleme + CSV export + status notları

Deploy: DirectAdmin (Güzel Hosting) üzerinden FTP

Her bileşen yeniden kullanılabilir; her sayfa kendi sorumluluğunda. WordPress'in karmaşası yerine bir geliştiricinin tek başına bakım yapabileceği kadar yalın.

Yapılan İşler

🎨 Tasarım Implementasyonu

200+ Figma frame'i piksel hassasiyetinde uygulandı

Sofia Sans + Sofia Sans Condensed tipografi sistemi kuruldu

Gradient text efektleri (italik), text-clip, mask-image gibi modern CSS özellikleri

Tasarım token sistemi (renkler, spacing, typography variables)

📱 Mobil Responsive

Mobile-first değil ama mobile-equal yaklaşım

880px ve 480px breakpoint'leri

Mobile menu, accordion FAQ, dikey marquee, kart layout dönüşümleri

Touch-friendly button boyutları (44px min)

🔄 Animasyonlar

Marquee logo carousel — 2 satır × 18 marka, ters yön akış, hover'da pause

Dikey marquee (Hakkımızda 200+ Marka section) — 2 kolon, biri yukarı biri aşağı

Hover state'leri (kart bg color shift, icon-title sync, arrow animations)

CSS mask-image ile kenar fade efektleri

🖼 Görsel Optimizasyon

20+ marka logosu PIL (Python) ile crop'landı (gereksiz beyaz boşluklar kaldırıldı)

Hero banner PNG'si transparent yapıldı (10M pixel beyaz → alpha 0)

2086×308 oranındaki Petrol Ofisi logosu özel scale ile dengelendi

"Uniform component" pattern ile tüm logolar 180×90 container içinde eşit görsel kütleye sahip

🛠 Admin Panel

SQLite tabanlı (zero-config, deploy basit)

Session login (admin / soneo2026)

Lead listesi: tarih sıralı, filtre, arama

Lead detay: durum güncelleme (yeni / arandı / dönüştü), notlar

CSV export

Form gönderimleri otomatik kaydedilir (api/iletisim.php endpoint)

📊 Veriye Dayalı UI

Hakkımızda sayfasında özel bar chart: 7 gün × çift bar (primary + secondary opacity) — Figma'ya birebir

Stats sayaçları, platform ikonları cluster'ı

18 markanın dairesel grid'i (5+5 zig-zag)

🔍 SEO & UX İyileştirmeler

Semantic HTML5

Meta tag'ler, OG tags, breadcrumb (home icon ile)

.htaccess cache + güvenlik kuralları

Hot-reload friendly geliştirme ortamı (PHP built-in server + router.php)

Teknoloji Yığını

Katman Teknoloji

Backend PHP 8 (no framework)

Database SQLite 3 (PDO)

Frontend Vanilla HTML / CSS / JS

CSS Custom (~4000 satır), CSS Grid + Flexbox, Custom properties

Asset Pipeline Manuel (PIL ile image cropping, no bundler)

Hosting DirectAdmin / Apache

Dev Tools PHP built-in server, FileZilla, Git

Bağımlılık sayısı: 0 — Composer yok, npm yok, bundler yok. Minimum komplekslik, maximum kontrol.

Süreç & Metodoloji

Tasarım takımının verdiği Figma dosyasını bölüm bölüm ele aldım:

Hero & navigation

Hizmetler grid

Why-SONEO + stats

Projeler showcase

Süreç kartları

Testimonials

Partnerler marquee

CTA banner

Blog grid

Footer

Her bölüm için: Figma'dan referans → HTML iskelet → CSS uygulama → preview üzerinde compare → müşteri feedback → revize.

150+ adet feedback maddesini tek tek uyguladım — başlık spacing'inden ikon hover renklerine, logo boyut dengesinden chip hover state'lerine kadar.

Sonuç

✅ Tasarım sistemi birebir uygulandı, görsel borç yok

✅ 11 PHP sayfası + Admin panel canlıda

✅ Mobil performansı 4G üzerinde <2sn first paint

✅ Form gönderimleri %100 kayıt altında (lead kaybı sıfır)

✅ Bakım maliyeti minimum (WordPress eklenti kabusu yok)

✅ Sayfa ekleme/içerik güncelleme 15 dakikalık iş

Ajans, sahip olduğu görsel kimliği artık birebir dijital dünyada da sergiliyor.