Web Tasarım

İşinizi tanımakla başlayan web tasarım süreci

Web tasarım çalışması, müşterilerinizin işletmenizle çoğu zaman ilk karşılaştığı ekranı biçimlendirir. Bu yüzden işe renk ya da şablon seçerek değil, işinizi tanıyarak başlıyoruz. Amasya’da turizm, tarım ya da ticaretle uğraşan her işletmenin ziyaretçisinden beklentisi farklıdır. Bir pansiyon için doğrudan rezervasyon, bir toptancı için teklif isteği, bir usta için ise çalan telefon değerlidir. İlk görüşme, sizin için hangisinin öncelikli olduğunu ortaya çıkarır. Görüşmede işinizi ziyaretçinin gözünden görmeye çalışıyoruz. Sitenize kimler, hangi ihtiyaçla gelecek? Sizi aramaları mı, teklif istemeleri mi yoksa dükkânınıza uğramaları mı daha değerli? Telefonda en sık hangi sorular geliyor ve bunlara genellikle nasıl yanıt veriyorsunuz? Bu soruların karşılıkları, sayfaların neyi öne çıkaracağını ve hangi bilginin ilk ekranda yer alacağını belirler. Konuşmanın ardından kısa bir proje özeti hazırlıyoruz. Özette hedef kitle, sitenin ana amacı ve mutlaka yer alması gereken sayfalar yazılı durur. Onayladığınız bu özet, sonraki aşamalarda farklı görüşler çıktığında başvurulan ortak bir pusulaya dönüşür. Bir öneriyi değerlendirirken “Bu, özetteki hedefe hizmet ediyor mu?” diye sormak, tartışmayı kişisel zevklerin dışına taşır. Özet netleştikten sonra sektörünüzdeki diğer sitelere bakıyoruz.

Amacımız onları kopyalamak değil, müşterilerin nelere alıştığını görmektir. Hangi bilgilerin herkes tarafından verildiğini, hangi soruların ise yanıtsız kaldığını not ediyoruz. Bu boşluklar, sizi öne çıkaracak fırsatları gösterir. Beğendiğiniz ya da sizi rahatsız eden site örneklerini paylaşmanız da yönü belirlemeyi kolaylaştırır. Mevcut bir siteniz varsa onu da masaya koyuyoruz. Hangi sayfaların ziyaret aldığına, hangi bölümlerin neredeyse hiç açılmadığına bakıyoruz. Müşterilerinizin telefonda sorduğu ama sitede bulamadığı bilgiler de bu incelemenin önemli bir parçasıdır. Eski sitede işe yarayan bölümleri korumak, düzenli ziyaretçilerinizin alıştığı yolları tümüyle kaybetmemesini sağlar. Eski sitedeki görselleri ve metinleri de gözden geçirip yeniden kullanılabilecek olanları ayırıyoruz. İnceleme bittiğinde elimizde iki liste olur: mutlaka yapılması gerekenler ve ileride eklenebilecekler. Bu ayrım, bütçenizi önce gerçekten iş getirecek bölümlere ayırmanızı kolaylaştırır. Listeyi sizinle birlikte sıralıyor, ilk yayında yer alacak bölümleri netleştiriyoruz. İkinci listedeki fikirler kaybolmaz; site yayına girdikten sonra ihtiyaç doğdukça sırayla ele alınır. Öncelikler belli olunca sitenin haritasını çıkarıyoruz. Site haritası, hangi sayfaların olacağını ve bunların birbirine nasıl bağlanacağını gösteren bir plandır.

