Responsive logo, tek bir logo dosyası yerine ekran ve alan genişliğine göre değişen üç ya da dört sürümden oluşan bir settir. Geniş masaüstü başlığında yatay logo görünür, telefonda sembol ve kısa isim kalır, tarayıcı sekmesinde ise yalnızca tek bir işaret. Sürümlerin hepsi aynı markaya ait olduğu anlaşılacak kadar birbirine benzer, ama her biri kendi boyutunda okunacak şekilde ayrı çizilir.
Küçültülen logo neden bozulur?
Bir logoyu 40 piksel yüksekliğe indirdiğinizde ilk kaybolan şey ince çizgilerdir. Sonra harf araları kapanır, slogan okunmaz hâle gelir, amblemin içindeki küçük detaylar tek bir leke olur. Bu yüzden “vektör dosya var, istediğim kadar küçültürüm” düşüncesi yarım doğrudur. Vektör keskinliği korur, ama okunabilirliği korumaz.
Sorun yalnızca küçük ekranda da çıkmaz. Dikey bir logo, genişliği sınırlı bir mobil menü çubuğuna sığmaz. Yatay ve uzun bir logo ise Instagram profil fotoğrafındaki yuvarlak çerçevede kesilir. Aynı logo iki farklı yerde iki farklı şekilde başarısız olur.
Bir setin içinde neler olur?
Pratikte dört katman yeterli oluyor.
- Tam logo: sembol, marka adı ve varsa slogan. Kartvizit, antetli kağıt, tabela ve sitenin ana sayfa başlığı için.
- Yatay kompakt logo: sembol ile marka adı, slogan yok. Mobil site başlığı, e-posta imzası, fatura üstü.
- Sembol: yalnızca amblem ya da monogram. Instagram profil fotoğrafı, WhatsApp Business görseli, uygulama ikonu.
- Mikro işaret: tek harf ya da en sadeleştirilmiş şekil. Favicon, yani tarayıcı sekmesindeki 16 ve 32 piksellik kare.
Her katmanda çizgi kalınlığı, harf aralığı ve ayrıntı miktarı yeniden ayarlanır. Mikro işaret çoğu zaman ana logonun küçük kopyası olmaz, sadeleştirilmiş bir kardeşi olur.
Tasarımcıya ne istemelisiniz?
Logo teslim alırken klasörde en az şu dosyalar olmalı: tam logo, kompakt logo, sembol ve favicon; hepsi SVG olarak, ayrıca açık zemin, koyu zemin ve tek renk (siyah ya da beyaz) varyasyonlarıyla. Yalnızca PNG teslim edildiyse set eksiktir. PNG’yi sonradan büyütmek mümkün değil, küçültmek de yukarıda anlattığımız bozulmayı getiriyor.
Teslimden önce şu küçük testi yapın. Logoyu bir ekran görüntüsünde 32 piksel yüksekliğe indirin ve telefonu kolunuzun uzunluğunda tutun. Hangi markanın logosu olduğunu hâlâ anlıyorsanız sürüm işe yarıyor demektir.
Web sitesinde nasıl uygulanır?
Teknik taraf basit. Başlıkta iki ayrı dosya tutulur; CSS ya da HTML içindeki bir kırılma noktasında (örneğin 640 piksel genişlik) yatay logo gizlenir, sembol gösterilir. SVG kullanıldığı için ek yük neredeyse sıfırdır. Favicon ise ayrı bir dosya olarak <link rel="icon"> ile tanımlanır; ana logodan türetilmez, mikro işaretten üretilir.
Bir ayrıntı daha: logo bir bağlantı olduğu için, küçük sürümde de dokunma alanı en az 44 piksel yüksekliğinde kalmalı. Telefonda parmakla tıklanamayan logo, ana sayfaya dönüş yolunu kapatır.
Web sitesi yenilerken logoyu da bu açıdan gözden geçirmek gerekiyor. Elinizdeki dosyalar yetersizse web tasarım sürecinde logoyu da set hâline getirebiliriz. Logo ve kurumsal kimlik çalışmasının ücret kalemi fiyatlar sayfasında ayrı listeleniyor.
Hangi markalar için daha da önemli?
İsmi uzun olan markalarda. “Mahalle Kebap Salonu ve Pide Evi” gibi bir isim, tam logoda şık durur ama mobil başlıkta üç satıra bölünür. Burada kompakt sürüm, ismi kısaltıp “Mahalle Pide” yazabilir; yasal ünvan ise yalnızca tam sürümde kalır.
Hem fiziksel hem dijital kanalı olan işletmelerde de set şart. Tabelada büyük ve ayrıntılı çalışan logo, siparişi paket üzerindeki 2 santimlik damgada çalışmayabilir. Restoran ve kafe tarafında bu sorunun somut örneklerini restoran ve kafe logo tasarımı yazımızda ele aldık.
Baskıda ve sosyal medyada ne değişir?
Responsive mantık yalnızca web için geçerli değil. Kartvizitte tam logo kullanılırken, kaşe ya da kargo bandında kompakt ya da tek renkli sürüm gerekir. Sosyal medyada profil fotoğrafı daire içine kırpıldığı için sembolün kenarlara yakın durmaması lazım; çevresinde nefes payı bırakılmazsa yuvarlak çerçeve logonun kenarını yer. Hikâye ve Reels kapaklarında ise logo çoğu zaman sağ alt köşede küçük bir damga olarak durur, orada da mikro sürüm kullanılır.
Sık yapılan hatalar
- Logoyu yalnızca sosyal medya için kare kırpmak. Kırpılan logo yarım kalır; kare için ayrı bir yerleşim çizilmeli.
- Favicon’u hiç tanımlamamak. Tarayıcı varsayılan boş ikon gösterir ve sekmede marka görünmez.
- Koyu mod unutmak. Siyah yazılı logo koyu zeminde kaybolur, ters renkli sürüm gerekir.
- Slogan’ı her sürümde tutmak. 200 piksellik genişlikte okunmayan slogan yalnızca gürültü yapar.
Örnek bir set
Varsayımsal bir kafe düşünün: adı “Kıyı Fırın & Kahve”, logosu dalga çizgisi üzerine oturan yazı. Tam logo kartvizitte güzel durur. Mobil başlıkta “Kıyı Fırın” yazan kompakt sürüm yeter, dalga çizgisi yoktur. Instagram’da yalnızca “K” harfi ve dalganın tek kıvrımı kullanılır. Favicon’da ise yalnızca “K”. Dört sürüm, tek marka.
Sürümler arasında hiçbir şey yeniden icat edilmedi. Renk aynı, yazı tipi aynı, yalnızca ne kadarının gösterileceği değişti. Müşteri hepsini aynı yerden çıkmış olarak tanır.
Dosya adlandırma ve teslim düzeni
Setin işe yaraması için dosyaların düzenli olması gerekir. Önerdiğimiz isimlendirme: marka-tam-renkli.svg, marka-tam-beyaz.svg, marka-kompakt-renkli.svg, marka-sembol.svg, marka-favicon.svg. Dosya adına bakan herkes, web sitesini güncelleyen geliştirici de dahil, hangi dosyanın nereye gideceğini anlar. Dağınık klasörlerde “logo-son-son2.png” ile iş yapmak, yanlış sürümün baskıya gitmesine yol açıyor.
Mevcut logonuzun hangi boyutlarda bozulduğunu görmek isterseniz iletişim sayfasından dosyanızı gönderin, 0540 022 64 22 numarasından da yazabilirsiniz; hangi sürümlerin eksik olduğunu birlikte çıkaralım.