Web Siteni Daha İyi Gösterecek 7 Tasarım Kaynağı

Yapay zekaya “bana modern bir web sitesi yap” diyorsun. Sayfa geliyor: kocaman bir başlık, altında üç kart, biraz renk geçişi, birkaç yuvarlak buton.

Çalışıyor. Ama baktığında senin işine ait bir şey göremiyorsun. Aynı sayfaya başka bir logo koy, başka bir şirketin sitesi olsun.

Burada eksik olan şey çoğu zaman daha uzun bir prompt değil. Neyi iyi bulduğunu gösteren bir referans. “Daha profesyonel yap” demek yerine “bu örnekteki başlık ve görsel dengesini kullan, şu menü kadar sade tut” dediğinde yapay zekaya somut bir yön vermiş oluyorsun.

Aşağıdaki 7 kaynak bunun için. Hepsini aynı projeye doldurman gerekmiyor. Sitenin en zayıf bölümünü seç, o bölüm için iyi bir örnek bul ve oradan başla.

Hangi kaynak ne işe yarıyor?

İhtiyacın	Bakacağın kaynak
Kaydırdıkça hareket eden sayfa ve hazır tasarım promptu	ScrollTide
Üst menüyü sadeleştirmek	Navbar Gallery
Sayfanın en altını toparlamak	Footer Design
Ziyaretçiye atacağı sonraki adımı göstermek	CTA Gallery
Renk, yazı ve boşlukları ortak bir düzene oturtmak	Refero Styles
İlk ekrandaki başlık ve görseli düzenlemek	Supahero
Anlatımı destekleyen üç boyutlu ikon bulmak	3dicons

1. ScrollTide: Hareketi tarif etmekte zorlanıyorsan

Bir ürün sayfası düşün. Aşağı indikçe ürünün bir parçası yaklaşıyor, sonra yeni bir özellik açılıyor. Bunu “güzel animasyon ekle” diye tarif etmek zor.

ScrollTide, kaydırmaya bağlı hareketler, sayfa şablonları ve tasarım promptları sunuyor. Sayfa bölümleri ve tekil bileşenler de var. Bazı örnekler ücretsiz, bazıları Premium olarak işaretlenmiş; hepsini ücretsiz sanarak başlama.

Nasıl kullanırsın? Önce önizlemeye bak. Hareket gerçekten ürünü anlatıyor mu, yoksa sadece dikkat mi dağıtıyor? İşine yarayan bir örneğin promptunu seç, kendi ürününü ve metnini ekleyerek çalıştığın yapay zeka aracına ver.

Benim önerim: İlk denemede tek bir bölümü hareketlendir. Randevu almak isteyen ziyaretçiyi uzun bir animasyonun bitmesini beklemeye zorlama.

Menü, sitenin üstündeki yön tabelası. Ziyaretçi buradan neye ulaşabileceğini anlamalı. On iki bağlantı, iki farklı buton ve üst üste açılan menüler küçük bir danışmanlık sitesi için gereksiz olabilir.

Navbar Gallery, sabit menülerden açılır menülere, büyük kategori menülerinden yan menülere kadar farklı gezinme örneklerini topluyor.

Bir örnek seçerken görünüşünden önce senin içerik miktarına uyup uymadığına bak. Üç hizmetin varsa yüzlerce ürün satan bir mağazanın menüsüne ihtiyacın yok.

Yapay zekaya şu kadar somut konuş:

Bu örnekteki sade menü düzeninden yararlan. Solda logom, sağda Hizmetler, Örnek İşler ve İletişim olsun. Ana buton “Görüşme planla” yazsın. Mobilde menü açılıp kapanabilsin; klavyeyle de kullanılabilsin.

Sayfanın üstünde uğraşıp en alta sadece bir telif satırı koymak kolay. Oysa aşağıya kadar gelen kişi iletişim bilgini, başka bir yazını veya şirketinle ilgili bir ayrıntıyı arıyor olabilir.

Footer Design alt bölüm örneklerini tipografi ve görsel tarz gibi kategorilerle gösteriyor. Büyük yazılı, sade, ızgara düzenli veya illüstrasyonlu örnekleri inceleyebilirsin.

Burada hedefim, alt bölümü sitenin devamı gibi hissettirmek olurdu. Üstte ciddi ve sade bir dil kurup altta bambaşka bir tasarıma geçme.

