Web Tasarım
Kadıköy Web Tasarım Kapsamında Hangi İşler Yapılır
Web tasarım hizmeti, bir kurumun çevrim içi tanıtım alanını oluşturan sayfaların kurgulanmasını, görselleştirilmesini ve kodlanmasını içerir. Çıktı, tarayıcıda açılan ve içeriği bir panelden yönetilebilen çalışır durumda bir sitedir. Kurumsal site terimi; firmayı tanıtan, faaliyet alanlarını açıklayan ve ziyaretçiyi iletişime yönlendiren tanıtım sitesini ifade eder. E-ticaret sitesinden farkı, satış sepeti yerine bilgi verme ve talep toplama üzerine kurulmasıdır. Bu tür sitelerde yaygın bölümler şunlardır: giriş sayfası, kurum bilgisi, hizmet ya da ürün grupları, proje veya referans galerisi, haber alanı, soru-cevap bölümü ve iletişim. Muayenehane, atölye, danışmanlık şirketi ya da kafe gibi işletmelerde bölüm adları farklılaşır, mantık aynı kalır. Tek sayfalık tanıtım sitelerinde bu bölümler aynı sayfada art arda sıralanır.
Sayfa yapısı (layout), her sayfadaki bölümlerin dikey sırasını ve ızgara düzenini tarif eder. Örneğin bir hizmet sayfası genellikle üst başlık alanı, kısa tanım, alt hizmet listesi, süreç adımları, soru-cevaplar ve teklif formu şeklinde dizilir. Arayüz (UI) bu düzenin görsel katmanıdır; tipografi ölçeği, renk değişkenleri, kenar boşlukları, düğme durumları ve ikon seti burada tanımlanır. Kullanıcı deneyimi (UX) ise menünün sadeliği, formdaki alan sayısı ve sayfa içi bağlantılar gibi kullanımı etkileyen kararları içerir. Tutarlılık için bir tasarım sistemi kurulur: başlık boyutları, renk kodları ve bileşenler tek bir belgede tanımlanır, tüm sayfalar bu belgeye göre üretilir. Bileşenler arasında üst menü, kart, sekme, akordeon ve alt bilgi şablonları bulunur.
Mobil uyum, aynı sayfanın 360 piksel genişliğindeki bir telefondan 1920 piksellik bir masaüstü monitöre kadar bozulmadan görüntülenmesi anlamına gelir. Küçük ekranda menü açılır bir panele dönüşür, çok sütunlu bölümler alt alta dizilir, tablolar yatayda kaydırılabilir kutulara alınır. Dokunma hedefleri arasında yeterli boşluk bırakılır ve telefon numaraları tıklanınca arama başlatacak şekilde bağlanır. Google, dizine eklemede mobil sürümü temel aldığı için telefondaki görünümde eksik içerik bulunmamalıdır. Sabit genişlikli öğeler kullanılmaz; görünüm gerçek cihazlarda ve tarayıcının cihaz öykünücüsünde denetlenir. Kadıköy web tasarım çalışmalarının kapsamı; planlama, arayüz çizimi, duyarlı kodlama, içeriklerin panele işlenmesi, canlıya alma ve yayın sonrası destek adımlarından oluşur.
Site Altyapısında Kullanılan Teknolojiler ve Performans Ölçütleri
Altyapının merkezinde içerik yönetim sistemi bulunur. CMS (Content Management System), site sahibinin yazılım bilgisine ihtiyaç duymadan metin, görsel ve sayfa yönetmesine izin veren bir arka uç uygulamasıdır. Kurumsal projelerde çoğunlukla WordPress kullanılır; geniş eklenti ekosistemi ve yaygın destek bu tercihin nedenidir. Özel iş akışları gereken durumlarda PHP ya da Node.js ile yazılmış özel paneller kurulur. Panel arayüzü Türkçe olarak ayarlanır. Responsive, yani duyarlı tasarım, yerleşimin ekran genişliğine göre otomatik değişmesidir. Tasarımda kırılma noktaları (breakpoint) belirlenir; örneğin 768 ve 1024 piksel. Her kırılma noktasında sütun sayısı, yazı boyutu ve görsel ölçüsü yeniden düzenlenir. Görseller srcset özelliğiyle birden fazla boyutta sunulur, tarayıcı cihaza uygun olanı seçer.
Hız çalışması dört başlıkta yürütülür. Birincisi görsellerdir: JPEG ve PNG dosyaları WebP’ye çevrilir, gerekiyorsa AVIF kullanılır, boyutlar görüntülenecek alana göre kırpılır. İkincisi önbellektir; sayfa önbelleği hazır HTML çıktısını, tarayıcı önbelleği ise CSS, JavaScript ve görsel dosyalarını tekrar indirilmeyecek şekilde saklar. Üçüncüsü CDN’dir. İçerik dağıtım ağı, dosyaların kopyalarını farklı veri merkezlerinde tutar ve isteği en yakın noktadan yanıtlar. Dördüncüsü kod düzenidir: kullanılmayan CSS kaldırılır, betikler ertelenir, yazı tipleri ön yüklenir. Sonuç Core Web Vitals ile doğrulanır. LCP (Largest Contentful Paint, ana içeriğin görünme anı) en fazla 2,5 saniye, INP (Interaction to Next Paint, etkileşime tepki gecikmesi) en fazla 200 ms, CLS (Cumulative Layout Shift, öğelerin yerinden oynaması) en fazla 0,1 olmalıdır.
Güvenlik üç katmanda ele alınır. İlk katman şifreli bağlantıdır: SSL/TLS sertifikası kurulur, tüm HTTP istekleri HTTPS’e yönlendirilir ve HSTS başlığıyla tarayıcının yalnızca güvenli bağlantı kullanması sağlanır. Let’s Encrypt gibi ücretsiz sertifikalar otomatik yenilenir. İkinci katman yazılımın güncel tutulmasıdır; çekirdek, eklenti ve tema sürümleri takip edilir, desteği bitmiş eklentiler kaldırılır, PHP sürümü güncel bir dalda tutulur. Panel girişine iki faktörlü doğrulama ve hatalı deneme sınırı eklenir. Üçüncü katman yedeklemedir. Veritabanı ve dosyalar zamanlanmış görevlerle kopyalanır, kopyalar uzak bir depolama alanına gönderilir. Böylece sunucu arızası ya da zararlı yazılım bulaşması durumunda site son sağlam haline döndürülebilir. Dosya yükleme alanlarında yalnızca izin verilen uzantılar kabul edilir.
Arama Görünürlüğü ve Erişilebilirlik İçin Temel Kurallar
Arama motorları sayfayı HTML kodu üzerinden okur; bu yüzden teknik SEO temeli web tasarımı sırasında atılır. Başlık etiketleri bir içindekiler tablosu gibi kurgulanır: sayfanın ana konusu H1’de bir kez yazılır, bölümler H2, bölüm içi kırılımlar H3 ve sonrası ile verilir. Görsel büyüklük için başlık etiketi kullanılmaz, stil CSS ile verilir. Title etiketi tarayıcı sekmesinde ve arama sonucunda görünen başlıktır; sayfanın konusunu ilk kelimelerde söyler, kesilmemesi için 60 karakteri geçmez. Meta açıklama, sonuç sayfasında başlığın altında çıkan özettir; tıklama kararını etkiler ve yaklaşık 155 karakterle yazılır. Teşekkür ve site içi arama sayfalarında robots etiketi noindex olarak ayarlanır. Her sayfa, kendini işaret eden bir canonical bağlantı taşır.
Yapılandırılmış veri, sayfadaki işletme bilgisini makinenin anlayacağı biçimde etiketler. Schema.org sözlüğü kullanılır ve kod JSON-LD olarak sayfanın başına eklenir. Yerel işletmeler için LocalBusiness türünde adres, koordinat, telefon ve açılış saatleri; hizmet sayfalarında Service, soru-cevap bölümlerinde FAQPage türü işaretlenir. Kod, Google’ın Zengin Sonuçlar Testi ile doğrulanır. XML site haritası (sitemap.xml) yayımlanmış sayfaların adreslerini ve son değişiklik tarihlerini içeren dosyadır; içerik eklendikçe kendiliğinden güncellenir ve robots.txt dosyasında belirtilir. Haritaya yalnızca 200 yanıt kodu veren, yönlendirme ya da hata içermeyen sayfalar alınır. Adres değişikliklerinde 301 kodu kullanılır. Bu kod, tarayıcıya ve arama motoruna sayfanın kalıcı olarak taşındığını bildirir; eski adresin bağlantı gücü yeni adrese geçer.
Erişilebilirlik kuralları W3C’nin yayımladığı WCAG yönergelerine dayanır ve hedef genellikle AA uygunluk seviyesidir. Renk kontrastında ölçü, ön plan ile arka plan arasındaki parlaklık oranıdır: gövde metni için 4,5’e 1, 24 piksel ve üzeri başlıklar ile arayüz bileşenleri için 3’e 1 alt sınırdır. Oran, tasarım aşamasında kontrast ölçüm araçlarıyla denetlenir. Görsellerin alt özniteliğine görselin ilettiği bilgi kısa bir cümleyle yazılır; logo için firma adı, grafik için grafiğin ana sonucu girilir. Klavye erişiminde Tab ve Shift+Tab ile ileri geri hareket edilebilmeli, Enter ile bağlantı açılabilmelidir. Açılır menüler ve pencereler Esc tuşuyla kapanır, sayfa başına içeriğe atla bağlantısı konur. Video içeriklerine altyazı eklenir, sayfanın dili html etiketinde lang özniteliğiyle tanımlanır.
Proje Süreci Nasıl İşler ve Teslimde Neler Verilir
Web tasarım projesi sekiz aşamada ilerler. İhtiyaç analizinde işletmeden hizmet listesi, hedef kitle tanımı, beğenilen ve beğenilmeyen site örnekleri, kurumsal kimlik dosyaları ve ölçülecek dönüşümler alınır. Bu bilgiler bir kapsam belgesine yazılır ve iki tarafça onaylanır; her aşama da onayla kapanır. Ardından site haritası çıkarılır; sayfalar ana ve alt kategoriler halinde bir şemaya yerleştirilir, menü derinliği iki seviyeyle sınırlandırılır. Üçüncü aşama tel kafes (wireframe) çizimidir: gri kutularla hazırlanan bu iskelet çizimler, bölümlerin sırasını ve içerik miktarını gösterir. Dördüncü aşamada arayüz tasarımı yapılır; tel kafesler renk, tipografi, fotoğraf ve ikonlarla tamamlanır, telefon ve geniş ekran görünümleri ayrı sunulur, geri bildirime göre revize edilir.
Beşinci aşama kodlamadır. Onaylı ekranlar CMS temasına dönüştürülür, şablonlar yeniden kullanılabilir bloklar halinde yazılır, formlar ve entegrasyonlar bağlanır. Altıncı aşama içerik girişidir; metinler başlık hiyerarşisine uygun yerleştirilir, görseller sıkıştırılıp alternatif metinleriyle yüklenir, her sayfanın title ve açıklama alanı doldurulur. Yedinci aşama testtir. Test sonuçları bir hata listesine işlenir, her madde kapatılmadan yayına geçilmez. Kontrol listesinde tarayıcı uyumu, telefon ve tablet görünümü, form gönderimi, bağlantı geçerliliği, hız puanları, erişilebilirlik taraması ve yönlendirme kuralları bulunur. Son aşama yayındır: DNS kayıtları yeni sunucuya yönlendirilir, SSL etkinleştirilir, site haritası Search Console’a bildirilir. İlk günlerde sunucu günlükleri ve tarama raporları izlenerek gözden kaçan hatalar giderilir.
Teslim paketinde üç ana unsur bulunur. Birincisi yönetim panelidir; işletmeye yönetici yetkisine sahip bir kullanıcı hesabı verilir, gerekirse içerik editörü gibi sınırlı yetkili ek hesaplar tanımlanır. İkincisi kullanım eğitimidir. Eğitim çevrim içi ya da yüz yüze yapılır ve kayıt altına alınır; sayfa düzenleme, yeni içerik yayımlama, form kayıtlarını görme ve yedekten dönme gibi işlemler gösterilir. Üçüncüsü hesap sahipliğidir: alan adı, sunucu, analiz aracı, Search Console ve işletme profili kayıtları doğrudan firmanın adına ve kurumsal e-postasına açılır. Ajans bu hesaplara davet edilen kullanıcı olarak erişir. Kaynak kodu, tasarım dosyaları ve lisans bilgileri de teslim belgesine eklenir. Belgede her hesabın giriş adresi ve yetki düzeyi ayrıca belirtilir.
Bütçeyi Belirleyen Etkenler ve Yayın Sonrası Bakım İşleri
Kadıköy web tasarım fiyatları proje kapsamına bağlı olarak hesaplanır ve teklif kalem kalem hazırlanır. Kapsamı genişleten başlıca etken sayfa adedidir; ana sayfa ve iç sayfa şablonlarının sayısı tasarım süresini, toplam sayfa sayısı ise içerik yerleşim süresini belirler. Dil seçenekleri ikinci etkendir: eklenen her dil çeviri, ayrı menü yapısı ve dil etiketleri anlamına gelir. Üçüncü etken standart dışı işlevlerdir. Rezervasyon sistemi, teklif hesaplayıcı, bayi girişi, ödeme sayfası ya da ERP bağlantısı gibi modüller ayrı geliştirme gerektirir. Son etken içerik hazırlığıdır; metinlerin yazılması, fotoğraf çekimi, çizim ve video gibi üretim işleri işletmeden gelmiyorsa bütçeye eklenir. Net bütçe, analiz tamamlandıktan sonra yazılı teklif olarak iletilir.
Bakım, yayından sonra sitenin teknik sağlığını koruyan periyodik işlerin tümüdür. Sıklık, içerik yoğunluğuna göre aylık ya da üç aylık olarak belirlenir. Güncelleme tarafında yeni sürümler bir kopya ortamda (staging) denenir; uyumsuzluk görülmezse canlı siteye aktarılır, aksi halde eski sürümde kalınıp düzeltme beklenir. Her güncelleme öncesinde anlık yedek alınır. Yedek kontrolü yalnızca dosyanın varlığına bakmakla bitmez; belirli aralıklarla bir yedek test sunucusuna açılır ve sitenin eksiksiz çalıştığı doğrulanır. Yedeklerin boyutu ve tarihi bir kayıt tablosunda tutulur. Alan adı ve sertifika bitiş tarihleri takvime işlenir, süresi dolmadan yenileme yapılır. Sunucu disk kullanımı ve PHP hata günlükleri de bu kontrollerin parçasıdır.
Hız takibi için PageSpeed Insights sonuçları ve Search Console’daki deneyim raporları her ay incelenir. Yeni eklenen büyük görseller, ağır eklentiler ya da üçüncü taraf betikler değerleri düşürebilir; sapma görüldüğünde kaynak belirlenip giderilir. Güvenlik takibinde dosya bütünlüğü taraması, şüpheli giriş denemelerinin kaydı ve sunucu çalışma süresi (uptime) izlemesi yapılır. Site erişilemez olduğunda otomatik uyarı gönderilir. Spam form gönderimlerine karşı reCAPTCHA ya da benzeri doğrulama araçları kullanılır. Dönem sonunda yapılan güncellemeler, yedek durumu, hız ölçümleri ve tespit edilen sorunlar tek bir raporda işletmeyle paylaşılır. Bakım kapsamı, yanıt süreleri ve kapsam dışı işler hizmet sözleşmesinde tanımlanır; kırık bağlantı taraması her dönem tekrarlanır.