Swipe Dosyasından Sisteme: Ölçeklenen Web Sitesi Örnekleri

Özet

Birden fazla müşteriden sorumlu olduğunuz anda, web sitesi örneklerini kullanma şekliniz değişmek zorunda. Kaydedilmiş ekran görüntülerinden oluşan bir klasör ilk sunumda işe yarar ve üçüncüsünde başarısız olur, çünkü gerçek değer hiçbir zaman görüntü olmadı—asıl değer, sektörler arasında taşıyabileceğiniz desendir. Bu makale, bir örnek pratiği oluşturmanın üç aşaması boyunca ilerliyor: örnekleri göstermeden önce yorumlamak, bunları kimliksizleştirilmiş bir desen kütüphanesinde kodlamak ve her lansmanda gelişen bir geri bildirim döngüsüne dönüştürmek. Yol boyunca, tek CTA kuralının tembel versiyonuna karşı çıkıyor; bu kural, birden fazla hedef kitleye hizmet veren ajans sitelerinde çöker. Amaç, personel sirkülasyonuna dayanabilen ve zevkinizden daha az şey isteyen bir süreçtir, daha fazla değil.

Yer imlerinizin bir yerinde "inspo" adında bir klasör var ve içinde çok fazla sekme var. Her müşteri başlangıcı için web sitesi örnekleri toplar, en güçlülerini bir panoya dizersiniz ve sonra toplantıyı yorumlayarak geçirirsiniz: "Hayır, düzen değil. Ne yaptıklarını açıklama biçimleri." Bu yorumlama asıl beceridir, ama kafanızın içinde sıkışıp kalmıştır. Ajansın size ikinci bir hesap, sonra üçüncü bir hesap verdiği gün, iş "en iyi örnekleri bilmek" olmaktan çıkar ve "bunu tekrarlanabilir yapmak" haline gelir. Bir junior tasarımcının, gösterdiğiniz tek örnek olduğu için iki farklı müşteri için neredeyse aynı bölümü ürettiğini izlediyseniz, sorunu bilirsiniz. Bu, örnek pratiğinizin ajansınızla birlikte büyümesini sağlamak için bir rehber—ilk kazanımdan ölçeğe—bunu bir dine dönüştürmeden.

İlk müşteri: sunmadan önce yorumlayın

Müşteri başına üç örnek seçin ve bunlardan herhangi birini göstermeden önce, her biri için bir cümle yazın: bu örnek hangi desene katkıda bulunuyor ve müşteri neyi görmezden gelmeli? Erken aşama içgüdüsü biriktirmektir; en ucuz çözüm seçimdir. İyi seçilmiş bir Calendly ana sayfası, başlıkta sonucu adlandırma desenine katkıda bulunur—"karşılıklı e-postalar olmadan toplantı planlayın"—müşteriye sakinleştirici beyaz arka planı görmezden gelmesini söylerken. Linear'in kahraman bölümü farklı bir ders verir: katlanma çizgisinin üzerindeki her öğenin bir işi vardır, bu yüzden örnek, müşteriniz yazılımdan çok uzak bir şey satsa bile kullanışlı kalır. Bu iki yorumu toplantıdan önce yazın. İkinci cümleyi yazamıyorsanız, örnek dekorasyondur, kanıt değildir. Bu, iskeletlerini çalın hamlesidir, ancak yazıya döküldüğünde bir ekip becerisine dönüşür.

