Landing Page Collection
Farklı sektörler için vibe coding yaklaşımıyla geliştirdiğim ve kod tarafında özelleştirdiğim landing page çalışmalarından oluşan büyüyebilir bir koleksiyon.
- Rol
- Creative direction, içerik, kişiselleştirme, yayına alma
- Yıl
- 2026
- Kategori
- Web Tasarımları, Branding
- Süre
- Mayıs 2026
- Araçlar
- Lovable, VS Code, Vercel, ChatGPT, Claude
Not: Markalar, portfolyo amacıyla oluşturulmuş kurgusal konseptlerdir.
00
Genel bakış
Landing Page Collection, farklı sektörler için kısa sürede geliştirdiğim web çalışmalarını bir araya getiriyor. Projelerin çoğunda ilk tasarım ve çalışan sayfa yapısı Lovable üzerinden tek bir kapsamlı yönlendirmeyle oluşturuldu. Ardından proje dosyalarını VS Code'a taşıyarak metin akışını, responsive davranışı ve projeye özgü küçük ayrıntıları kod üzerinden düzenledim.
01
Çıkış noktası
Her proje aynı landing page formatından başlıyor, ama bu format bir güzellik markası, bir restoran ve bir uzay yolculuğu şirketinde aynı kalamaz. Her sayfa için çıkış sorusu aynıydı: o sektörün ziyaretçisi önce neyi görmeli, onu neyin ikna edeceği.
02
Yaklaşım ve strateji
Her proje için önce markanın amacını, hedef kitlesini ve ziyaretçiden beklenen ana aksiyonu belirledim. İlk çalışan sürüm vibe coding yaklaşımıyla hızlıca hazırlandı, ancak oluşan yapı olduğu gibi bırakılmadı. Metinler, mobil görünüm, CTA yerleşimi ve küçük tasarım kararları proje ihtiyacına göre yeniden düzenlendi. Bu yöntemle basit bir landing page fikrini birkaç saat içinde çalışan ve yayımlanabilir bir yapıya dönüştürmek mümkün oldu.
03
Koleksiyondaki Projeler
Branding, Web Tasarımları
Elan Beauty
Premium bir güzellik ürünü için Lovable ile hızla geliştirilen, ardından kod tarafında içerik ve responsive ayrıntıları düzenlenen landing page konsepti.
Projeyi İncele →
Web Tasarımları, Branding
Stacked
Premium bir hamburger restoranı için hızlı ürün algısı ve sipariş yönlendirmesi üzerine kurulan landing page konsepti.
Projeyi İncele →
Web Tasarımları
Novax
Ticari uzay yolculuğu fikrini açık, güven veren ve keşif duygusunu koruyan bir içerik sırasıyla anlatan landing page konsepti.
Projeyi İncele →
05
Üretim süreci
- 01
Başlangıç yapıları
İlk sayfa yapılarını Lovable ile ürettim.
- 02
VS Code'da kişiselleştirme
Metinleri yeniden yazdım, tipografi ve rengi ayarladım, bölümleri her sayfa ayrışsın diye yeniden kurguladım.
- 03
Vercel'de yayın
Her landing page'i gerçek cihazlarda incelemek için Vercel'e yayımladım.
06
Önemli kararlar
Layout'tan önce marka
Her sayfa bir ton ve paletten başladı; düzen sonradan geldi.
Üretilmiş başlangıç, insan dokunuşu
Üretilen temel zaman kazandırdı; tasarım kişiselleştirmede gerçekleşti.
Baştan responsive
Her sayfa tasarım sırasında mobilde kontrol edildi, sonradan değil.
07
Sonuçlar
Aynı vibe-coding-den-koda iş akışıyla üretilmiş, her biri kendi kimliğine sahip üç yayımlanmış konsept landing page.
08
Öğrendiklerim
Bu çalışmalar sırasında vibe coding ile oluşturulan bir projeyi VS Code'a aktarmayı ve hazır yapıyı kod üzerinden geliştirmeyi öğrendim. Küçük tasarım ve içerik değişikliklerini yeniden platform kredisi harcamadan kendim uygulamak, her projeyi daha kontrollü biçimde özelleştirmemi sağladı. Ayrıca proje dosyalarını yerel olarak yönetme, gerektiğinde farklı bir geliştirme ortamına taşıma, Vercel üzerinden yayımlama ve istenirse özel alan adı bağlama süreçlerinde deneyim kazandım.
Sonraki proje
← Önceki: 2Shot
Renk eşleştirme, Tetris biçimli parçalar ve zincirleme patlamaları bir araya getiren çevrimdışı mobil puzzle oyunu.