Web tasarım ve geliştirme stratejisi; iş hedeflerini bir web sitesinin sayfaları, özellikleri, içeriği ve teknolojisiyle birbirine bağlayan ve bunların hangi sırayla inşa edileceğini belirleyen yazılı bir plandır. Sitenin ne başarması gerektiğini, kime hizmet ettiğini, hangi yığın tarafından desteklendiğini ve lansmandan sonra başarının nasıl ölçüleceğini yanıtlar. Bu olmadan, bir yenidən tasarım renkler ve düzenler hakkında fikirler dizisine dönüşür.
Neden bu kadar çok web sitesi projesi aksıyor?
Aksayan projelerin çoğu aynı kök nedeni paylaşır: Tasarım, kimse sitenin ne amaçla yapıldığı konusunda anlaşmaya varmadan önce başladı. Paydaşlar maketleri inceler, birbiriyle çelişen geri bildirimler verir ve kapsam her toplantıyla birlikte büyür. Aylar sonra ekibin güzel ekranları vardır ancak içine koyacak hiçbir içeriği yoktur.
Bir strateji sırayı tersine çevirir. Hedefler ve kitle önce gelir, ardından yapı ve içerik, sonra görsel tasarım ve en son inşa aşaması gelir. Her aşama, bir sonraki aşamanın bağımlı olduğu bir belge veya çıktı üretir; bu da geri bildirimleri kişisel olmaktan çıkarıp somut hale getirir.
Adım 1: Ölçebileceğiniz hedefler belirleyin
İki veya üç iş hedefiyle başlayın ve her birini bir site metriğine dönüştürün. “Daha modern görünmek” bir hedef değildir. “Organik ziyaretçilerden gelen demo taleplerini artırmak” bir hedefdir çünkü bunu analitik ve CRM’de ölçebilirsiniz.
- Potansiyel müşteri üretimi: form gönderimleri, rezerve edilen aramalar, nitelikli potansiyel müşteri oranı.
- E-ticaret: dönüşüm oranı, ortalama sipariş değeri, ödeme tamamlama.
- İçerik ve otorite: organik oturumlar, öncelikli konular için sıralamalar, bülten kayıtları.
- Destek azaltımı: bilete dönüşmeyen yardım merkezi ziyaretleri.
Proje başlamadan önce her metrik için mevcut başlangıç çizgisini kaydedin. Aksi takdirde daha sonra hiç kimse yeni sitenin daha iyi performans gösterip göstermediğini söyleyemez.
Ardından kullanıcıları ve görevlerini haritalandırın
Bir avuç müşteri ile satış veya destek personeliyle görüşme yapın. İnsanların sitede ne yapmaya çalıştığını, kafalarını neyin karıştırdığını ve satın almadan önce ne sorduklarını sorun. Arama konsolu sorgularını, site içi arama terimlerini ve en iyi açılış sayfalarını inceleyin. Bu kaynaklar size hangi görevlerin önemli olduğunu söyler; bu da stok fotoğrafına sahip genel bir karakterden çok daha faydalıdır.
En önemli beş görevi “fiyatlandırma planlarını karşılaştır” veya “en yakın ofisi bul” gibi sade bir dille yazın. Önemli her sayfa bunlardan en az birini desteklemelidir.
Bilgi mimarisi ne içermelidir?
Bilgi mimarisi, görevleri bir site haritasına ve navigasyona dönüştürür. Anahtar sayfaların ana sayfadan iki veya üç tıklama uzakta olacağı kadar sığ tutun ve bölümleri organizasyon şemanızın düzenine göre değil, kullanıcıların konuştuğu şekilde adlandırın.
Site haritası ve URL planı
Site haritasını bir ağaç olarak çizin ve her bölüme bir URL deseni atayın. Mevcut bir siteyi yeniden tasarlıyorsanız, her eski URL’yi yeni bir tanesiyle eşleştirin ve 301 yönlendirmelerini planlayın. Yönlendirmeleri kaybetmek, lansmandan sonra organik trafik kaybetmenin en hızlı yoludur.
İçerik modeli
İçerik türlerini ve alanlarını tanımlayın: bir hizmet sayfasının başlığı, özeti, faydaları, süreç adımları, SSS’leri ve bir eylem çağrısı vardır; bir vaka çalışmasının ise bir müşterisi, zorluğu, çözümü ve sonuçları vardır. Net bir içerik modeli, editörlerin tutarlı bir şekilde yayın yapmasına ve geliştiricilerin tek seferlik sayfalar yerine yeniden kullanılabilir şablonlar oluşturmasına olanak tanır.
Adım 3: Önümüzdeki beş yıl için teknoloji yığınını seçin
Doğru teknoloji, ekibinizin sürdürebileceği teknoloji yığınıdır. Sık içerik güncellemeleri içeren bir pazarlama sitesi genellikle blok tabanlı bir temaya sahip WordPress gibi bir CMS’e uygundur; ağır uygulama mantığına sahip bir ürün ise headless CMS içeren Next.js gibi bir çatıya ihtiyaç duyabilir. Seçenekleri daha sonra önemli olacak sorular üzerinden karşılaştırın:
- İçeriği kim düzenleyecek ve teknik düzeyleri nedir?
- Site kaç dili ve bölgeyi desteklemelidir?
- Hangi entegrasyonlar gereklidir: CRM, ödeme, analitik, arama?
- Teknoloji yığını hangi barındırma, güvenlik güncellemeleri ve yedeklemelere ihtiyaç duyacak?
- Gerekirse başka bir ajans veya geliştirici kodu devralabilir mi?
Sırf moda olduğu için bir teknoloji yığını seçmekten kaçının. Her özel özellik, yıllar boyunca bakımını yapacağınız, test edeceğiniz ve güncelleyeceğiniz bir şeye dönüşür.
Tasarım sistemleri bir sitenin tutarlı kalmasını nasıl sağlar?
Bir tasarım sistemi; token’ların (renkler, tipografi ölçeği, boşluklar), bileşenlerin (butonlar, kartlar, formlar) ve desenlerin (hero bölümleri, fiyat tabloları) paylaşılan bir kütüphanesidir. Tasarımcılar bundan sayfalar oluşturur, geliştiriciler her bileşeni bir kez uygular ve site büyüdükçe tutarlı kalır.
Küçük başlayın. İyi oluşturulmuş bir düzine bileşen, pazarlama sitelerinin çoğunu kapsar. Her sayfa isteği için yeni bir bileşen tasarlama dürtüsüne karşı koyun; yeni düzenlerin çoğu, farklı içeriklere sahip mevcut parçalardan oluşturulabilir. Bir istek gerçekten yeni bir şey gerektirdiğinde, bir sonraki sayfanın onu yeniden kullanabilmesi için belgelendirmeyle birlikte kütüphaneye ekleyin. Her birini kullanım notları, erişilebilirlik gereksinimleri ve maksimum başlık uzunluğu gibi içerik sınırlarıyla birlikte belgelendirin.
Adım 4: Performans ve erişilebilirlik bütçeleri belirleyin
Geliştirmeden sonra değil, geliştirmeden önce ölçülebilir kalite hedefleri üzerinde anlaşın. Google’ın Temel Web Verileri net eşikler sağlar: En Büyük İçerikli Boyama (LCP) 2,5 saniye veya altında, Sonraki Boyamaya Etkileşim (INP) 200 milisaniye veya altında ve Kümülatif Düzen Kayması (CLS) 0,1 veya altında. Erişilebilirlik için WCAG 2.2 seviye AA ortak bir hedeftir; normal metin için en az 4,5:1 kontrast oranı dahildir.
Bütçeler kaliteyi bir kontrol listesi öğesine dönüştürür. Yeni bir hero videosu LCP’yi hedefin ötesine iterse, ekip bunu lansman sonrası bir denetimde keşfetmek yerine bir ödünleşim (trade-off) olarak tartışır.
Adım 5: Aşamalı olarak inşa edin, test edin ve lansman yapın
Önce şablonları ve bileşenleri geliştirin, ardından gerçek içeriği doldurun ve son olarak test edin. Testler tarayıcıları ve cihazları, formları ve entegrasyonları, yönlendirmeleri, analitik etkinliklerini, sayfa hızını ve erişilebilirliği kapsamalıdır. Örneğin blog bölümünü önce yayınlamak gibi aşamalı bir lansman, büyük sitelerdeki riskleri azaltır.
- Kırık bağlantıları ve eksik meta verileri yakalamak için hazırlık (staging) sitesini tarayın.
- Eski URL haritasındaki her yönlendirmeyi doğrulayın.
- CRM teslimi ve onay e-postaları dahil olmak üzere formları baştan sona test edin.
- Analitik ve dönüşüm etiketlerinin iki kez değil, bir kez tetiklendiğini onaylayın.
- DNS’i değiştirmeden önce robots.txt ve noindex ayarlarını kontrol edin.
Lansmandan sonra ne olur?
Lansman, ölçüm aşamasının başlangıcıdır. Hedef metriklerini 30, 60 ve 90 gün sonra inceleyin, tarama hataları ve sıralama değişiklikleri için arama konsolunu izleyin ve kullanıcı geri bildirimlerini toplayın. Beklenen etki ve çabaya göre sıralanmış iyileştirmelerden oluşan bir yapılacaklar listesi (backlog) tutun ve bunları küçük partiler halinde yayınlayın.
Lansmandan sonra site için bir sahip atayın. Projeler sıklıkla ivme kaybeder çünkü proje ekibi dağılır ve hiç kimse yapılacaklar listesinden, içerik takviminden veya aylık performans incelemesinden sorumlu olmaz.
Küçük adımlarla gelişmeye devam eden siteler, birkaç yılda bir büyük bir yeniden tasarım geçiren ve ardından hiç dokunulmadan bırakılan siteleri geride bırakma eğilimindedir.
Bu hafta nereden başlanmalı
Üç ölçülebilir hedef, mevcut başlangıç çizgileri ve en iyi beş kullanıcı görevini içeren tek sayfalık bir brifing yazın. Ardından bir tarayıcıdan veya CMS’nizden mevcut URL’lerinizi dışarı aktarın ve yönlendirme haritasına başlayın. Bu iki belge,yi izleyen her tasarım ve geliştirme kararını şekillendirecektir ve bunların üretilmesi neredeyse hiç maliyet gerektirmez.
Okumaya devam edin: Web Tasarım ve Geliştirme · Web Tasarımı