Diyelim ki brief, alıcıları depo yöneticileri olan bölgesel bir lojistik şirketi için. İlk içgüdünüz üç lojistik sektörü sitesi çekmek olur; bunun yerine, sonuç-ilk başlık için Calendly'yi, tek bir eyleme kendini adamış bir sayfa için Notion'ı ("Notion'ı ücretsiz edinin" CTA'sı) ve herhangi bir sektörden çirkin ama bilgilendirici bir takip sayfasını çekin. Toplantıda şöyle deyin: "Calendly bir lojistik şirketi değil. Ödünç aldığımız kısım, başlığın kullanıcı bir özelliği okumadan önce sürtünmeyi ortadan kaldırması. Notion'ın değeri ölçülülük: tek net eylem." Müşterinin paralaks efektleri istemeyi bırakıp başlık hakkında tartışmaya başladığını görürsünüz. Bütün mesele bu—örnekler düşünme araçları olarak çalıştı, şablonlar olarak değil.

Beşinci müşteri: yinelenen blokları kodlayın

Birkaç site yayınladıktan sonra kimliksizleştirilmiş bir desen kütüphanesi başlatın. Başka bir ekran görüntüsü klasörü değil—sade bir dille adlandırılmış yinelenen yapı taşlarının bir belgesi: "sonuç başlığı," "tek iş kahramanı," "kanıt sandviçi," "güven sayfası." Amaç, markayı soyarken ilkeyi yakalamaktır, böylece ekip, başka bir müşterinin görünümünü birebir kopyalamadan onu yeniden kullanabilir. Aynı SaaS örneklerinin sürekli övülmesinin nedeni görsel gösteriş değil yapıdır: üstte net bir değer önerisi, odaklanmış bir üst-çizgi bölümü, tek bir birincil eylem. Bir desen kütüphanesi bu yapıyı bir kez yakalar ve bir sonraki yeniden tasarıma dayanmasını sağlar. Yeni bir hesap geldiğinde, internette aramadan önce kütüphaneyi ararsınız. Bu, bütçe konuşmasını değiştirir, çünkü artık ilham satın almıyorsunuz; test edilmiş kararları uyguluyorsunuz.

Aşama	Koru	At
İlk projeler	3 çalışan örnek + neden yorumları	devasa swipe dosyası
Birkaç lansman	kimliksizleştirilmiş bir desen kütüphanesi	uzun bahaneye ihtiyaç duyan örnekler
Ölçekte	geri bildirim döngüsü olan canlı bir kütüphane	üç yıl önceki sürümlenmemiş ekran görüntüleri

Boutique bir muhasebe firması üzerinden çalışalım: bir tasarımcıya "işte beş muhasebe web sitesi" vermek yerine, ona kütüphane kartını verirsiniz: "güven sayfası deseni: biz kimiz, müşteri bizi işe alarak nelerden kaçınır, kıdem kanıtı, tek bir sonraki adım." Tasarım hâlâ bir insan gözüne ihtiyaç duyar, ancak kararlar zaten verilmiştir. Ayrıca her muhasebe firmasının kopyaladığı gri takım elbiseli düzenden de kaçınırsınız, çünkü deseniniz renk hakkında hiçbir şey söylemez. En iyi kaynaklar nadiren aynı sektörden olur zaten; bilinçli olarak diğer sektörlerden web sitesi örnekleri ödünç alın ve aktarılanı korumak için desen kütüphanesini kullanın.

Yirminci müşteri: kütüphaneye bir geri bildirim döngüsü kazandırın

Her lansmandan sonra kısa bir denetim yapın ve bulguları kütüphaneye geri besleyin. Çoğu ekip, "müsait olan, geçen yılın şablonunu birisi şikâyet edene kadar günceller" noktasında durur. Ölçek hamlesi, her canlı siteyi desenlerinizin bir testi olarak ele almaktır. Denetim süslü araçlar gerektirmez: lansman gününde, bölümlere alışılmadık bir müşterinin gözleriyle bakın; bir hafta sonra, telefonlara cevap veren kişiye ziyaretçilerin hâlâ hangi soruları sorduğunu sorun; bir ay sonra, hangi CTA'ların gerçekten tıklandığını kontrol edin. Bazı sevilen desenlerin yerlerini asla hak etmediğini göreceksiniz—onları silin. Bu, sizi umursamayan bir müşteri gibi denetim yapma alışkanlığıdır, ancak koleksiyonun kendisine uygulanmıştır: sadece müşterinin sayfasını değil, örneklerinizi denetliyorsunuz.

Eski sitesi "bizimle çalışın" eylemini Hakkımızda sayfasının arkasına gömmüş bir profesyonel hizmetler müşterisini ele alalım. Desen kütüphanesinin "tek iş kahramanı" kartı, bir sonraki tasarımcıya eylemi üst-çizgiye koymasını söyler. Lansmandan sonra, işe alım kitlesinin sürekli çıkış yaptığını fark edersiniz. Bu desenin bir başarısızlığı değil; bu sayfanın iki hedef kitleye hizmet ettiğinin kanıtı ve kütüphanenin "çok kitleli" bir varyanta ihtiyacı var. Bir not ekleyin, eski kartı "tek hedef kitleli sayfalar için" olarak işaretleyin ve bir sonraki benzer müşteri hatayı tekrarlamayacaktır.

Karşıt görüş bölümü: tek CTA emrini kelimesi kelimesine almayın

Şimdi karşı çıkış. Birçok SaaS örneği yazısı size her sayfanın tek bir CTA'ya sahip olması gerektiğini söyleyecektir ve Notion'ın tek CTA'sı olan "Notion'ı ücretsiz edinin" kanıt olarak öne sürülür. Bu tavsiye, tüm işi tek bir kayıt olan ürün sayfaları için doğrudur; birden fazla hedef kitleye sahip bir müşteri için tasarlamaya başladığınız anda yanlış hale gelir. "Tek CTA"yı bir yasa gibi görmek, bir kuruluşun işe alım sayfası, basın iletişimi ve danışma formunun tek bir buton için yarıştığı ajans siteleri üretir. Kuralın savunulabilir versiyonu "sayfa başına, hedef kitle başına tek bir birincil hedef"tir, "asla tek bir buton değil." Her bölümü tek bir eyleme yönlendiren aynı örnek, ziyaretçiden tam olarak tek bir şey yapmasını isteyen bir sayfa olarak okunabilir—çalınmaya değer ilke budur. Bir üniversite veya danışmanlık firması, potansiyel müşteriler için bir birincil eyleme ve akademisyenler için başka bir eyleme ihtiyaç duyar; tek bir CTA'yı dayatmak ikisini de gizler. İlkeyi koruyun, ekran görüntüsünü atlayın.

Toplamaya daha az, karar vermeye daha çok zaman ayırın

Bunların hiçbiri daha büyük bir swipe dosyası gerektirmez. Kaydettiklerinizin çoğunu silmeyi ve hayatta kalanların neden önemli olduğunu yazmayı gerektirir. Aşamalar basit: sunmadan önce yorumlayın; çalışmaya devam edenleri kodlayın; yayınladıklarınızı denetleyin; müşteriye uymayan emirleri görmezden gelin. Bir ajansın örnek pratiği, projeleriyle aynı şekilde olgunlaşmalıdır—elden üretilmişten tekrarlanabilire, kendini geliştirene kadar. Klasör hâlâ orada. Sadece artık çok daha küçük.