Web sitesinde logo genelde sayfanın sol üst köşesine konur, ana sayfaya bağlanır ve mobilde daha küçük bir sürümle gösterilir. Bu yerleşim ziyaretçilerin yıllardır gördüğü bir alışkanlıktır; yerini değiştirmek ancak güçlü bir nedenle mantıklıdır. Logonun boyutu, dosya biçimi ve zemini de aynı derecede önemlidir, çünkü yanlış kurulmuş bir logo sayfanın hem hızını hem güvenini etkiler.
Neden sol üst köşe
İnsanlar bir sayfaya baktığında gözleri genelde sol üstten başlar. Pek çok site aynı yerde logo gösterdiği için ziyaretçi orayı “bu siteyi kim yapmış?” sorusunun cevabı olarak okur. Logoyu ortaya almak mümkündür ve bazı moda ve butik sitelerde işe yarar. Ama menü uzunsa ortalanmış logo menüyü iki parçaya böler ve hizmet sayfalarına ulaşmayı zorlaştırır.
Sağ üst köşe ise sepet ve arama düğmelerinin yeridir. Logoyu oraya koymak ziyaretçiyi şaşırtır.
Logoya tıklayınca ana sayfaya gidilmeli
Bu kural o kadar yerleşik ki çoğu ziyaretçi bilinçsizce dener. Logo bir bağlantı değilse kullanıcı sitede kaybolmuş hisseder. Ana sayfanın kendisinde logoya tıklayınca sayfa yenilenir; bu normaldir. Bağlantının “alt” etiketine marka adı yazılır ki ekran okuyucular ve arama motorları logonun ne olduğunu anlasın.
Boyut: ne çok büyük ne çok küçük
Masaüstünde logonun yüksekliği genelde kırk ile seksen piksel arasında kalır. Bundan büyüğü başlığı şişirir ve içeriği aşağı iter. Bundan küçüğü okunmaz. Mobilde yükseklik otuz kırk piksele iner. Logonun boyutu markanın önemine göre değil, başlık çubuğunun dengesine göre ayarlanır.
Yatay bir logo yatay başlığa iyi oturur. Dikey ya da kare bir logo ise başlığa sıkıştırılırsa küçülür ve okunmaz hale gelir. Bu durumda logonun yatay bir sürümü ayrıca hazırlanır. Kurumsal kimlik teslimlerinde bu yüzden yatay sürümü dikey sürümle birlikte veriyoruz. Kare sürüm de pakette olur.
Mobilde logo
Mobil ekranda başlık çubuğu dar kalır. Menü çoğu zaman “hamburger” simgesine toplanır, logo da solda kalır. Uzun bir logotype telefona sığmıyorsa sembol ya da kısaltılmış bir sürüm kullanılır. Mobil sürümde logoyu yalnızca küçültmek yeterli olmaz; ince çizgiler ve küçük yazılar okunmaz hale gelebilir. Sürümü ayrıca sadeleştirmek gerekir. Sadeleştirme için sadelik ilkesi yazımıza bakabilirsiniz.
Test için gerçek bir telefonda sayfayı açıp başparmak mesafesinden bakmak en dürüst yöntemdir. Tarayıcıdaki mobil simülasyon ekran boyutunu gösterir ama gözün gerçek algısını göstermez.
Dosya formatı: SVG ve PNG
Web için en iyi format SVG’dir. Vektör olduğu için her boyutta keskin görünür, dosya boyutu küçüktür ve yüksek çözünürlüklü ekranlarda bulanıklaşmaz. SVG kullanılamıyorsa PNG hazırlanır; bu durumda iki katı çözünürlükte bir sürüm (retina) de eklenir. JPG logoda iyi seçim değildir: şeffaf zemini desteklemez ve kenarlarda sıkıştırma izi bırakır.
Dosya boyutu da önemlidir. Logo sayfada ilk görünen öğelerden biridir; ağır bir dosya sayfanın ilk açılışını geciktirir. İyi hazırlanmış bir SVG genelde birkaç kilobayttır.
Açık ve koyu zemin
Başlık çubuğu bazen sayfa kaydırıldıkça renk değiştirir. Üstte şeffaf bir başlık fotoğrafın üstünde durur, kaydırınca beyaz zemine döner. Logonun iki zeminde de okunur olması gerekir. Bunun için iki sürüm hazırlanır: koyu zemin için açık sürüm, açık zemin için koyu sürüm. Bu iki dosya arasında geçiş otomatik yapılabilir ama dosyalar baştan hazırlanmış olmalı. Tek renkli logo yaklaşımı bu noktada iş yükünü azaltır.
Logo yüklenirken sayfa kaymasın
Logo geç yüklenirse sayfa içeriği aşağı kayar ve ziyaretçi tıklayacağı yeri kaçırır. Buna düzen kayması denir ve Google’ın sayfa deneyimi ölçümlerinde de izlenir. Çözüm basit: logo görselinin genişlik ve yükseklik değerlerini HTML’de açıkça yazmak. Tarayıcı yer ayırır, logo gelince hiçbir şey oynamaz. Ayrıca logo sayfanın ilk ekranında göründüğü için tembel yükleme (lazy loading) uygulanmaz; tersine önceliklendirilir. Bu iki ayar yarım saatlik iştir ve ölçüm sonuçlarını belirgin biçimde iyileştirir.
Alt metin ve arama motoru
Logonun alt metni marka adını içermelidir. “Logo” ya da “görsel” yazmak bir şey söylemez. Örneğin “Aniba Digital logosu” gibi markayı tarif eden kısa bir ifade yeterlidir. Arama motorları siteyi anlamak için bu bilgiyi kullanır. Yapısal veride (schema) logo adresini de belirtmek, Google’ın arama sonuçlarında doğru logoyu göstermesine yardımcı olur. SEO çalışmalarında bu ayrıntılar teknik kurulumun parçasıdır.
Favicon ve paylaşım görseli
Logonun sitedeki işi başlıkla bitmez. Tarayıcı sekmesinde görünen favicon, logonun en küçük hâlidir. On altı piksellik bir kareye sığacak bir sürüm çizilir; çoğu zaman bu, logonun sembolü ya da baş harfidir. Sosyal medyada paylaşılan bağlantılarda çıkan görsel de ayrıca hazırlanır. Logo burada ortada ve yeterince boşlukla durur. Bu ikisi eksik bırakılırsa site profesyonel görünse bile ayrıntıda eksik kalır.
Logonun çevresindeki boşluk
Logonun etrafında yeterli nefes alanı bırakılmazsa menü öğeleriyle karışır. Kural basit: logonun yüksekliğinin yarısı kadar boşluk her yönden bırakılır. Boşluk, logonun ne kadar önemli göründüğünü de belirler. Logo kenara yapışırsa özensiz, çok boşlukla çevrelenirse kaybolmuş görünür.
Tasarım ve geliştirme birlikte düşünülmeli
Logo yerleşimi tasarım dosyasında güzel durabilir, kodlandığında farklı davranabilir. Bu yüzden tasarım aşamasında logo gerçek dosyayla ve gerçek ekran boyutlarında denenir. Biz web tasarım projelerinde logoyu başlıkta mobil ve masaüstünde ayrı ayrı test ederek teslim ediyoruz. Web sitesi paketlerinin fiyatları ve teslim süreleri fiyatlar sayfasında yazılı.
Logonuzun sitede nasıl durması gerektiğini konuşmak ya da mevcut sitenizdeki logoyu gözden geçirmek isterseniz iletişim sayfasından bize yazın.