
Bu kapsamlı rehberde, bir web projesi başlamadan önce teknik planlamanın temel taşları olan requirements, sitemap, route, URL architecture, layout, page, reusable component ve içerik modeli kavramları gerçekçi bir proje örneği üzerinden detaylı şekilde ele alınır. İçerik, yeni proje planlayan geliştiriciler ve site yöneticileri için teknik kavramları anlaşılır hale getirirken, bilgi mimarisi, yönetim kolaylığı, SEO uyumu ve sürdürülebilir geliştirme açısından doğru kararların nasıl alınacağını adım adım açıklar.
Bir web projesinin başarısı çoğu zaman yazılan kodun kalitesiyle değil, kod yazılmadan önce yapılan planlamanın doğruluğuyla belirlenir. Özellikle kurumsal siteler, hizmet platformları, içerik projeleri ve yönetim panelli yapılar söz konusu olduğunda teknik kavramların baştan netleştirilmesi büyük zaman ve maliyet avantajı sağlar. Requirements, sitemap, route yapısı, URL architecture, layout sistemi, page kurgusu, reusable component yaklaşımı ve içerik modeli bu planlamanın omurgasını oluşturur.
Bu kavramlar ilk bakışta yalnızca geliştiricilere ait teknik başlıklar gibi görünse de, aslında proje yöneticileri, içerik editörleri, SEO uzmanları ve işletme sahipleri için de doğrudan önemlidir. Çünkü yanlış kurgulanan bir yapı, sonradan içerik üretimini zorlaştırır, SEO performansını düşürür ve yeni özellik eklemeyi pahalı hale getirir. Bu yazıda tüm kavramları örnek bir web projesi üzerinden, birbirleriyle ilişkili şekilde ele alacağız.
Requirements, en basit tanımıyla projenin ne yapacağını, kim için yapılacağını ve hangi sınırlar içinde çalışacağını belirleyen ihtiyaçlar kümesidir. Bu bölüm çoğu ekipte ihmal edilir, çünkü insanlar hızlıca tasarıma veya kodlamaya geçmek ister. Oysa requirements belirsizse, geliştirilen her ekran ileride tekrar değişme riski taşır.
Bir requirements dokümanı sadece özellik listesi değildir. İçinde hedef kullanıcılar, kullanıcı senaryoları, iş hedefleri, teknik zorunluluklar, yönetim paneli ihtiyaçları, SEO beklentileri, entegrasyonlar ve performans beklentileri de yer almalıdır. Böylece ekip, projeyi yalnızca görsel bir çıktı olarak değil, çalışan bir sistem olarak düşünmeye başlar.
Örnek bir proje düşünelim: hizmetlerini tanıtan, blog barındıran ve teklif formu olan bir dijital çözüm platformu. Bu projede requirements şu sorulara cevap vermelidir: Kimler siteyi kullanacak, hangi sayfalar olacak, form verileri nereye düşecek, blog içerikleri nasıl yönetilecek, çoklu hizmet sayfaları olacak mı, yönetici panelinde hangi alanlar düzenlenebilecek. Bu sorular cevaplanmadan yapılan tasarım, çoğunlukla varsayımlara dayanır.
Requirements yazarken ihtiyaçları üç seviyeye ayırmak faydalıdır. Birincisi iş gereksinimleri, yani şirketin projeden ne beklediğidir. İkincisi kullanıcı gereksinimleri, yani ziyaretçinin sitede neyi kolayca yapabilmesi gerektiğidir. Üçüncüsü sistem gereksinimleri, yani yazılımın arka planda hangi teknik koşulları sağlaması gerektiğidir.
Aşağıdaki örnek, iyi bir requirements başlangıcının nasıl görünebileceğini gösterir:
| Başlık | Örnek |
|---|---|
| Proje tipi | Kurumsal web sitesi + blog + teklif formu |
| Hedef kullanıcı | KOBİ sahipleri, girişimler, dijital çözüm arayan kurumlar |
| Temel amaç | Hizmet tanıtımı, güven oluşturma, lead toplama |
| Yönetim ihtiyacı | Sayfa düzenleme, blog ekleme, form kayıtlarını görme |
| SEO ihtiyacı | Hizmet sayfaları için düzenlenebilir meta alanları ve temiz URL yapısı |
| Gelecek ihtiyaç | E-ticaret veya özel platform modüllerine genişleyebilme |
Requirements aşaması ne kadar netse, sonraki tüm teknik kararlar o kadar kolay alınır. Özellikle Pratikweb gibi hazır web sitesi ile başlayıp ihtiyaç büyüdükçe geliştirilebilir çözümler sunan yapılarda bu aşama kritik hale gelir. Çünkü başlangıçta basit görünen bir proje, doğru planlanırsa ileride hizmet kataloglarına, blog sistemine, başvuru modüllerine veya özel platform bileşenlerine dönüşebilir.
Sitemap, bir sitenin hangi sayfalardan oluştuğunu ve bu sayfaların birbirleriyle nasıl ilişkilendiğini gösteren bilgi mimarisi haritasıdır. Buradaki sitemap kavramı yalnızca XML sitemap değildir. Asıl önemli olan, kullanıcı ve ekip için sitenin yapısal omurgasını tanımlayan sayfa ağacıdır.
Bir sitemap olmadan proje geliştirmek, odaları planlanmamış bir bina inşa etmeye benzer. Sayfalar sonradan eklenmeye başladıkça menü yapısı bozulur, içerik dağılır ve kullanıcı yolculuğu zayıflar. Üstelik SEO açısından da hangi içeriklerin ana sayfa, hangi içeriklerin alt kategori veya detay sayfası olacağı belirsizleşir.
Örnek proje için temel sitemap şu şekilde olabilir:
Bu yapıdan hemen birkaç önemli karar çıkar. Hizmetler ile çözümler aynı şey değildir, dolayısıyla ayrı üst sayfalar olabilir. Blog listeleme ile blog detay sayfası farklı yapılardır. Teklif al sayfası bağımsız bir dönüşüm noktası olarak kurgulanmalıdır. Böylece tasarım, içerik ve route planı da bu hiyerarşiye göre şekillenir.
Sitemap hazırlanırken yalnızca mevcut ihtiyaç değil, büyüme senaryosu da düşünülmelidir. Örneğin bugün üç hizmet sayfası olan bir yapının yarın on hizmet sayfasına çıkması muhtemeldir. Bu yüzden baştan ölçeklenebilir bir ağaç kurmak gerekir. Düzensiz oluşturulan tekil sayfalar, ileride hem URL yapısını hem de menü deneyimini zorlaştırır.
İyi bir sitemap şu prensiplere dayanır:
Sitemap, route yapısının ön çalışmasıdır. Yani önce içerik ve sayfa ilişkileri düşünülür, sonra bu yapının teknik URL karşılıkları üretilir. Bu nedenle sitemap yalnızca içerik ekiplerinin değil, geliştiricilerin de temel referans dokümanlarından biri olmalıdır.
Route, uygulamanın hangi URL isteğinde hangi sayfayı veya bileşeni göstereceğini belirleyen teknik eşlemedir. URL architecture ise bu URL’lerin kullanıcı, arama motoru ve yönetim mantığı açısından nasıl tasarlanacağını ifade eder. Kısacası route daha çok teknik yönlendirme, URL architecture ise yapısal ve stratejik planlamadır.
Bu iki kavramın karıştırılması sık rastlanan bir durumdur. Örneğin geliştirici tarafında
/blog/[slug]/blog/yazi-basligi/hizmetler/hazir-web-sitesi/cozumler/ilan-platformuÖrnek proje için route ve URL planı şu şekilde kurgulanabilir:
| Sayfa tipi | Örnek URL | Route mantığı |
|---|---|---|
| Ana sayfa | / | statik route |
| Hakkımızda | /hakkimizda | statik route |
| Hizmetler listeleme | /hizmetler | statik route |
| Hizmet detay | /hizmetler/[slug] | dinamik route |
| Çözümler listeleme | /cozumler | statik route |
| Çözüm detay | /cozumler/[slug] | dinamik route |
| Blog listeleme | /blog | statik route |
| Blog detay | /blog/[slug] | dinamik route |
| İletişim | /iletisim | statik route |
| Teklif al | /teklif-al | statik route |
İyi bir URL architecture kurarken birkaç önemli kurala dikkat edilmelidir. URL’ler kısa, anlaşılır ve içerik türünü belli eden yapıda olmalıdır. Gereksiz parametreler, anlamsız klasörler veya tarih bazlı zorunlu segmentler genellikle tavsiye edilmez. Ayrıca Türkçe karakter, büyük harf ve rastgele ID kullanımı mümkün olduğunca sınırlandırılmalıdır.
SEO açısından da URL mimarisi çok önemlidir. Kullanıcı URL’ye baktığında sayfanın ne hakkında olduğunu anlayabilmelidir. Aynı zamanda içerik türleri birbirinden ayrışmalıdır. Hizmet sayfaları, blog içerikleri ve çözüm detayları aynı düzlemde karışık biçimde yer alırsa hem kullanıcı deneyimi hem de içerik kümelenmesi zayıflar.
Burada dikkat edilmesi gereken başka bir konu da gelecekteki yönetim kolaylığıdır. Eğer proje zamanla büyüyecekse URL’lerin içerik modeliyle uyumlu olması gerekir. Örneğin yönetim panelinde bir içerik tipi service ise bunun doğal yolu
/hizmetler/[slug]Layout çoğu kişi tarafından sadece header ve footer içeren görsel iskelet olarak düşünülür. Oysa modern web projelerinde layout, belirli sayfa gruplarının ortak davranışlarını, alanlarını ve yapısal düzenini yöneten temel katmandır. Yani layout hem görsel hem de teknik bir organizasyon aracıdır.
Örneğin ana sayfa ile blog detay sayfası aynı layout’u paylaşmak zorunda değildir. Birinde geniş tanıtım alanları, dönüşüm bileşenleri ve güven blokları varken, diğerinde okuma deneyimini öne çıkaran dar içerik alanı, içindekiler menüsü ve ilgili yazılar bölümü olabilir. Bu farkı page içinde tek tek çözmek yerine layout seviyesinde planlamak daha sürdürülebilir bir yöntemdir.
Örnek projede aşağıdaki layout yapısı mantıklı olabilir:
Bu ayrım, reusable component mantığını da güçlendirir. Çünkü her sayfaya aynı yapıyı zorla uygulamak yerine, benzer ihtiyaçları olan sayfa grupları ortak layout altında toplanır. Sonuç olarak hem kod tekrarları azalır hem de tasarım sistemi daha düzenli çalışır.
Layout planlaması yapılırken şu sorular sorulmalıdır: Hangi sayfalar aynı üst yapıyı paylaşacak, hangi alanlar global olacak, hangi bloklar sadece belirli sayfa türlerinde görünecek, mobilde davranış nasıl olacak, SEO alanları layout içinde mi page içinde mi yönetilecek. Bu sorular, özellikle büyüyen projelerde sonradan çok kritik hale gelir.
Pratikweb gibi yönetilebilir ve ölçeklenebilir web çözümlerinde layout yaklaşımı baştan doğru kurulursa, hazır web sitesi ile başlayan bir proje daha sonra blog, hizmet katalogları, başvuru sayfaları veya özel modüller kazandığında mevcut yapıyı bozmadan genişleyebilir. Bu da hem müşteri tarafında hem geliştirme tarafında ciddi avantaj oluşturur.
Page, kullanıcının tarayıcıda gördüğü tekil sayfa deneyimidir. Ancak teknik planlamada page, sadece bir ekran değil, veri, bileşen, SEO alanları, route ilişkisi ve içerik düzeni ile birlikte ele alınması gereken bir birimdir. Başka bir deyişle page, tasarım ile veri modelinin kesişim noktasıdır.
Yeni başlayan ekiplerde sık yapılan hata, her sayfayı bağımsız ve tek seferlik bir iş gibi düşünmektir. Böyle olunca aynı yapıdaki sayfalar için bile tekrar tekrar farklı çözümler yazılır. Oysa önce sayfa tipleri tanımlanırsa, proje çok daha kontrollü ilerler.
Örnek proje için page tipleri şöyle sınıflandırılabilir:
| Page tipi | Açıklama |
|---|---|
| Statik kurumsal sayfa | Hakkımızda, iletişim, KVKK gibi sayfalar |
| Listeleme sayfası | Blog listesi, hizmetler listesi, çözümler listesi |
| Detay sayfası | Blog detay, hizmet detay, çözüm detay |
| Landing page | Reklam veya kampanya odaklı özel sayfa |
| Form odaklı sayfa | Teklif al, başvuru formu, iletişim formu |
Bu sınıflandırma sayesinde ekip şunu anlar: Her sayfa için sıfırdan yapı kurmak gerekmiyor, benzer sayfalar ortak mantıkla üretilebilir. Örneğin tüm hizmet detay sayfaları aynı page template’i kullanabilir, sadece içerik alanları değişir. Blog detay sayfaları da benzer şekilde ortak şablonla ilerleyebilir.
Bir page tasarlanırken aşağıdaki unsurlar birlikte düşünülmelidir:
Page kavramı özellikle içerik yönetimli sistemlerde daha da önem kazanır. Çünkü ekranda görülen şeyin ne kadarının sabit, ne kadarının yönetilebilir olduğu bu aşamada netleşir. Eğer bu ayrım yapılmazsa, içerik editörü her küçük değişiklik için geliştiriciye ihtiyaç duyar. Bu da sistemin verimliliğini düşürür.
Reusable component, farklı sayfalarda tekrar tekrar kullanılabilen, belirli bir sorumluluğu olan arayüz bileşenidir. Bu yaklaşım modern web geliştirmede sadece kod temizliği için değil, hız, tutarlılık ve ölçeklenebilirlik için de kritik öneme sahiptir. Çünkü tekrar eden her yapı komponentleşmediğinde bakım maliyeti artar.
Örneğin bir projede buton, kart, breadcrumb, form alanı, hizmet kutusu, blog kartı, SSS akordiyonu, CTA bloğu veya güven göstergesi gibi yapılar birçok yerde tekrar eder. Bunları her sayfada ayrı kodlamak yerine reusable component olarak tasarlamak, hem tasarımsal birlik sağlar hem de değişiklik yönetimini kolaylaştırır.
Örnek proje için component hiyerarşisi şu şekilde kurulabilir:
Böyle bir yapı, hem geliştiricilere hız kazandırır hem de marka tutarlılığı sağlar. Örneğin tüm butonlar aynı component’i kullandığında renk, hover davranışı, ikon yerleşimi ve erişilebilirlik standartları tek merkezden yönetilir. Aynı şekilde blog kartında yapılan bir iyileştirme, tüm blog listelemelerine otomatik yansır.
Reusable component yaklaşımı aynı zamanda Pratikweb gibi modüler düşünülen yapılarda çok değerlidir. Çünkü hazır web sitesi, hizmet sayfası, blog modülü veya özel platform ekranları aynı temel bileşen havuzundan beslenebilir. Bu da yeni proje üretimini hızlandırır ve farklı müşteri ihtiyaçlarını daha verimli karşılamayı mümkün kılar.
Ancak her şeyi component yapmak da doğru değildir. Gerçekten tekrar eden, net sorumluluğu olan ve farklı bağlamlarda kullanılabilecek parçalar componentleşmelidir. Aksi halde proje aşırı parçalanır ve okunabilirlik azalır. Buradaki amaç sadece tekrar azaltmak değil, anlamlı modülerlik kurmaktır.
İçerik modeli, bir projede hangi içerik tiplerinin bulunduğunu ve bu içeriklerin hangi alanlardan oluştuğunu tanımlar. Bu model olmadan yönetim paneli kurmak, içerik üretmek veya dinamik sayfalar oluşturmak düzensiz hale gelir. Kısacası içerik modeli, görünmeyen ama tüm editoryal yapıyı yöneten veri tasarımıdır.
Birçok projede içerik modeli hiç düşünülmeden sadece sayfa tasarlanır. Sonrasında yönetim paneli aşamasında şu sorular ortaya çıkar: Blog yazısında özet alanı olacak mı, hizmet sayfasında kapak görseli zorunlu mu, SEO alanları her içerik tipinde ayrı mı tutulacak, CTA blokları tekrar kullanılabilir mi, SSS’ler sayfaya özel mi global mi olacak. Bu soruların cevabı baştan verilmezse sistem sonradan yamalı hale gelir.
Örnek projede aşağıdaki içerik tipleri tanımlanabilir:
| İçerik tipi | Olası alanlar |
|---|---|
| Page | başlık, slug, özet, içerik blokları, SEO alanları |
| Service | hizmet adı, slug, kısa açıklama, detay içerik, kapak görseli, CTA |
| Solution | çözüm adı, sektör, kullanım senaryosu, içerik, görseller |
| Blog Post | başlık, slug, özet, içerik, yazar, kategori, etiket, yayın tarihi, kapak görseli |
| FAQ Item | soru, cevap, kategori |
| Testimonial | isim, unvan, şirket, yorum, puan |
| Form Submission | ad, e-posta, telefon, mesaj, kaynak sayfa |
Bu model sayesinde hem route yapısı netleşir hem de yönetim paneli çok daha düzenli kurulur. Örneğin
ServiceBlog PostFAQ Itemİçerik modelinin en önemli faydalarından biri ölçeklenebilirliktir. Başlangıçta sadece birkaç sayfası olan bir site, zamanla onlarca hizmet detayına, yüzlerce blog içeriğine veya kampanya sayfasına ulaşabilir. İçerik modeli doğru kurulduğunda bu büyüme sistemi bozmaz. Tersine, yeni içeriklerin aynı standartta üretilmesini sağlar.
Bu yaklaşım, Pratikweb’in sunduğu yönetim kolaylığı ile de uyumludur. Çünkü kullanıcı teknik detaylara boğulmadan içerik ekleyebilmek ister. Bunun için de arka planda güçlü ama sade düşünülmüş bir içerik modeli gerekir. Ebazaars altyapısı gibi servis tabanlı yapılarda bu modelleme daha da değer kazanır; çünkü farklı servisler anlamlı veri yapılarına bağlandığında sistem hem hazır çözüm hem de özel çözüm üretme kapasitesi kazanır.
Şimdiye kadar kavramları tek tek ele aldık. Şimdi bunları örnek bir proje akışı içinde birleştirelim. Senaryo şu olsun: Dijital hizmetler sunan bir marka için kurumsal site, blog, teklif formu ve gelecekte genişleyebilir çözüm sayfaları içeren bir proje hazırlanıyor.
İlk aşamada requirements belirlenir. Marka; hizmetlerini anlatmak, blog ile organik trafik çekmek, teklif formu ile potansiyel müşteri toplamak ve ileride yeni modüller ekleyebilmek istiyor. Hedef kitle küçük işletmeler, girişimler ve dijital dönüşüm arayan kurumlar olarak tanımlanıyor. Yönetim tarafında ise teknik bilgi gerektirmeden içerik güncelleme beklentisi bulunuyor.
İkinci aşamada sitemap kuruluyor. Ana sayfa, hizmetler, çözümler, blog, hakkında, iletişim ve teklif al gibi temel düğümler oluşturuluyor. Hizmetler ve çözümler kendi alt detay sayfalarına sahip olacak şekilde planlanıyor. Böylece hem menü yapısı hem içerik kümeleri netleşiyor.
Üçüncü aşamada URL architecture ve route sistemi tanımlanıyor. Statik sayfalar sabit route’larla ilerliyor, hizmet ve blog gibi alanlar ise dinamik slug yapısına bağlanıyor. Bu karar sayesinde editör yeni içerik eklediğinde sistem otomatik olarak ilgili detay sayfasını üretebiliyor. Ayrıca temiz URL’ler sayesinde SEO açısından da güçlü bir temel kuruluyor.
Dördüncü aşamada layout ve page tipleri ayrıştırılıyor. Ana sayfa vitrin mantığında bir marketing layout kullanırken, blog detayları content layout altında kurgulanıyor. Hizmet detay sayfaları ise ortak bir page template ile oluşturuluyor. Bu yaklaşım tasarım tutarlılığını korurken farklı sayfa amaçlarına da uygun yapı sunuyor.
Beşinci aşamada reusable component sistemi hazırlanıyor. Hero, CTA, hizmet kartı, blog kartı, form alanları, referans bloğu ve SSS bileşenleri ortaklaştırılıyor. Böylece hem ana sayfada hem alt sayfalarda aynı kalite ve hız korunuyor. Geliştirici ekip yeni sayfalar üretirken sıfırdan başlamak zorunda kalmıyor.
Altıncı aşamada içerik modeli tanımlanıyor. Blog yazısı, hizmet, çözüm, sık sorulan soru ve form kayıtları için ayrı veri yapıları kuruluyor. Yönetim paneli de bu modellere göre düzenleniyor. Sonuç olarak marka, teknik destek beklemeden içerik güncelleyebilen, geliştirici ekip ise yeni özellikleri düzenli bir altyapı üzerinde inşa edebilen bir sisteme kavuşuyor.
Bu bütünsel yaklaşım, projeyi sadece çalışan bir siteye değil, yönetilebilir bir dijital varlığa dönüştürür. Özellikle başlangıçta hazır ve pratik bir çözüm arayan, ancak zamanla daha gelişmiş bir yapıya geçmek isteyen işletmeler için bu teknik planlama modeli son derece değerlidir. Çünkü doğru omurga kurulursa büyüme, sistemi bozmak yerine güçlendirir.
Web projelerinde teknik sorunların önemli bir kısmı aslında kod hatasından değil, plansızlıktan doğar. Ekipler requirements olmadan tasarıma başladığında, sitemap çıkarılmadan menü üretildiğinde veya içerik modeli tanımlanmadan yönetim paneli kurulduğunda proje ilerledikçe karmaşa büyür. Sonuçta yeniden geliştirme ihtiyacı oluşur.
En sık görülen hatalardan biri, her yeni ihtiyacı bağımsız bir sayfa olarak ele almaktır. Bu yaklaşım kısa vadede hızlı görünür, ancak uzun vadede URL yapısını bozar, içerik yönetimini zorlaştırır ve tekrar eden kod miktarını artırır. Bunun yerine sayfa tipleri, içerik tipleri ve ortak bileşenler üzerinden düşünmek gerekir.
Bir diğer yaygın hata da SEO’nun yalnızca içerik yayınlandıktan sonra düşünüleceği sanılmasıdır. Oysa temiz URL yapısı, sayfa hiyerarşisi, breadcrumb mantığı, kategori kurgusu ve içerik modeli en baştan SEO etkisi yaratır. Sonradan düzeltmek mümkündür, ancak çoğu zaman zahmetlidir ve risk taşır.
Aşağıdaki kontrol listesi planlama aşamasında ekipler için faydalı olabilir:
Bu sorulara proje başlamadan cevap vermek, geliştirme sürecini ciddi biçimde iyileştirir. Ayrıca müşteri ile geliştirici arasındaki beklenti farkını da azaltır. Böylece hem teslim süreci daha sağlıklı olur hem de proje büyüdükçe yönetilmesi kolaylaşır.
Başarılı bir web projesi, yalnızca iyi tasarlanmış sayfalardan veya temiz yazılmış kodlardan oluşmaz. Asıl başarı, requirements ile başlayan, sitemap ile şekillenen, route ve URL mimarisiyle netleşen, layout ve page mantığıyla düzenlenen, reusable component yaklaşımıyla güçlenen ve içerik modeliyle sürdürülebilir hale gelen bir teknik planlamada yatar.
Eğer yeni bir web projesi hazırlıyorsanız, işe doğrudan tasarım veya yazılım ekranlarıyla başlamak yerine önce bu omurgayı kurun. Böylece hem SEO açısından güçlü, hem yönetilebilir, hem de gelecekte büyümeye açık bir sistem oluşturabilirsiniz. Özellikle hazır web sitesiyle hızlı başlamak, sonrasında gelişmiş ihtiyaçlara doğru kontrollü büyümek isteyen yapılar için bu yaklaşım büyük fark yaratır.
Projenizi planlarken ihtiyaç duyarsanız, kurumsal site, içerik yapısı, yönetim paneli ve geliştirilebilir web çözümleri tarafında baştan doğru kurgulanmış bir yapı oluşturmak uzun vadede en değerli yatırımdır. Teknik plan ne kadar sağlamsa, geliştirmenin geri kalanı o kadar verimli ilerler.