Web Sitesi Örneklerini Kopyalamayı Bırak. İskeletlerini Çal.

Özet

Web sitesi örnekleriyle ilgili çoğu tavsiye bir tuzaktır. Size işe yarayanı kopyalamanızı söyler, bu yüzden bir SaaS hero bölümünü bir hukuk firmasının sitesine yapıştırır ve neden başarısız olduğunu merak edersiniz. Bir örnek, bir kararın kanıtıdır, kopyalanacak bir şablon değil. İşe yarayan süreç tersine mühendisliktir: hero bölümünün arkasındaki mantığı, kanıtı ve harekete geçirici mesajı çıkarın, sonra bu kararları her müşterinin alıcıları için yeniden oluşturun. Bu makale, SaaS, ajans ve portföy örneklerinden ne çalmanız gerektiğini ve sistemi her müşteride tekrarlanabilir kılan kararlardan oluşan bir swipe dosyasının nasıl oluşturulacağını gösterir.

Web sitesi örnekleriyle ilgili çoğu tavsiye bir tuzaktır. Size "beğendiğiniz siteleri bulun ve onları çalın" der. Böylece bir yer imleri klasörü oluşturur, ardından bir çatı ustası, bir hukuk firması ve bir B2B SaaS müşterisi için aynı hero bölümünü, aynı düzeni, aynı hover efektlerini yeniden inşa edersiniz. Sonuç: hepsi aynı görünen ve aynı şekilde dönüşüm sağlayan — kötü bir şekilde — pahalı klonlar. Bir örnek bir şablon değildir. Akıllı bir ekibin belirli bir kitle, belirli bir an ve belirli bir ticari vaat için verdiği bir kararın kanıtıdır. Gerçekten işe yarayan süreç tersine mühendisliktir: örneği arkasındaki kararlar için okuyun, bu kararları düz cümlelerle yazın ve her müşterinin alıcıları için sıfırdan yeniden oluşturun.

Hero bölümünü bir sözleşme gibi okuyun

Her örnek incelemesine hero bölümünü bir sözleşme gibi okuyarak başlayın. Başlıktaki vaadi, alt başlıktaki kanıtı ve tek harekete geçirici mesajı not edin. Geri kalan her şey dekorasyondur. Yaratıcının bu başlığı yazmadan önce ziyaretçi hakkında hangi kararı verdiğini sorun. Cevap, yeniden kullanabileceğiniz kısımdır.

Calendly'nin sloganı — "ileri geri e-postalar olmadan toplantı planlayın" — işe yarıyor çünkü yaratıcı ziyaretçinin e-posta tenisinde boğulan meşgul bir profesyonel olduğuna karar verdi. Vaadi, zamandan tasarruf. CTA ise "bir toplantı ayarlayın." Bu karar bir hizmet işletmesine aktarılır. Bir muhasebe müşterisinin ziyaretçisi kağıt işlerinden nefret eden bir işletme sahibidir; başlık "elektronik tablo kaosu olmadan defterleri kapatın" vaadinde bulunmalı ve CTA "ücretsiz temizlik alın" olmalıdır. Aynı karar, farklı kelimeler. Notion, aynı disiplinden tek bir CTA hedefler: "Notion'ı ücretsiz edinin" — tek sayfa, tek eylem, dikkat dağıtıcı yok. Ne görmediğinize dikkat edin — atlı karınca yok, ikincil "daha fazla bilgi" düğmeleri yok, telefon numarası isteyen form yok. Her ihmal bir karardır ve ihmal kararları kopyalaması en ucuz olanlardır çünkü hiçbir maliyetleri yoktur.

Linear'in hero bölümü aynı disiplini daha da ileri taşır. Tek başlık, tek alt başlık, tek buton — kaydırana kadar ekran görüntüsü yok. Karar: "bu kitle sorunu zaten biliyor, bu yüzden bizim işimiz uyumu iletmek, eğitmek değil." Bu kararı saklayın. Müşterinin alıcıları sofistikeyse, kısıtlamayı kopyalayın. Değillerse, tıklamayı istemeden önce daha fazla açıklama eklemeniz gerektiğini bilirsiniz. Bir hero bölümündeki kelime sayısı da bir karardır. Üç şey söylemeye çalışan bir hero bölümü hiçbir şey iletmez. Bir örnekte sayfanın üst kısmında çok fazla fikir varsa, bunu bir model olarak değil, bir uyarı olarak değerlendirin.