Ana sayfa, hizmetler, referanslar ve iletişim gibi bölümlerin her birine tek bir ana görev veriyoruz. Görevi belli olmayan bir sayfa ziyaretçinin kafasını karıştırır ve onu aradığı bilgiden uzaklaştırır. Sayfa sayısını gereğinden fazla artırmak yerine her sayfanın dolu ve güncel kalabilmesini gözetiyoruz. Metinlerin dili de bu aşamada netleşir. Sektörün teknik terimleri yerine müşterilerinizin kullandığı kelimeleri seçiyoruz. Kısa paragraflar, açık ara başlıklar ve somut örnekler, sayfayı telefonda okuyan birinin bile işini kolaylaştırır. Metinleri sizin hazırlamanız gerekiyorsa her sayfada neyin anlatılacağını gösteren kısa bir soru listesi paylaşıyoruz. Böylece boş bir sayfanın karşısında nereden başlayacağınızı düşünmek zorunda kalmazsınız. Renklere geçmeden önce her sayfanın gri kutulardan oluşan bir iskeletini çiziyoruz. Tel kafes denilen bu taslakta yalnızca bölümlerin yeri ve sırası görünür. Bu aşamada bir bölümün yerini değiştirmek kolaydır; renkler ve görseller eklendikten sonra aynı değişiklik çok daha fazla emek ister. Yerleşimi bu sade hâliyle onaylamak, sonradan yapılacak büyük değişiklikleri önler. İskelet üzerinde anlaştığımızda web tasarım planlaması tamamlanır ve sıra, ziyaretçinin ekranda göreceği düzene gelir.

Ziyaretçiyi yormayan düzen ve görsel dil

Düzeni kurarken ilk durağımız menüdür. Menüde ne kadar az seçenek olursa ziyaretçi o kadar hızlı karar verir. Menü başlıklarını yaratıcı adlar yerine herkesin anlayacağı sözcüklerle yazıyoruz. “Hizmetlerimiz” yerine süslü bir ifade seçmek, aranan bağlantının gözden kaçmasına yol açabilir. Alt menüleri de yalnızca içerik gerçekten gerektirdiğinde kullanıyoruz. Telefon numaranız, adresiniz ve çalışma saatleriniz her sayfanın alt bölümünde yer alır. Ziyaretçi hangi sayfada olursa olsun size nasıl ulaşacağını aramak zorunda kalmamalıdır. Bu bilgilerin sitenin her yerinde aynı biçimde yazılması, müşterinin aklında soru işareti bırakmaz. İşletmenizin harita üzerindeki yerinin doğru işaretlendiğini de ayrıca kontrol ediyoruz. Yanlış işaretlenmiş bir konum, kapınıza gelmek isteyen müşteriyi başka bir sokağa gönderebilir. Birbiriyle ilişkili sayfaları metin içindeki bağlantılarla da birleştiriyoruz. Bir hizmeti okuyan kişi, ilgili örnek çalışmaya ya da teklif formuna tek dokunuşla geçebilmelidir. Böylece ziyaretçi menüye dönmeden yolculuğuna devam eder. Her sayfanın sonunda atılacak bir sonraki adımı açıkça göstermek, okumayı bitiren kişinin sayfadan eli boş ayrılmasını önler.

Düzen oturduktan sonra görsel dile geçiyoruz. Logonuz, tabelanız ve basılı malzemeleriniz müşterilerinizin zihninde bir görüntü oluşturmuştur. Sitenin renkleri ve biçimleri bu görüntüyle çelişmemelidir. İyi bir web tasarım anlayışı, işletmenizi dükkânınızda gören biriyle ekranda gören birinin aynı markayı tanımasını sağlar. Tanıdık bir görünüm, ziyaretçinin doğru yerde olduğunu ilk bakışta anlamasına yardım eder. Önce ana sayfanın görsel taslağını hazırlayıp sizinle paylaşıyoruz. Yorumlarınızı tek bir listede biriktiriyor, her düzeltmeyi özetteki hedeflere göre tartıyoruz. Ana sayfanın yönü netleşmeden iç sayfalara geçmemek, emeğin boşa gitmesini önler. Taslağı ekibinizden birkaç kişiye de göstermenizi öneriyoruz. Farklı gözler, tek bir kişinin fark etmediği ayrıntıları kolayca yakalar. Yön belirlendikten sonra düğmeler, kartlar ve form alanları gibi ortak parçaları bir tasarım sistemi olarak tanımlıyoruz. Her sayfa bu parçalarla kurulduğu için site bütünlüğünü korur. İleride eklenecek yeni bir sayfa da aynı düzene kolayca uyar. Aynı işi yapan bir düğmenin her sayfada aynı görünmesi, ziyaretçinin siteyi öğrenmesini de hızlandırır. Yazı tipini seçerken önce Türkçe karakterleri sınıyoruz.

