“Web Sitemi Bunu Gibi Yap”: İçeriği Değil, Tarzı Kopyalayın
Beğendiğiniz bir sitenin görünümünü ve hissini—metinleri, görselleri veya düzenleri kopyalamadan—nasıl yeniden oluşturacağınızı öğrenin. Pratik, etik adım adım rehber.

“Bunu Gibi Yapın”: İçeriği Değil, Tarzı Kopyalayın
Bir müşteri “web sitemi bunu gibi yap” dediğinde nadiren “her pikseli kopyala” demek ister. Genellikle işaret ettikleri şey bir hissiyat: temiz ve modern, cesur ve editoryal, samimi ve eğlenceli, premium ve minimal.
Sizin işiniz bu tepkileri savunulabilir kararlara çevirmek—sonra bu kararları müşterinin markası, içeriği, kısıtları ve hedefleriyle yeniden inşa etmektir.
Müşterilerin tipik olarak ne demek istediği
Çoğu müşteri şu görüşlerden birini (veya birkaçını) iletmeye çalışır:
- “Kullanımı ne kadar kolay hoşuma gitti.”
- “Görsel cilası hoşuma gitti.”
- “Hikâye anlatımı nasıl yapılıyor onu sevdim.”
- “O kategoriye aitmiş gibi görünmek istiyorum.”
Bir referans siteyi yön belirlemek için kullanmak normaldir. Anahtar, varlıkları değil ilkeleri ödünç almaktır.
Stil vs. içerik vs. düzen (kısa tanımlar)
- Stil: görsel sistem—tipografi, renkler, boşluk, görsel işleme, düğme şekilleri, hareket, genel ton.
- İçerik: kelimeler ve medya—metin, fotoğraflar, illüstrasyonlar, simgeler, referanslar, grafikler, marka isimleri.
- Düzen: içeriğin düzenlenme şekli—sayfa yapısı, bölüm sırası, ızgaralar ve bileşen kalıpları.
Stil ipuçları ödünç almak genellikle güvenlidir ve beklenir. İçerik kopyalamak kesinlikle yasaktır. Düzen geniş hatlarıyla kabul edilebilir (yaygın kalıplar vardır), fakat ayırt edici bir yapıyı çok yakından kopyalamak hâlâ hukuki ve itibar riski yaratabilir.
Neden “yeterince yakın” olmak hâlâ riskli olabilir
Her şeyi yeniden çizseniz bile neredeyse aynı sayfa taklit gibi görünebilir—güveni zedeler ve şikâyetlere davetiye çıkarır. Risk sadece hukuki değildir; itibar da etkilenir. İnsanlar iki sitenin ikiz gibi hissettirdiğini fark eder.
Beklentileri erken belirleyin: benzer his, farklı uygulama
Güçlü bir anlaşma şöyle bir cümle içerebilir:
“Hissi eşleştireceğiz—temiz yazı, cömert boşluk, güvenli başlıklar—ancak özgün sayfalar tasarlayıp, özgün metin yazacak ve kendi görsellerinizi kullanacağız ki site açıkça markanıza ait olsun.”
Bu tek cümle, sonraki haftalarda uyumsuz yorumların önünü alır.
Ne Kopyalayabilirsiniz (ve Ne Kopyalamamalısınız)
Güvenle ödünç alabileceğiniz şeyler
Diğer siteleri tasarım yönü için referans alın:
- Renk yönlendirmesi (tam palet değil): “çoğunlukla nötr, bir parlak vurgu”, “söndürülmüş pasteller”, “yüksek kontrast”.
- Tipografi yönlendirmesi: “cesur, editoryal başlıklar”, “yuvarlak, samimi sans-serif”, “teknik ve hassas”.
- Boşluk ve yoğunluk: bol beyaz alan vs kompakt, bilgi yoğun bloklar.
- Etkileşim kalıpları: yapışkan navigasyon, ince hover durumları, akordeon SSS, kart tabanlı ızgaralar.
- Bileşen kategorileri: kapsül vs kare düğmeler, çerçeve vs gölge kartlar, ana hat vs dolu simgeler (bir kategori olarak).
Bunlar, benzer bir his yakalamanıza yardımcı olan “tasarım malzemeleri”dir; yine de özgün bir sonuç üretirsiniz.
Kesinlikle kopyalamamanız gerekenler
İnsanların yanlışlıkla sınırı aştığı yerler:
- Metin ve mesajlaşma: başlıklar, ürün açıklamaları, SSS, mikro metin—“bul ve değiştir” yapmayın.
- Görseller ve videolar: fotoğraflar, kahraman görseller, arka plan dokuları, referans fotoğrafları.
- Simgeler ve illüstrasyon setleri: özellikle ayırt edici veya özel stiller.
- Ayırt edici görseller: özel diyagramlar, infografikler, imza desenler, özel animasyonlar.
- Marka varlıkları: logolar, sloganlar, maskotlar ve diğer şirketle özdeşleşmiş motifler.
Düzenler: ne zaman “çok benzer” olur
Genel yapılar (kahraman → faydalar → referanslar → CTA) yaygındır. Çok benzer his yaratmaya başlamak, aynı bölüm sırası, aynı ızgara, aynı boşluklar ve aynı görsel hiyerarşi ile eşleştiğinde olur ve yan yana hemen tanınabilir.
İyi bir kural: fikiri koruyun (ör. “üç fayda kartı”), ifadeyi değiştirin (içerik, oranlar, tipografi, görseller ve bileşen stili) ki açıkça size ait olsun.
Daha İyi Referanslar Toplayın: 3–5 Örnek Kuralı
Tek bir referans sizi belirli detayları kopyalamaya iter. 3–5 örnek istemek çeşitlilik sağlar ve tekrarlanabilir sinyalleri çıkarmayı kolaylaştırır.
3–5 örnek neden işe yarar
Birden fazla referansla aşağıdaki desenleri görebilirsiniz:
- “Hepsi ferah ve temiz hissettiriyor” (boşluk + ızgara)
- “Hepsi kalın başlıklar ve bol boşluk kullanıyor” (tipografi)
- “Hepsi sakin hareketler kullanıyor, gösterişli değil” (animasyon)
- “Hepsi kendinden emin ve samimi bir dil kullanıyor” (metin tonu)
Deseni gördüğünüzde stil mantığını yeniden yaratabilirsiniz; hiçbir tek sayfayı tekrar etmeye gerek kalmaz.
Onlardan neyi sevdiğini ve neyi sevmediğini etiketlemelerini isteyin
“Sadece beğendim” demeyi kabul etmeyin. Hızlı açıklamalar isteyin:
- Fontlar: modern/klasik/oyuncu? başlıklar kalın mı yoksa ince mi?
- Renkler: söndürülmüş mü yoksa parlak mı? yüksek kontrast mı yoksa yumuşak mı? favori vurgu rengi?
- Sadelik: minimal ve sakin mi yoksa içerik ağırlıklı mı?
- Animasyon: yok, ince solmalar mı yoksa dinamik etkileşimler mi?
- Ton: ciddi, samimi, premium, mizahi?
Aynı derecede önemli: olumsuzları toplayın.
Kullanışlı “hayır” örnekleri:
- “Devasa kahraman videoları yok.”
- “Çok ince açık gri metin yok.”
- “Yoğun arka planlar veya dağınık altbilgiler yok.”
- “Oyuncu karalamalar yok—profesyonel tutun.”
Kısa bir giriş formu veya kontrol listesi kullanın
Hafif bir kontrol listesi toplantıları azaltır ve geribildirimi karşılaştırılabilir tutar:
- Link + ekran görüntüsü
- Beğendikleri 3 şey (tipografi, renk, boşluk, düzen, görsel, navigasyon, hareket, ton)
- Beğenmedikleri 3 şey
- Bir cümle: “Sitemiz böyle hissetseydi, …”
“Hissi” Net Tasarım Gereksinimlerine Çevirin
1) Örnekleri sıfatlara çevirin (sonra tanımlayın)
3–5 referansınızdan 5–8 sıfat seçin: sakin, premium, eğlenceli, editoryal, cesur, minimalist, samimi, teknik, nazik.
Sonra bunları kararlar olarak tanımlayın:
- Sakin = bol boşluk, nazik kontrast, ekranda az sayıda “bağıran” öğe.
- Premium = ketum bir palet, kaliteli tipografi, güçlü hiyerarşi, az ama etkili görseller.
- Editoryal = büyük başlıklar, düşünülmüş boşluk, okuma öncelikli düzenler.
Bu, “hissi”nizi yapılandırılabilir kararlara çevirir.
2) Hedef kitleyi ve tek ana amacı tanımlayın
Kimin için olduğuna bir cümle ve birincil çıktı için bir cümle yazın.
Örnekler:
- Kitle: “50–200 kişilik şirketlerde operasyon yöneticileri; daha az tedarikçi sorunu arayanlar.”
- Amaç: “Hizmet paketimiz için nitelikli tanışma görüşmeleri almak.”
Bir lüks perakende için “premium” hissi ile B2B danışmanlık için “premium” hissi farklı görünebilir; kitle netleşince fark ortaya çıkar.
3) Ölçülebilir başarı metrikleri belirleyin
Hedefle bağlantılı 2–4 metrik seçin:
- Dönüşüm oranı (formlar, randevular, satın almalar)
- Önemli sayfalarda geçirilen süre (hizmetler, fiyatlandırma, vaka çalışmaları)
- Potansiyel müşteri kalitesi (uyum, bütçe, hazır olma)
- Kaydırma derinliği veya kritik sayfaya tıklama oranı
Metrikler, zevk tartışmalarının projeyi raydan çıkarmasını engeller.
4) Bir paragraflık stil briefi yazın
Yukarıdakileri kısa bir briefe birleştirin:
“Operasyon liderleri için sakin, premium, editoryal bir his istiyoruz. Site hızla güven oluşturmalı ve rezervasyonlu görüşmeler getirmeli. Basit düzenler, güçlü tipografi, sınırlı renk paleti ve net hiyerarşi kullanın. Başarı daha nitelikli rezervasyonlar ve hizmetler ile vaka çalışmaları sayfalarında daha yüksek etkileşimdir.”
Mood Board ve Mini Stil Rehberi Oluşturun
Bir referans site tam bir web sitesidir. Hissi kopyalamadan yakalamak için hissi parçalara ayırın ve tarif edin.
Odaklı bir mood board oluşturun (scrapbook değil)
Mood board’unuz şu soruyu yanıtlamalı: Birisi siteye geldiğinde nasıl hissetmeli? Dar tutun.
Toplam 3–8 öğe ekleyin, şu kategorilerden:
- Tipografi: 1–2 başlık stili ve 1 gövde stili (ağırlık, boyut, satır aralığı not edin).
- Renk: sıcak/soğuk tonu, kontrast seviyesi, vurgular nasıl kullanılıyor.
- Fotoğraf/illüstrasyon stili: aydınlatma, çerçeveleme, doygunluk, “gerçek insanlar” mı yoksa soyut mu.
- UI kalıpları: düğmeler, kartlar, nav stili, kahraman yaklaşımı, simge stili, boşluk yoğunluğu.
Kısa notlarla ekran görüntüleri ekleyin: “Büyük, kendinden emin başlıklar,” “Yumuşak gölgeler, yuvarlak köşeler,” “Bir vurgu rengi sadece CTA’larda.”
Bunu gerçekten inşa edilebilir bir mini stil rehberine dönüştürün
Mood board’u tutarlı kurallara çevirin:
- Tip ölçeği: H1/H2/H3, gövde, küçük metin (boyutlar + satır yükseklikleri)
- Düğmeler: birincil/ikincil, yarıçap, hover davranışı
- Kartlar: dolgu, çerçeve vs gölge, görsel işleme
- Form alanları: çerçeve stili, odak durumu, hata durumu
Tasarım tokenlarını koruyorsanız, burası onların başladığı yerdir (font boyutları, boşluk adımları, renk rolleri).
Yapılması ve yapılmaması gerekenleri (örneklerle) belgeleyin
Basit bir “Do / Don’t” listesi oluşturun:
- Do: “Birincil işlemler için tek bir vurgu rengi kullanın.”
- Don’t: “Bu tam düzeni veya simge setini kopyalamayın.”
Bu kısıtlama listesi kazara klonlamayı önler ve sonraki sayfaların tutarlı kalmasını sağlar.
Tipografi, Renk ve Boşlukla Stili Yeniden İnşa Edin
Benzer bir his istiyorsanız ama “taklit” görünmesini istemiyorsanız, ilkelerden yeniden inşa edin: yazı, renk ve boşluk.
Tipografi: aynı ruh, farklı parmak izleri
Referans tipografinin ne yaptığını belirleyin: editoryal ve sakin mi? teknik ve hassas mı? eğlenceli ve yuvarlak mı?
Ruhla eşleşen ama aynı font olmayan yazıtipleri seçin. Eğer referans başlıklar için yüksek kontrastlı bir serif kullanıyorsa, farklı bir yüksek kontrastlı serif (veya keskin, zarif bir sans) seçin; aynı aileyi kullanmayın.
Sonra bir tip ölçeği belirleyin:
- H1, H2, H3 boyutları (ve ne zaman kullanılacağı)
- Gövde metni boyutu ve satır yüksekliği kuralları
- Başlık ve küçük metin stilleri
Birçok site için okunabilir bir temel: rahat gövde satır yüksekliği (~1.5–1.7 arası), başlıklarda biraz daha sıkı, paragraflarda cömert boşluk.
Renk: farklı tonlar veya farklı oranlar
Birçok “kopya” tasarım aynısını ele verir çünkü kahraman arka planı ve vurgu aynı.
Kendi paletinizi oluşturun:
- Farklı tonlar seçin (ör. referans lacivert + neon yeşil ise siz koyu teal + sıcak lime seçin)
- Ya da benzer bir aile tutun ama oranları değiştirin (ör. referans çoğunlukla koyuysa, siz çoğunlukla açık nötrler kullanıp küçük güçlü vurgular kullanabilirsiniz)
Ayrıca durum renklerini tanımlayın: link, hover, odak, hata, başarı.
Boşluk: premium his veren görünmez şey
Boşluk, düzenleri kopyalamadan uyumu hızla yaratmanın en hızlı yollarından biridir. Bir boşluk sistemi kullanın (ör. 4/8/16/24 veya 6/12/24/36) ve buna sadık kalın:
- Bölüm iç boşlukları
- Kartlar ve sütunlar arası boşluklar
- Düğme dolguları ve form boşlukları
Her şey tutarlı bir ritme uyduğunda, tasarım niyetli hisseder—sayfa yapısı referansınızdan farklı olsa bile.
Sayfalar Yerine Bileşenler Tasarlayın
İlham kaynağı sayfaları sayfa sayfa yeniden oluşturmak yaygın bir tuzaktır: ya çok benzer olursunuz, ya da içeriğiniz aynı şekillere uymadığı için takılıp kalırsınız. Bunun yerine sistemi kopyalayın.
Tekrar eden parçaları tespit ederek başlayın
Çoğu pazarlama sitesi yeniden kullanılabilir “lego tuğlalar”dan oluşur. Referanslarınızda tekrar edenleri listeleyin:
- Kahraman bölümü (başlık, alt başlık, birincil CTA, ikincil link)
- Özellik blokları (ikon + başlık + kısa metin)
- Referanslar (alıntı, isim, rol, şirket)
- Fiyatlandırma kartları (plan adı, fiyat, özellikler, CTA)
- SSS akordeonu
Bileşenleri adlandırmak işi “onların ana sayfasını kopyala”dan “kendi kahramanımızı, fiyatlandırmamızı, SSS’imizi oluştur”a taşır.
Kendi bileşen setinizi oluşturun
Yeniden kullanılabilir küçük bir bileşen kütüphanesi yaratın:
- Düğmeler (birincil/ikincil/üçüncül, hover + devre dışı durumları)
- Navigasyon (masaüstü + mobil)
- Kartlar (özellikler, blog gönderileri, kaynaklar)
- Formlar (input, textarea, dropdown, hata mesajları)
Hızlı ilerlemek isterseniz, Koder.ai gibi bir vibe-coding platformu yardımcı olabilir: hedef hissi ve bileşen setini sohbetle tarif ederek çalışan bir React tabanlı UI üretebilir ve kopyalanmış bir düzenle “kilitlenmeden” yineleme yapmanızı sağlar. Planlama modu ve snapshot/rollback gibi özellikler varyasyonları güvenle denemenize yardımcı olur.
Tutarlı kalması için varyasyon kuralları tanımlayın
Cilalı siteler kontrollü varyasyon kullanır. Şöyle kurallar koyun:
- Köşe yarıçapı: örn. kartlar için 8px, kapsüller için 999px, rastgele değil
- Gölge seviyeleri: yok / yumuşak / yükseltilmiş (maks 3 seviye)
- Simge stili: ana hat vs dolu, çizgi kalınlığı, köşe stili
Bunu mini bir oyun kitabı gibi belgeleyin
Bir sayfalık bileşen rehberi yeterli: her bileşenin amacı, nerede kullanıldığı ve izin verilen varyasyonlar.
Yapıyı ve Tel Çizimlerini İçeriğinize Göre Planlayın
Referans sitenin sayfa sırasını kopyalamak, işinize uymayan varsayımları miras almanın en hızlı yoludur.
Taslağa başlamadan önce kullanıcı ihtiyaçlarını listeleyin
Çizmeye başlamadan önce ziyaretçilerin satın almadan önce bilmesi gerekenleri sıralayın:
- “Bu benim gibi biri için mi?”
- “Fiyatı ne ve neler dahil?”
- “Güvenilir misiniz—kanıt, yorumlar, sonuçlar?”
- “İletişime geçersem sırada ne oluyor?”
Bu sorular yapınızın omurgasını oluşturur.
Basit bir site haritası ve sayfa hedefleri oluşturun
Gerçekten ihtiyacınız olan sayfaları haritalayın ve her birine tek bir görev verin:
- Anasayfa: ne yaptığınızı, kimin için olduğunu ve bir sonraki adımı netleştirin
- Ürün/Hizmet: teklifi, faydaları ve ana detayları açıklayın
- Fiyatlandırma: panikler azaltın; net katmanlar, içerikler ve SSS
- İletişim: size ulaşmayı kolaylaştırın; yanıt süresi beklentisini belirleyin
Destekleyici sayfaları (Hakkında, Vaka Çalışmaları, SSS) yalnızca açık bir amaç hizmet ediyorsa ekleyin.
Her sayfa için özgün içerik taslağı yazın
Başlıkları ve bölümleri teklifinize göre tasarlayın, referans blok sırasına göre değil. Hangi kanıtı göstereceğinize, hangi itirazları ele alacağınıza ve ziyaretçiden ne yapmasını isteyeceğinize karar verin.
İçeriğinize uyan tel çizimleri yapın
Tel çizimler (wireframe) düzen eskizleridir, süsleme değil:
- Eğer üç güçlü vaka çalışmanız varsa onlara yer verin.
- Eğer fiyatlandırma özel ise, fiyat tablosu yerine danışma akışı tasarlayın.
- Ürününüz görselse, galeri veya demo bölümü planlayın.
Yapı çalışınca, ilham kaynağının stilini uygulayın—ama onun planını miras almayın.
Özgün Metin ve Görseller Oluşturun (Bul ve Değiştir Yok)
Uygulamanın açıkça farklı görünmesi için sözleriniz ve görselleriniz özgün olmalı.
Mesajı sıfırdan yeniden yazın (faydalar, kanıt, CTA’lar)
İşinizle ilgili gerçeklerden başlayın. Basit bir çerçeve:
- Faydalar: müşteri ne elde eder (daha hızlı, daha basit, daha güvenli, daha emin)?
- Kanıt: bunu inandırıcı kılan nedir (rakamlar, referanslar, vaka çalışmaları, sertifikalar)?
- Eylem çağrıları: bir sonraki adım ne? (randevu al, denemeye başla, teklif iste) ve sizin tonunuzda.
Referansın ritmini (kısa, vurucu satırlar vs daha uzun açıklamalar) eşleştirirken temel fikir ve ifadeyi değiştirin. Özgün ve ayırt edici ifadeler kullanın; imza metaforlardan kaçının.
Özgün görseller kullanın (veya doğru lisanslı varlıklar)
Ekran görüntülerini, simgeleri, illüstrasyonları veya fotoğrafları kopyalamayın—genel görünseler bile.
- Kendi ürün ekran görüntülerinizi alın.
- Mümkünse kendi fotoğraflarınızı çekin.
- Stok gerekiyorsa lisanslı varlıklar kullanın ve kayıt tutun.
Benzer bir kahraman hissi istiyorsanız, konsepti yeniden yaratın: aynı cilayı, farklı konu ve kompozisyonla.
Başlıkları ve bölüm sırasını bire bir kopyalamayın
Yepyeni metinle bile, aynı bölüm akışını kopyalamak taklit gibi okunabilir. Hikâyeyi güçlü yönlerinize göre yeniden düzenleyin: kanıtla başlayın, ince bölümleri birleştirin veya referansın olmayan bir bölüm ekleyin.
Hissi yakalayın, kelimeler sizin olsun
Ton serbesttir; ifadeler değildir. Sesinizi (samimi, premium, doğrudan, eğlenceli) belirleyin ve başlıklar, düğmeler ve mikro metinlerde tutarlı uygulayın.
Kalite Kontrolleri: Benzer Hissiyat, Açıkça Farklı Uygulama
Hedefiniz “aynı tür, farklı şarkı”dır. Yayına almadan önce hissi yakalayıp yakalamadığınızı ve ayrıntılarda çok yakın olup olmadığınızı doğrulayın.
“Benzer his” testi
Referansı ve taslağınızı yan yana 60 saniye görüp sonra referansı kapatın. Ne hatırlıyorsunuz?
- Eğer mood (temiz, eğlenceli, premium) hatırlıyorsanız doğru gidiyorsunuz.
- Eğer spesifik detayları (o tam kahraman düzeni, o simgeler) hatırlıyorsanız çok yakınsınız.
Erişilebilirlik kontrolü
Benzer hissi koruyup gerçek kullanıcılar için daha iyi yapmak mümkün:
- Kontrast ve okunabilirlik (çok küçük, ince, düşük kontrastlı metinden kaçının)
- Bağlantılar ve düğmeler için net hover/odak durumları
- Menüler, formlar ve modallar için mantıklı klavye gezintisi
Duyarlı (responsive) kontrolü
Mobil kasıtlı tasarlanmalı, sadece “küçültülmüş masaüstü” olmamalı. Kontrol edin:
- Mobil öncelikli bir başlık ve net bir birincil eylem
- Yeniden akış düzenleri (yığılma, daha kısa satır uzunlukları, daha büyük dokunma hedefleri)
- Hover’a bağımlı kritik etkileşimlerin olmaması
“Çok yakın mı?” kontrol listesi
Lansmandan önce:
- Aynı kahraman düzenini kullanıyor ve sonraki 2–3 bölümü aynı şekilde mi tekrarlıyorsunuz?
- Renkleriniz ve tipografiniz ayırt edici bir marka imzası oluşturuyor mu?
- İllüstrasyonlar, simgeler, fotoğraflar ve mikro metinler gerçekten özgün veya lisanslı mı?
Eğer iki veya daha fazla cevap güvensizse, bir katmanı yeniden tasarlayın—boşluk, tipografi veya bileşen şekilleri—klon hissini hızlıca kırmak için yeterli olacaktır.
Hukuki ve Etik Güvenlik Çizgileri (Düz Türkçe)
Beğendiğiniz bir siteye bakıp ondan öğrenebilirsiniz—yazı hiyerarşisi, boşluk ritmi, bileşen kalıpları gibi. Yapmamanız gereken ise korunmuş çalışmaları kopyalamak veya tasarımın o markayla karıştırılmasına yol açacak kadar benzer yapmaktır.
Telif hakkı temelleri (genellikle korunur)
Telif hakkı genelde belirli yaratıcı ifadeyi korur, genel fikirleri değil.
- Metin: başlıklar, paragraflar, ürün açıklamaları, sloganlar, mikro metinler. Kelime değiştirme ile yeniden yazmayın.
- Görseller & fotoğraf: varsayılan olarak korunur. İndirmeyin, ekran görüntüsü alıp kullanmayın.
- Simgeler & illüstrasyonlar: genellikle lisanslıdır; ayırt edici özel stiller korunur. Özgün sanatın izini sürmekten kaçının.
- UI kalıpları: yaygın kalıplar genelde yeniden kullanılabilir, ancak çok ayırt edici kombinasyon çok yakın kopyalanırsa sorun olabilir.
Trade dress & marka karışıklığı (“onlarla aynı mı” problemi)
Tam olarak varlıkları kopyalamadan bile karışıklığa yol açabilirsiniz.
Dikkat edilmesi gerekenler:
- Neredeyse aynı logo yerleşimi, renk paleti ve tipografi kombinasyonu
- Eşsiz bir kahraman düzeni, illüstrasyon stili veya maskot
- Benzer ürün adlandırması, ton ve mesaj yapısı, ilişki izlenimi verebilir
Basit bir test: Hızlı bir bakışta birisi “bu aynı şirket mi?” diyorsa çok yakınsınız.
Ne zaman avukata danışmalı?
Kısa bir inceleme düşünebilirsiniz eğer:
- Referans marka ile aynı pazarda faaliyet gösteriyorsanız
- Çok tanınmış bir görsel kimliği yeniden yaratıyorsanız
- Yazı tipleri, fotoğraflar, simgeler veya şablonlar için lisans konusunda emin değilseniz
- Bir şikayet, kaldırma talebi veya “cease and desist” aldıysanız
Sürecinizi belgeleyin (düşündüğünüzden daha faydalı)
Hafif bir iz bırakın:
- Briefiniz (hedefler, kitle, kısıtlar)
- Mood board (birkaç referans)
- Tel çizimler ve taslaklar iterasyonları gösteren
- Lisanslı varlıklar ile ilgili notlar (faturalar/bağlantılar) ve stüdyoda oluşturduklarınız
Bu bürokrasi değil—netliktir ve “ilham alındı” çalışmalarınızı etik tarafta tutmaya yardımcı olur.
SSS
Müşteri “web sitemi bunu gibi yap” dediğinde aslında ne istiyor?
Genelde aynı his (temiz, premium, eğlenceli, editoryal) istenir; piksel piksel kopya değil.
Sizin göreviniz, bu tepkileri somut kararlara çevirmek—yazı tipi, boşluk, renk rolleri, bileşenler, ton—ve bunları müşterinin marka, içerik ve kısıtlarıyla uygulamaktır.
Stil, düzen ve içerik arasındaki fark nedir — ve neden önemli?
Basit ve güvenli bir çerçeve:
- Stil: referans almak için uygundur (yazı yönlendirmesi, boşluk, bileşen hissi, hareketin dengesi).
- Düzen: geniş kalıplarda kabul edilebilir (kahraman → faydalar → kanıt → CTA), ancak karakteristik “imza” yapılarından kaçının.
- İçerik: kopyalamayın (metinler, görseller, simgeler/ilustrasyonlar, diyagramlar, ekran görüntüleri).
Şüpheye düştüğünüzde, içeriğe benzetin ve orijinal yapın.
Bir referans web sitesinden ne güvenle ödünç alabilirim?
Varlıkları değil ilkeleri ödünç alın:
- Tipografi yönü (ör. kalın başlıklar + sade gövde)
- Boşluk / yoğunluk (ferah vs sıkışık)
- Etkileşim kalıpları (yapışkan nav, akordeonlar, hover durumları)
- Bileşen kategorisi (kartlar, kapsül düğmeler, ana hat simgeler bir stil ailesi olarak)
Sonra farklı fontlarla, ayırt edici bir paletle, kendi metniniz ve özgün görsellerinizle yeniden inşa edin ki sonuç kesinlikle size ait olsun.
Başka bir siteden asla kopyalamamam gereken nedir?
Başka bir siteden kopyalamamanız gereken şeyler:
- Başlıklar, paragraflar, mikro metin, SSS, sloganlar
- Fotoğraflar, videolar, arka plan dokuları, ekran görüntüleri
- Özel simgeler/ilustrasyonlar/maskotlar (ve bunları izlemek ya da yeniden çizmekten kaçının)
- Ayırt edici diyagramlar, infografikler, animasyonlar, desenler
- Marka öğeleri (isimler, logolar, tanınabilir motifler)
“Hafifçe düzenlenmiş” versiyonlar bile çok yakın olabilir—kendi mesajınız ve varlıklarınızla başlayın.
Her şeyi yeniden tasarlasam bile ‘benzer’ düzen neden riskli?
“Yeterince yakın” iki problem yaratır:
- İtibar: taklitmiş gibi görünür, güveni zedeler.
- Kafa karışıklığı: kullanıcılar şirketin bağlantılı olduğunu düşünebilir.
Yan yana bakıldığında birisi “ikizler” dese, bir katmanı hızla değiştirin—tipografi, boşluk ritmi, bileşen şekilleri, görsel stili ve sayfa akışı genellikle klon hissini kırar.
Neden tek yerine 3–5 referans sitesi toplamalıyım?
Tek bir referans sizi belirli detayları kopyalamaya iter. 3–5 referansla ortak sinyalleri çıkarabilirsiniz:
- ortak tipografi havası
- tutarlı boşluk yoğunluğu
- tekrar eden bileşen kalıpları
- hareket stili (yok vs ince)
- ton (samimi, doğrudan, premium)
Bu kalıplardan tasarlayın; tek bir sayfayı çoğaltmak yerine bir yönelimle ilham alın.
Tasarım bilgisi olmayanlardan referans siteler hakkında nasıl faydalı geri bildirim alırım?
Tasarım bilmeyenlerden yararlı geri bildirim almak için onlara hızlı notlar ekletin:
- Beğendikleri 3 şey (font, renk, boşluk, düzen, görsel, nav, hareket, ton)
- Beğenmedikleri 3 şey (“devasa kahraman video yok”, “çok küçük açık gri metin yok”)
- Bir cümle: “Sitemiz böyle hissetseydi, …”
Bu, “Beğendim”i kullanılabilir gereksinime çevirir ve revizyon döngülerini azaltır.
Mood board ve mini stil rehberi nasıl hazırlamalıyım ki bir karalama koleksiyonuna dönüşmesin?
Mood board ile hissi yakalayın, sonra bunu uygulanabilir kurallara çevirin.
Küçük bir örnek seti ekleyin:
- tipografi (başlık + gövde özellikleri)
- renk rolleri (nötrler, vurgu kullanımı, kontrast seviyesi)
- görsel stil (gerçek fotoğraflar vs soyut, aydınlatma, çerçeveleme)
- UI kalıpları (düğmeler, kartlar, nav, boşluk)
Ardından mini rehbe dönüştürün: tip ölçeği, düğme stilleri/durumları, kart dolgu/gölge, form odak/hata durumları ve kısa bir “Yap/ Yapma” listesi.
Sayfa sayfa kopyalamaktan kaçınmanın en iyi yolu nedir?
Sayfa sayfa kopyalamaktan kaçınmak için bileşen sistemi kurun:
- tekrar eden blokları belirleyin (kahraman, özellik kartları, referans modülü, fiyat kartı, SSS)
- her bileşeni markanıza göre tasarlayın (yazı, renk, boşluk, görsel)
- varyasyon kuralları belirleyin (köşe yarıçapı, gölge katmanları, simge stili)
Bu, hissi tutarlı kılarken uygulamanın açıkça özgün olmasını sağlar—özellikle içeriğiniz referansınkine uymuyorsa.
Siteyi yayınlamadan önce klon olmadığından nasıl emin olmalıyım?
Lansmandan önce hızlı bir “çok yakın mı?” kontrolü yapın:
- Yan yana test: aklınızda kalan ruh mu yoksa spesifik detaylar mı?
- Özgünlük kontrolü: metin, fotoğraflar, simgeler ve ilustrasyonlar gerçekten size mi ait yoksa lisanslı mı?
- Yapı kontrolü: bölüm sırası/hiyerarşi gerektiği gibi farklı mı?
- Erişilebilirlik: kontrast, okunabilir yazı, görünür odak durumları, klavye ile gezinme
- Duyarlı: mobil kasıtlı tasarlanmış mı (sadece küçültülmüş masaüstü değil)
Eğer çok benzer hissediliyorsa, tek bir temel katmanı değiştirin (yazı, boşluk ritmi, bileşen şekilleri) küçük düzeltmeler yerine.