Gerçek bir örneği bunun üzerinden geçirin. Hayran olduğunuz bir SaaS ana sayfasını inceliyorsunuz. Hero bölümü kısa bir başlık, bir alt başlık ve bir butondan oluşuyor. Kararları sırayla yazın: ziyaretçi kim, acısı ne, onu ileri taşıyan tek eylem nedir? Şimdi bir çatı kaplama müşterisine uygulayın. Ziyaretçi, kış ortasında akan bir çatısı olan bir tesis yöneticisidir. Acı, risk ve iş sürekliliğinin kesintiye uğramasıdır. Eylem ise "değerlendirme almak." SaaS örneği "ziyaretçinin ürünü hareket halinde görmesi gerekiyor" kararı verdiyse, ürün animasyonunu bitmiş işin fotoğrafıyla değiştirirsiniz. Aynı karar, farklı ortam. Görünüş benzerliği başarısızlığı olmadan böyle çalarsınız. Tek sayfa-tek eylem disiplini için bile kanıtlanmış SaaS açılış sayfası uygulamalarını inceleyin.

Önemli olan sektör değil, niyettir

Örnekleri sektör etiketine göre sınıflandırmayı bırakın. "Bu bir SaaS sitesi" size neredeyse hiçbir işe yarar bilgi vermez. "Bu, alıcının karar vermeden önce üç seçeneği karşılaştırdığı karmaşık bir karar sitesidir" size ne çalmanız gerektiğini söyler. Müşterinizin alıcı niyetine göre sınıflandırın, ardından örnek türünü bu niyetle eşleştirin.

Bir SaaS sitesi dönüşümünü kazanır çünkü alıcının niyeti "bu sorunumu çözer mi" kararını vermektir. Başlık vaadi taşır, deneme veya demo kanıttır, CTA tektir. Bir ajans sitesi dönüşümünü kazanır çünkü alıcının niyeti "bu kişiye paramı, markamı veya krizimi emanet edebilir miyim?" sorusudur. Kanıt, vaka çalışmaları, müşteri logoları, ekip güvenilirliğidir. CTA genellikle bir danışmadır. Bir portföy sitesi dönüşümünü kazanır çünkü alıcının niyeti "zevkleri itibarları kadar iyi mi?" sorusudur. Kanıt, işin kendisidir ve CTA bazen bilinçli olarak gizlenir.

Örnek türü	Ziyaretçi niyeti	Bunu çalın	Bunu atlayın
SaaS	"Bana uyup uymadığına karar ver"	Değer önerisi disiplini, tek CTA, özellikten faydaya metin	Yalnızca ürüne ait animasyonlar, fiyatlandırma sayfası yapısı, demo öncelikli CTA'lar
Ajans	"Bu firmaya güvenebilir miyim?"	Vaka çalışmaları, müşteri kanıtı, isim verilen ekip, net katılım yolu	Uzun süreç sayfaları, jargon dolu yaklaşım metinleri
Portföy	"Zevkleri işleri kadar iyi mi?"	Güçlü proje hikayeleri, önce/sonra, ölçülü sunum	Seyrek iletişim bilgileri, kişilik öncelikli metin, gizli CTA'lar

Ajansların hata yaptığı yer burasıdır: örneği müşterinin alıcısına göre değil, kendi hırslarına göre eşleştirirler. Bir hukuk firması müşterisi, bir rakibi olduğu için "portföy sitesi" ister. Niyet testini yapın. Avukat tutacak kişi korkmuştur. Avukatın benzer davaları kazandığına dair kanıt, adil faturalandırma ve kendini aptal hissettirmeyeceği güvencesi ister. Bu bir ajans kalıbıdır — kanıt, güvenilirlik, sonuçlar — portföy kalıbı değil. Ajans örneklerinden çalın: vaka sonuçları, müşteri hikayeleri, baro üyelikleri, net bir "çalışma nasıl başlar" bölümü. Belirli bir müşteri için hangi formatın gerçekten kazandığına karar vermeniz gerektiğinde, herhangi bir örneği açmadan önce format seçim çerçevesini uygulayın.