Bazı yazı tiplerinde ğ, ş ve ı harfleri bulunmaz. Bu durumda tarayıcı eksik harfleri başka bir yazı tipinden gösterir ve metin yamalı görünür. Gövde metnini rahat okunacak bir boyutta tutuyor, başlıklarla arasındaki farkı belirgin bırakıyoruz. Satır aralığını da uzun metinlerin gözü yormayacağı biçimde ayarlıyoruz. Renk paletini birkaç tonla sınırlı tutuyoruz. Vurgu rengini yalnızca düğmeler ve önemli bağlantılar için kullanmak, ziyaretçinin gözünü doğru noktaya taşır. Metin ile arka plan arasındaki kontrastı da okunurluk için ayrıca ölçüyoruz. Açık gri zemin üzerindeki beyaz yazı gibi zayıf eşleşmeler, güneş altında ekrana bakan biri için metni neredeyse görünmez kılar. Görsel dilin en güçlü parçası ise gerçek fotoğraflardır. Hazır görsel arşivlerindeki kareler çoğu zaman başka sitelerde de karşınıza çıkar. Amasya’daki dükkânınızın, atölyenizin ya da ekibinizin fotoğrafları ise ziyaretçiye kimle çalışacağını gösterir. Bu kareleri bol boşluklu bir düzende sunmak, her birinin kendi mesajını taşımasına izin verir ve sayfaya samimi bir hava katar.

Telefon ekranında rahat kullanılan sayfalar

Bu düzen ve görsel dil en çok telefon ekranında sınanır; çünkü sitenize gelenlerin önemli bir bölümü onu telefonundan açar. Bu nedenle web tasarım taslaklarını yalnızca geniş ekranda değil, çeşitli telefon ve tablet boyutlarında da deniyoruz. Masaüstünde yan yana duran sütunlar telefonda alt alta dizilir. Bu sıralamada en önemli bilginin en üstte kalmasına dikkat ediyoruz. Düğmeler parmakla rahatça seçilebilecek büyüklükte olmalı ve birbirine çok yakın durmamalıdır. Numaraya dokunan kişinin doğrudan arama yapabilmesi, konum bağlantısının ise haritayı açması küçük ama etkili ayrıntılardır. Menü küçük ekranda tek bir simgenin arkasına toplanır. Telefon düğmesini ise bu simgenin içine gizlemiyor, ekranda her an görünür bırakıyoruz. Fotoğraf çekimi yapacaksanız gün ışığını tercih etmenizi ve arka planı sade tutmanızı öneriyoruz.

Aynı kareyi hem yatay hem dikey çekmek, görselin masaüstünde ve telefonda doğru kadrajla kullanılmasını kolaylaştırır. Geniş bir vitrin fotoğrafı dar ekranda kırpıldığında asıl konunun kadraj dışında kalmamasına özen gösteriyoruz. Gerekirse çekim listesini birlikte hazırlıyoruz. Formlar, telefonda en çok zorlanılan bölümlerdir. Bu yüzden yalnızca gerçekten gereken alanları soruyoruz. Telefon numarası alanında rakam klavyesinin, e-posta alanında ise uygun klavyenin açılmasını sağlıyoruz. Hata mesajlarını da neyin eksik olduğunu açıkça söyleyen sade cümlelerle yazıyoruz. Küçük ekranda uzun bir formu doldurmaya çalışan kişi, en ufak aksaklıkta vazgeçebilir. Telefonda okunan metnin satırları kısa, paragrafları da derli toplu olmalıdır.

