Web Tasarım
Şişli Web Tasarım Hizmeti Nedir ve Neleri Kapsar
Web tasarımı, bir işletmenin internet sitesinin planlanması, görsel arayüzünün hazırlanması ve çalışır hale getirilmesi işidir. Hizmet yalnızca ekranda görünen renk ve yazı tiplerinden ibaret değildir; sayfaların hangi sırayla bağlanacağı, menünün nasıl kurulacağı ve bilginin hangi bölümde yer alacağı da bu işin parçasıdır. Kurumsal site; şirketi, sunduğu hizmetleri, referansları ve iletişim kanallarını tek bir alan adı altında toplayan yapıdır. Tipik bir kurumsal sitede ana sayfa, hakkımızda, hizmet sayfaları, blog ya da duyuru alanı ve iletişim sayfası bulunur. Restoran, klinik, hukuk bürosu, mağaza ve üretim firması gibi işletmelerde sayfa adları değişse de temel iskelet benzerdir. Bu iskelet, projenin ilk aşamasında yazılı bir sayfa listesine dönüştürülür.
Sayfa yapısı, içeriğin başlık, alt başlık, metin bloğu, görsel ve çağrı düğmesi gibi parçalara bölünme biçimidir. Arayüz ise bu parçaların ekrandaki görünümünü belirler: yazı tipi, renk paleti, boşluklar, ikonlar, form alanları ve düğmeler arayüzün öğeleridir. Menü ve iç bağlantılar, ziyaretçinin aradığı bilgiye birkaç tıklamayla ulaşacağı biçimde düzenlenir. Tasarım kararları kurumsal kimlik kılavuzuna dayanır; logo, ana renkler ve yazı karakterleri sitenin tamamında aynı kurallarla kullanılır. Ortak öğeler bir bileşen kütüphanesinde toplanır. Böylece yeni bir sayfa eklendiğinde mevcut düğme, kart ve form şablonları yeniden kullanılır, görsel bütünlük korunur ve tasarım süresi kısalır. Renk kodları, yazı boyutları ve boşluk ölçüleri bir stil rehberinde sabitlenir.
Mobil uyum, sitenin telefon, tablet ve masaüstü ekranlarda okunabilir ve kullanılabilir olmasıdır. Ziyaretlerin büyük kısmı telefondan geldiği için tasarım çoğunlukla önce küçük ekran için hazırlanır, ardından geniş ekranlara uyarlanır. Bu yaklaşım mobil öncelikli tasarım olarak adlandırılır. Dokunmatik ekranda düğmelerin parmakla rahat seçilebilmesi için hedef alanları en az 44 piksel tutulur, metin satırları yatay kaydırma gerektirmez. Gövde metninde yazı boyutu 16 pikselin altına düşürülmez, görseller ekran genişliğine göre ölçeklenir. Google da sıralama değerlendirmesinde sayfanın mobil sürümünü esas alır. Şişli web tasarım projelerinde kapsam; kurumsal sitenin sayfa listesi, arayüz tasarımı, mobil uyum, kodlama, içerik yerleşimi ve yayın sonrası teknik destek olarak tanımlanır.
Kurumsal Site Projesi Hangi Adımlardan Oluşur
Web tasarım süreci ihtiyaç analiziyle başlar. Bu aşamada işletmenin hizmetleri, hedef kitlesi, rakip siteler, mevcut içerikler ve sitenin ulaşması beklenen hedefler bir form ya da toplantı ile belirlenir. Hedef; telefon araması, teklif formu, randevu talebi veya ürün satışı olabilir. Analiz sonunda sayfa listesi, gerekli modüller ve teknik kısıtlar yazılı hale getirilir. İkinci adım site haritasıdır. Site haritası, tüm sayfaların hiyerarşik bir ağaç şeklinde gösterildiği plandır; hangi sayfanın ana menüde, hangisinin alt menüde ya da alt bilgide yer alacağı burada kararlaştırılır. URL yapısı da bu aşamada belirlenir; adresler kısa, Türkçe karakter içermeyen ve sayfanın konusunu anlatan kelimelerden oluşturulur.
Üçüncü adım tel kafes (wireframe) çizimidir. Tel kafes, renk ve görsel kullanılmadan yalnızca kutular ve metin alanlarıyla hazırlanan sayfa taslağıdır; amaç bölümlerin yerini ve sırasını onaylatmaktır. Onaylanan taslaklar arayüz tasarımına aktarılır. Bu aşamada Figma gibi bir araçta masaüstü ve mobil ekranlar için ayrı görünümler hazırlanır; renk, tipografi ve görseller yerleştirilir. Tasarım onayından sonra kodlama başlar. Ön yüz HTML, CSS ve JavaScript ile yazılır; içerik yönetim sistemi kurulur ve tasarım bu sisteme tema olarak işlenir. İletişim formu, harita, galeri ve çok dil desteği gibi işlevler de kodlama sırasında eklenir. Her işlev ayrı ayrı denenerek bir sonraki adıma geçilir.
Kodlama tamamlanınca içerik girişi yapılır. Metinler, görseller, belgeler ve iletişim bilgileri panele yüklenir; her sayfa için başlık etiketi ve açıklama yazılır. Ardından test aşaması gelir. Testlerde farklı tarayıcılarda (Chrome, Safari, Firefox, Edge) ve farklı ekran genişliklerinde görünüm kontrol edilir, formların e-posta gönderip göndermediği denenir, kırık bağlantılar taranır ve sayfa hızı ölçülür. Bulunan hatalar düzeltildikten sonra site, alan adına bağlanarak yayına alınır. Yayın günü SSL sertifikasının etkin olduğu, eski adreslerin yönlendirildiği ve arama motorlarının siteyi taramasını engelleyen ayarların kaldırıldığı kontrol edilir. Site, Google Search Console hesabına eklenerek izlenmeye başlanır. Yayın öncesinde tam bir yedek alınır, test ortamı arama motorlarına kapalı tutulur.
Altyapı, Hız ve Güvenlik İçin Gereken Teknik Bileşenler
İçerik yönetim sistemi (CMS), kod bilgisi olmadan sayfa, yazı ve görsel eklemeyi sağlayan yazılımdır. WordPress en yaygın kullanılan açık kaynaklı sistemdir; daha özel ihtiyaçlarda Laravel gibi bir çatı üzerinde yazılan panel ya da başsız (headless) CMS çözümleri tercih edilir. Seçim; içerik sıklığına, kullanıcı rolü ihtiyacına ve entegrasyonlara göre yapılır. Duyarlı (responsive) yapı ise tek bir kod tabanının ekran genişliğine göre yerleşimini değiştirmesidir. Bu davranış CSS medya sorguları, esnek ızgara (grid ve flexbox) ve oransal görsel boyutlarıyla elde edilir. Ayrı bir mobil site kurulmaz; aynı adres her cihazda aynı içeriği sunar, yalnızca dizilim değişir. Bu yöntem bakım yükünü azaltır ve sürümler arasında içerik farkı oluşmasını önler.
Sayfa hızı için ilk iş görsel optimizasyonudur. Fotoğraflar WebP biçimine dönüştürülür; WebP aynı görüntü kalitesinde JPEG dosyasına göre genellikle yüzde 25 ile 35 arasında daha küçük boyut üretir. Görseller gösterileceği ölçüde kaydedilir, ekran dışındaki görseller gecikmeli yüklenir (lazy loading). Önbellek, sık istenen sayfaların hazır kopyasının saklanmasıdır; sunucu her ziyarette sayfayı yeniden üretmez. CDN (içerik dağıtım ağı) ise statik dosyaları ziyaretçiye coğrafi olarak yakın sunuculardan iletir. Ölçüt olarak Core Web Vitals kullanılır: LCP (en büyük içerik öğesinin ekrana gelme süresi) 2,5 saniyenin, INP (tıklama ya da dokunmaya verilen yanıt süresi) 200 milisaniyenin, CLS (yükleme sırasındaki beklenmeyen kayma miktarı) 0,1 değerinin altında tutulur.
Güvenlik tarafında ilk şart SSL sertifikasıdır. SSL, tarayıcı ile sunucu arasındaki veriyi şifreler ve adresin HTTPS ile açılmasını sağlar; form içeren her sitede zorunludur, tarayıcılar sertifikasız sayfaları güvenli değil olarak işaretler. İkinci şart düzenli güncellemedir. CMS çekirdeği, eklentiler ve tema yeni sürüm yayımlandığında güncellenir; saldırıların büyük bölümü bilinen açıkları bulunan eski sürümleri hedef alır. Yönetici hesaplarında güçlü parola ve iki adımlı doğrulama kullanılır, giriş denemeleri sınırlandırılır. Üçüncü şart yedeklemedir. Dosyalar ve veritabanı otomatik olarak yedeklenir, yedekler sitenin bulunduğu sunucudan farklı bir konumda saklanır. Geri yükleme işlemi yayından önce en az bir kez denenir. Sunucu tarafında güvenlik duvarı (WAF) zararlı istekleri filtreler.
Arama Motoru Uyumu ve Erişilebilirlik Nasıl Sağlanır
Arama motoru uyumu, web tasarımı aşamasında kodla birlikte kurulur. Başlık hiyerarşisinde her sayfada tek bir H1 bulunur; H2 ve alt başlıklar içeriği mantıksal sırayla böler, seviye atlanmaz. Bu düzen hem arama motorlarının hem ekran okuyucuların sayfa yapısını anlamasını kolaylaştırır. Meta etiketlerden title, arama sonucunda görünen başlıktır ve yaklaşık 50-60 karakterle sınırlı tutulur. Meta description, sonuç sayfasındaki kısa açıklamadır; 150-160 karakter civarında yazılır. Her sayfanın title ve description metni benzersiz olur. Sosyal medya paylaşımları için Open Graph etiketleri, kopya içerik sorununu önlemek için canonical etiketi eklenir. Görsellere konuyu anlatan dosya adları verilir. Robots.txt dosyası, yönetim paneli gibi taranması gereksiz dizinleri kapatacak şekilde düzenlenir.
Şema işaretlemesi (schema markup), sayfadaki bilgiyi arama motorlarının okuyabileceği yapılandırılmış veriye çeviren koddur. JSON-LD biçiminde yazılır; kurumsal sitelerde Organization, LocalBusiness, BreadcrumbList ve FAQPage türleri sık kullanılır. Bu veri adres, telefon, çalışma saatleri ve sık sorulan sorular gibi bilgilerin sonuç sayfasında zengin görünümle çıkmasına yardımcı olur. XML site haritası, sitedeki dizine eklenmesi istenen adreslerin listesidir; otomatik üretilir ve Search Console’a gönderilir. 301 yönlendirme ise kalıcı taşınmayı bildiren yanıt kodudur. Eski bir site yenilendiğinde değişen her adres yeni karşılığına 301 ile bağlanır; böylece mevcut sıralama değeri ve dış bağlantılar kaybolmaz, ziyaretçi 404 hatası görmez. İşaretleme kodu yayından önce Google’ın test aracıyla denetlenir.
Erişilebilirlik, sitenin görme, işitme ya da hareket kısıtı olan kişiler tarafından da kullanılabilmesidir. Referans standart WCAG 2.2’dir. AA seviyesinde normal metin ile arka plan arasındaki kontrast oranı en az 4.5:1, büyük metinde (18 punto ya da 14 punto kalın) en az 3:1 olmalıdır. Bilgi veren her görsele alternatif metin (alt) yazılır; ekran okuyucu bu metni sesli okur, görsel yüklenmediğinde de metin görünür. Süsleme amaçlı görsellerde alt değeri boş bırakılır. Klavye ile gezinmede tüm bağlantı, düğme ve form alanlarına Tab tuşuyla sırayla ulaşılabilmeli, odaklanılan öğe görünür bir çerçeveyle belli olmalıdır. Form alanları etiketlerle eşleştirilir, hata mesajları metin olarak da verilir.
Teslim Edilenler, Maliyet Etkenleri ve Bakım Süreci
Proje tamamlandığında işletmeye yönetim paneli erişimi verilir. Panelde sayfa düzenleme, blog yazısı ekleme, görsel yükleme ve form mesajlarını görüntüleme yetkileri bulunur. Teslimle birlikte kullanım eğitimi yapılır; eğitimde içerik ekleme, görsel boyutlandırma, menü düzenleme ve temel SEO alanlarının doldurulması uygulamalı olarak gösterilir, adımlar yazılı bir kılavuzla da paylaşılır. Alan adı, barındırma (hosting), Google Search Console, Google Analytics ve Google İşletme Profili hesapları işletme adına açılır ya da işletmenin sahipliğine aktarılır. Ajansa yalnızca yetkili kullanıcı erişimi tanımlanır. Bu düzen sayesinde hizmet sağlayıcı değiştiğinde site, alan adı ve ölçüm verileri işletmede kalır. Teslim dosyasında tüm erişim bilgileri listelenir. Kurulu eklentilerin ve lisansların listesi de bu belgede yer alır.
Şişli web tasarım fiyatları sabit bir tarifeyle değil, projenin kapsamına göre hesaplanır. Fiyatı belirleyen ilk etken sayfa sayısıdır; her ek sayfa tasarım, kodlama ve içerik yerleşimi süresi ekler. İkinci etken dil sayısıdır. Çok dilli sitelerde her dil için çeviri, ayrı URL yapısı ve hreflang etiketleri gerekir. Üçüncü etken özel modüllerdir: online randevu, ürün kataloğu, ödeme altyapısı, üye girişi ya da CRM ve muhasebe entegrasyonu ek geliştirme süresi doğurur. Dördüncü etken içerik üretimidir. Metin yazarlığı, profesyonel fotoğraf çekimi ve video hazırlığı işletme tarafından sağlanmıyorsa teklife ayrı kalem olarak eklenir. Tasarımın hazır tema üzerine mi kurulacağı yoksa sıfırdan mı çizileceği de süreyi ve bütçeyi değiştirir. Kesin teklif ihtiyaç analizi sonrasında hazırlanır.
Yayından sonraki bakım, sitenin güvenli ve hızlı kalmasını sağlayan düzenli işlerden oluşur. Aylık bakımda CMS, tema ve eklenti güncellemeleri önce test ortamında denenir, sorun çıkmazsa canlı siteye uygulanır. Yedeklerin alınıp alınmadığı ve geri yüklenebilir durumda olduğu kontrol edilir. Hız takibinde Core Web Vitals değerleri Search Console raporundan izlenir; eşik aşıldığında nedeni araştırılır. Güvenlik takibinde kötü amaçlı yazılım taraması yapılır, SSL sertifikasının yenilenme tarihi ve sunucu hata kayıtları gözden geçirilir. Kırık bağlantılar ve çalışmayan formlar raporlanır. Kurulu eklentiler dönemsel olarak gözden geçirilir, kullanılmayanlar kaldırılır. Bakım kapsamı ve müdahale süreleri yazılı bir hizmet sözleşmesiyle belirlenir; yapılan işler her ay kısa bir raporla işletmeye iletilir.