Tablo bir triyaj aracıdır, hapishane değil. Ticari projelere teklif veren bir inşaat taşeronu için alıcının niyeti "bu ekip programa ve bütçeye uygun performans gösterebilir mi?" sorusudur. Bu, portföy kanıtıyla ajans güvenidir. Hibritler sürekli olur. Hata, tek bir format seçmeniz gerektiğini düşünmektir. Siz hangi kalıbın baskın olduğunu seçiyorsunuz, hangi tek formatı kullanacağınızı değil. Bir inşaat sitesi önce/sonra fotoğrafları gösterebilir (portföy kalıbı) ve yine de güvenlik sertifikaları ve sendika üyelikleriyle öne çıkabilir (ajans kalıbı). Oranı niyete göre belirleyin, ardından son düzeni müşterinin marka sesi belirlesin.

İkinci bir senaryo düşünün: bir fractional-CFO danışmanlığı. Alıcı, önceki bir danışman tarafından yanmış bir kurucudur. Bu bir ajans sorunudur. Müşterilerine ve net sonuçlara isim veren ajans sitelerini inceleyin. Müşteriniz her zaman müşteri isimlerini veremez — Gizlilik Anlaşması (NDA) — bu yüzden karar aktarılır ancak kanıt değişir: logolar yerine anonimleştirilmiş "fintech portföy şirketi" ve sonuç dili. Plana "güven, kanıtın özgüllüğüne bağlıdır" yazın. Artık müşteri her öğenin neden var olduğunu bilir.

Kararı ödünç alın, tasarımı değil

Çoğu "en iyi uygulama" makalesi size tasarım seçimlerinin taşındığını söyler. Taşınmazlar. Tam ekran video hero, bir drone fotoğrafçılığı portföyünde işe yarar çünkü kitlenin işi görselleri değerlendirmektir. Aynı tam ekran videoyu bir yasal belge hizmetinin ana sayfasına koyarsanız ürünü gizlemiş olursunuz. Uygulayabileceğiniz en kötü tavsiye "bir sanatçı gibi çalın"dır. Çıktıyı çalmak benzer görünümlü siteler üretir. Kararları çalmak, dönüşüm sağlayan özel işler üretir.

Bu yüzden bir örnekteki her dikkate değer seçim için tek cümlelik bir "çünkü" yazın. Beyaz alan: "çünkü bu kitle boşluğu prestijle eşitler." Koyu arka plan: "çünkü bu kitle mühendislik düşünür ve karanlık mod teknik hissettirir." Gülümseyen kişi: "çünkü bu kitle işlemsel adımdan korkar ve sıcaklık ister." Artık karar taşınabilir. Prestijli bir hukuk firması beyaz alan kararına ihtiyaç duyabilir; indirimli bir hukuk hizmeti bunu reddetmelidir. Artık kopyalayacağınız bir ekran görüntüsü değil, uygulayacağınız bir kuralınız var.

Ekran görüntüsü almadan önce çünkü'yü yazın. Hafızanız bir ekran görüntüsünü "güzel tasarım" altında dosyalar ve bir hafta içinde gerekçesini kaybeder. Yazılı çünkü, bir mekanizmayı ifade etmenizi zorunlu kılar. Eğer yazamıyorsanız, örneği anlamamışsınızdır — sadece beğenmişsinizdir. Tüm oyun bu ayrımdır.

Somut bir örnek ekleyin. Serbest çalışan bir tasarımcı için bir portföy sitesi görüyorsunuz. Her proje büyük bir görselle, ardından sonuçla ve sonra müşterinin adıyla açılıyor. Karar: "bu kitle şeye bakarak sonuçları satın alır." Şimdi bir ev yenileme sitesini yeniden tasarlıyorsunuz. Alıcının işi de şeye — dönüşümlere — bakmaktır. Bu yüzden karar aktarılır: önce/sonra projelerden oluşan bir galeriyle başlayın. Ancak alıcı ekibin zamanında geldiğine de güvenmek zorunda, bu yüzden ajans sütunundan bir karar eklersiniz: sayfanın üst kısmında bir danışma CTA'sı ve bir referans. İskelet çalma yöntemi budur: iki ödünç alınmış karar, sıfır ödünç alınmış tasarım.