Masaüstünde ferah görünen bir paragraf, dar ekranda uzun bir duvara dönüşebilir. Bu yüzden metinleri telefon ekranında da gözden geçiriyor, gerekirse bölüyoruz. Tablo gibi geniş içerikleri ise küçük ekranda da anlaşılır kalacak biçimde yeniden düzenliyoruz. Önemli bir uyarıyı ya da çalışma saatlerini okumak için sayfayı yana kaydırmak gerekmemelidir. Yayından önce siteyi farklı marka telefonlarda ve tarayıcılarda, gerçek cihazlar üzerinde deniyoruz. Ekibinizden de siteyi kendi telefonlarından açıp bir teklif isteği göndermelerini rica ediyoruz. Siteyi günlük alışkanlıklarıyla kullanan kişiler, bizim gözümüzden kaçabilecek küçük pürüzleri çoğu zaman ilk denemede fark eder. Bu denemelerden çıkan notları yayından önce tek tek ele alıyoruz.

Zayıf mobil bağlantıda sayfa hızı

Telefonla gezinen ziyaretçi her zaman güçlü bir bağlantıya sahip değildir. Ağır kaydırmalı vitrinler, kendiliğinden başlayan videolar ve gereğinden fazla eklenti sitenin açılışını yavaşlatır. Bu yüzden web tasarım aşamasında her yeni öğeyi eklemeden önce ziyaretçiye ne kattığını soruyoruz. Dönen bir vitrin yerine tek bir güçlü görsel ve net bir mesaj çoğu zaman daha etkilidir. Fotoğrafları siteye yüklemeden önce boyutlarını küçültüyor ve modern dosya biçimlerine dönüştürüyoruz. Telefona geniş ekran için hazırlanmış büyük bir dosya göndermek yerine ekrana uygun boyutun yüklenmesini sağlıyoruz. Sayfanın alt kısmındaki görseller ise ancak ziyaretçi o bölüme yaklaştığında yüklenir. Her görsele ne gösterdiğini anlatan kısa bir alternatif metin de ekliyoruz; bağlantı görseli taşıyamadığında yerinde bu açıklama görünür. Önbellekleme ve gereksiz kodların temizlenmesi, hızı artıran diğer başlıca yöntemlerdir. Yayından önce sayfaları Google’ın PageSpeed Insights gibi ölçüm araçlarıyla test ediyor, çıkan önerileri tek tek değerlendiriyoruz.

Ölçümü yalnızca ana sayfada değil, en çok ziyaret alacak iç sayfalarda da tekrarlıyoruz. Sonuçlarda özellikle mobil ölçümlere öncelik veriyoruz. Hız, kırsalda yaşayan ya da yolda siteye bakan kullanıcılar için daha da belirleyicidir. Sayfa geç açıldığında ziyaretçi çoğu zaman beklemeden geri döner. Hafif bir site hem müşterinize saygı gösterir hem de arama sonuçlarındaki görünürlüğünüze katkı sağlar. Barındırma hizmeti de açılış hızını doğrudan etkiler. Sunucuyu sitenin büyüklüğüne ve beklenen ziyaretçi sayısına göre seçiyoruz. Alan adının ve sunucu hesabının işletmeniz adına kayıtlı olmasına da özen gösteriyoruz; böylece erişim bilgileri her zaman sizin kontrolünüzde kalır. Yayından sonra hızı korumak, büyük ölçüde siteye eklenen içeriğe bağlıdır. Teslim sırasında yönetim panelini sizinle birlikte kullanarak tanıtıyoruz. Yeni bir duyuru eklerken görseli hangi boyutta yüklemeniz gerektiğini adım adım gösteriyoruz.