Küçük bir hizmet sitesi için başlangıç yeterince basit: ne yaptığını anlatan bir cümle, iletişim yolu ve önemli bağlantılar. Sırf dolu görünsün diye kullanılmayacak sütunlar ekleme.

4. CTA Gallery: Butona basınca ne olacak?

CTA, ziyaretçiden istediğin eylem. Form doldurmak, görüşme planlamak, bir rehber indirmek veya ürünü denemek olabilir.

CTA Gallery, butonların yanı sıra formlar, bülten kayıtları ve fiyatlandırma bölümleri gibi örnekler içeriyor.

Burada sadece butonun rengine bakma. Öncesindeki cümle ne söylüyor? Ziyaretçiye ne sunuluyor? Tıklayınca ne olacağı belli mi?

Örneğin bir kontrol listesi veriyorsan “Keşfet” yerine “Kontrol listesini indir” daha açık. Görüşme gerçekten 20 dakika ve ücretsizse bunu söyleyebilirsin; sırf ikna edici dursun diye koşul uydurma.

Güzel görünen bir CTA’nın daha çok satış getireceği garanti değil. Örneği başlangıç olarak al, kendi ziyaretçilerinle sonucu ölç.

5. Refero Styles: Her bölümü başka bir siteye benzetme

Bir yerden menü, başka yerden başlık, üçüncü yerden kart düzeni alıyorsun. Tek tek güzel görünüyorlar. Yan yana gelince birbirlerini tanımıyorlar.

Refero Styles, tasarım örneklerini renk, tipografi, boşluk ve bileşen bilgileriyle sunuyor. Ayrıca yapay zekanın okuyabileceği DESIGN.md dosyaları sağlıyor.

Bunu, “bu projede tasarım kararlarımız bunlar” diyen bir not gibi düşün. Yapay zekanın her yeni bölümde başka bir yazı boyutu veya buton tarzı seçmesini önlemek için kullanabilirsin.

Seçtiğin stilin içinden markana uyan kuralları çıkar. Sonra diğer referansları bu kurallara uydur. Başkasının marka kimliğini bütünüyle taşımak yerine kendi rengini, metnini ve görsellerini kullan.

6. Supahero: İlk ekranda ne sattığın anlaşılıyor mu?

Hero, site açılınca gördüğün ilk büyük bölüm. Genellikle başlık, kısa açıklama, ana buton ve bir görselden oluşuyor.

Supahero bu bölüme odaklanan bir örnek kütüphanesi. Başlığın ne kadar alan kapladığını, ürünün nerede gösterildiğini ve ana butonun nasıl ayrıştığını incelemek için kullanabilirsin.

Görseli seçmeden önce cümleni düzelt. “Geleceği birlikte şekillendiriyoruz” birçok işe uyuyor ama senin ne yaptığını söylemiyor. “E-ticaret ekibinin tekrar eden müşteri sorularını yanıtlayan AI ajanları kuruyoruz” daha somut bir başlangıç.

Sonra bu cümleyi taşıyacak düzeni seç. Ürün ekranı anlatımı güçlendiriyorsa göster. Anlamsız bir üç boyutlu şekil eklemek zorunda değilsin.

7. 3dicons: Görsel eksik diye rastgele ikon koyma

3dicons, üç boyutlu ikonlar sunuyor. Sitede ücretsiz ve açık kaynak içeriklerin yanında Premium seçenekler de bulunuyor. Seçtiğin paketin kullanım koşullarına ayrıca bak.

Bir randevu özelliğinde takvim, dosya aktarımında klasör gibi somut nesneler anlatıma yardımcı olabilir. Ama aynı sayfada farklı açılardan, farklı malzemelerle çizilmiş ikonları karıştırırsan bütünlük kaybolur.

Az ve tutarlı kullan. Üç özellik anlatıyorsan aynı görsel aileden üç ikon seç. Bir ürün ekran görüntüsü daha fazla şey anlatıyorsa ikonu atla. Görselin görevi boşluk doldurmak değil, anlaşılmayı kolaylaştırmak.

Bu kaynaklarla bir siteyi nasıl toparlarsın?

Diyelim ki kendi danışmanlık sayfanı yapıyorsun. Ben şu sırayla ilerlerdim:

Tek hedef seç: Ziyaretçi görüşme mi planlasın, örnek iş mi incelesin? Ana eylemi netleştir.
İlk ekranı düzelt: Kime, hangi konuda yardım ettiğini bir başlıkta söyle. Supahero’dan bu mesajı taşıyan bir düzen seç.
Görsel kuralları belirle: Renk, yazı boyutları, boşluklar ve buton biçimini bir notta topla. Refero Styles bu aşamada yardımcı olabilir.
Menü ve alt bölümü tamamla: İhtiyacın kadar bağlantı ekle. Başka bir sitede var diye gereksiz sayfalar açma.
Gerçek kullanımda dene: Telefonda başlık okunuyor mu? Menü açılıyor mu? Buton doğru yere gidiyor mu? Form gerçekten çalışıyor mu?

Animasyonu ve dekoratif görselleri bu adımlardan sonra düşün. Ziyaretçinin ne yapacağını anlayamadığı sayfayı hareketlendirmek, temel sorunu çözmez.

Kopyala, kendi bilgilerinle doldur, yapay zekaya ver

Seçtiğin referansların ekran görüntülerini veya erişilebilen bağlantılarını ekle. Sonra aşağıdaki promptu kullan. Köşeli parantezleri doldurmayı unutma.

[İşimi ve hedef müşterimi anlat] için bir açılış sayfası hazırlıyorum.
Sayfanın tek ana hedefi: [görüşme planlama / kayıt / ürün deneme].

Eklediğim referansları önce incele. Açamadığın bağlantıyı veya
göremediğin görseli açıkça söyle; incelemiş gibi davranma.

1. İlk referanstan başlık-görsel dengesini, ikinci referanstan
menünün sadeliğini al. Metinleri, logoları ve markaya ait
görselleri kopyalama.
2. Benim renklerim: [renkler]. Bütün sayfa için ortak yazı,
boşluk ve buton kuralları belirle. Bunları kısa bir tasarım
notuna yaz ve tüm bölümlerde uygula.
3. İlk ekranda kime ne sunduğum anlaşılır olsun. Ana butonun
metni, tıklayınca olacak şeyi açıkça söylesin.
4. Mobilde taşan yazı, kesilen buton ve yatay kaydırma olmasın.
Klavye ile kullanım ve okunabilir renk kontrastını kontrol et.
5. Gerçek müşteri yorumu, sonuç, fiyat veya istatistik vermediysem
uydurma. Eksik bilgileri işaretle.
6. Önce ilk ekranı hazırla. Tasarım yönünü gördükten sonra
diğer bölümlere aynı kuralları uygula.
7. Sonunda menüyü, bağlantıları ve formu test et. Çalışmayan
veya dış bağlantı gerektiren parçaları açıkça listele.

Kod tarafında nereden başlayacağını bilmiyorsan Claude Code rehberine bakabilirsin. Buradaki referans seçme yöntemi ise kullandığın araçtan bağımsız: önce ne istediğini görünür hale getir, sonra yaptır.

Sık sorulan sorular

Bu 7 kaynak siteyi benim yerime yapıyor mu? Hepsi site oluşturucu değil. Bazıları örnek galerisi, bazıları prompt, şablon veya görsel sağlıyor. Seçtiğin malzemeyi kendi projenle birleştirmen gerekiyor.

Hepsi ücretsiz mi? Hayır. Özellikle ScrollTide ve 3dicons üzerinde ücretsiz ve ücretli seçenekler bir arada bulunuyor. Bir galeriyi gezebilmek, oradaki tasarımın kodunu veya görsellerini serbestçe kullanabileceğin anlamına gelmiyor.

Yedi siteyi de kullanmalı mıyım? Hayır. İlk ekranın zayıfsa Supahero ile başla. Görsel bütünlük bozuksa önce tasarım kurallarını toparla. İşe yarayan referans sayısı, biriktirdiğin sekme sayısından daha önemli.

Kaynak listesi Vishnu AI’nin Premium Website Resources derlemesinden hareketle hazırlandı. Araçların kendi sayfaları 6 Kasım 2026’da kontrol edildi; kullanım önerileri ve prompt bu rehber için oluşturuldu.

Bir kaynağı kaydetmek kolay. Asıl ilerleme, onu kendi işinde çalışan bir sayfaya çevirdiğinde geliyor.

Yapay zekayla kendi araçlarını ve iş akışlarını kurmak için İş Güç Yapay Zeka topluluğuna göz at.