Size gösterdiğiniz ödüllü örneğe benzeyen bir site isteyen müşterilerden itirazlar duyacaksınız. Nazikçe direnin. Onlara örneğin pikselleri için değil, kararları için ödül kazandığını ve onların alıcılarının örneğin alıcıları olmadığını söyleyin. Tek cümlelik çünkü'yü gösterip "bu karar işe yarar; bu görsel sizin kitleniz için işe yaramaz" diyebildiğinizde konuşma daha kolay olur.

Uyarı: müşterinin alıcıları görsel olarak sofistikeyse — mimarlar, yaratıcı yönetmenler, kurum içi marka ekipleri — zevk ürünün kendisidir. Daha doğrudan ödünç alın. Soru asla "bu örneği beğeniyor muyum?" değildir. Soru "müşterimin alıcısının bu karara ihtiyacı var mı?"dır. Cevap hayırsa, suçluluk duymadan atın.

Bağlamla birlikte bir swipe dosyası oluşturun

Yılda birçok site kurduğunuzda tek seferlik ilham işe yaramaz. Ekran görüntülerini değil, kararları saklayan bir swipe dosyası oluşturun. Basit bir tablo kullanın: örnek, URL, kitle, niyet, vaat, kanıt, CTA ve "bunun için kullanma." Tek cümlelik "çünkü" için bir sütun daha ekleyin. Değer, o sütunda yaşar.

Her satır şunları içermelidir: örnek URL, ekran görüntüsü, tek cümlelik çünkü, baskın alıcı niyeti, vaat, kanıt, CTA ve bir "bunun için kullanma" uyarısı. Her satırı bir niyet etiketiyle işaretleyin: "acil yerel hizmet," "düşünülmüş satın alma," "güvene duyarlı profesyonel," "zevk odaklı yaratıcı." Yeni bir müşteri özeti geldiğinde önce niyet etiketine göre filtreleyin. Sektör yalnızca bir eşitlik bozucudur. Bir diş müşterisi ile bir tesisat müşterisi "hemen fiyat al" niyetini paylaşabilir — tesisat örnekleri, geçen hafta kaydettiğiniz süslü diş hekimi sitesinden diş sayfasına daha iyi hizmet edebilir.

Dosyayı üç ayda bir gözden geçirin. Artık dönüşüm sağlamayan veya geçerliliğini yitiren örnekleri silin. Haftada bir bulgu ekleyin, tek bir CTA olsa bile. İki çeyrek sonra, hiçbir tek örneğin sağlayamayacağı dahili bir karar kütüphanesine sahip olursunuz.

Dosyayı müşteri başlangıç toplantılarında kullanın. Filtrelenmiş bir görünüm sunun: "bu sayfa sistemini alıcılarınıza uyan üç karardan inşa ettik." Bu, ajansınızın yalnızca zevke değil, bir sisteme sahip olduğunu gösterir. Bu tek başına, trend olan bir düzeni kopyalamaktan daha fazla iş kazandırır.

Bir şeyi yayınlamadan önce, umursamayan bir müşterinin yapacağı gibi sonucu denetleyin. Bu denetim, yerini hak etmeyen her çalıntı tasarım kararını yakalar.

Sonuç

Web siteleri toplamayı bırakın. Nedenler toplamaya başlayın. Bir dahaki sefere bir müşteri özeti aldığınızda, swipe dosyasını açın, alıcılarına uyan niyeti bulun ve uyan kararları çalın. Tasarım zorunlu olarak onlara ait olacaktır — çünkü pazar, marka ve bütçe farklıdır. Önemli olan budur. Tersine mühendislikle oluşturulmuş bir site dönüşüm sağlar çünkü başka bir kitlenin doğruluğu kanıtlanmış kararlarından inşa edilmiştir ve sizinkine karşı yeniden test edilmiştir.