Bu adımları anlatan kısa bir kılavuzu da size bırakıyoruz. İçerik yönetim sistemi ve eklentilerin güncel tutulması hem güvenliği hem de performansı korur. Büyük güncellemeleri önce bir deneme kopyasında sınıyoruz; böylece canlı site beklenmedik biçimde bozulmaz. Düzenli yedekler ise olası bir sorunda sitenin sağlam son hâline döndürülebilmesini sağlar. Ölçüm araçlarını da sayfaların açılışını yavaşlatmayacak biçimde yerleştiriyoruz. Bu araçlar hangi sayfaların okunduğunu ve ziyaretçilerin nerede siteden ayrıldığını görünür kılar. Yavaş açılan bir sayfanın ziyaretçi kaybettiği bu verilerde kolayca fark edilir. Böyle bir sayfayı fark ettiğimizde nedenini araştırıp size bir çözüm öneriyoruz. Birkaç yılda bir sitenizi baştan yapmak yerine, web tasarım sürecini küçük ve düzenli iyileştirmelerle sürdürmenizi öneriyoruz. Her değişikliğin etkisini bir süre izleyip sonra karar veriyoruz. Böylece ziyaretçileriniz alıştıkları düzeni kaybetmeden, her gelişinde biraz daha hafif ve kullanışlı bir siteyle karşılaşır.

Web Tasarım Projelerinde Sık Sorulan Sorular

Kullanabilir. Her çalışan için ayrı bir kullanıcı hesabı açıyor ve yetkileri işine göre sınırlıyoruz. Örneğin duyuruları güncelleyen biri, site ayarlarına erişmeden kendi bölümünde çalışabilir. Ortak parola kullanılmadığında kimin hangi değişikliği yaptığı da kolayca izlenir.

Formlarla ad, telefon ya da e-posta gibi bilgiler topluyorsanız, ziyaretçiyi bu bilgilerin nasıl kullanılacağı konusunda bilgilendirmeniz gerekir. Web tasarımı aşamasında aydınlatma metni, çerez bildirimi ve onay kutuları için sayfada yer ayırıyoruz. Metinlerin içeriğini ise bir hukukçuya kontrol ettirmenizi öneriyoruz.

Sitenin üst ya da alt bölümüne hesaplarınıza giden bağlantılar ekliyoruz. İsterseniz son paylaşımlarınızı gösteren bir alan da kurulabilir; bu tür eklentilerin sayfayı yavaşlatmamasına ise ayrıca dikkat ediyoruz. Sitedeki bir sayfa paylaşıldığında doğru görsel ve başlıkla görünmesi için gereken ayarları da yapıyoruz.

Yeni siteyi ziyaretçilere kapalı bir deneme adresinde hazırlıyoruz; bu sırada mevcut siteniz yayında kalır. Onayınızdan sonra geçişi yapıyor, eski sayfa adreslerini yeni karşılıklarına yönlendiriyoruz. Bu sayede müşterilerinizin kayıtlı tuttuğu ya da mesajlarla paylaştığı eski bağlantılar çalışmaya devam eder.

Bu karar işinizin yapısına bağlıdır. Fiyatları sabit ürünlerde açık bir liste ziyaretçinin kararını kolaylaştırır ve tekrar eden telefon sorularını azaltır. Fiyatın işe göre değiştiği hizmetlerde ise fiyatı etkileyen unsurları anlatıp teklif formuna yönlendirmek daha doğru olur. Hangi yolu seçerseniz seçin, bilgilerin güncel tutulması gerekir.

Evet. Özellikle turizm ve dış ticaretle uğraşan işletmeler için ikinci bir dil önemli bir kapı açar. Dil seçeneğini baştan planladığımızda her sayfanın karşılığı düzenli biçimde eşleşir. Çevirilerin makine yerine konuya hâkim bir çevirmen tarafından yapılmasını öneriyoruz.