Hazır bir web sitesini markaya uyarlarken müşterilerin çoğu ilk görüşmede şunu sorar: Bu site bizim gibi görünecek mi, yoksa herkesinkine mi benzeyecek? Cevap, kurumsal kimliğin siteye ne kadar doğru taşındığına bağlı. İşin iyi tarafı, bunun için çok fazla öğe gerekmiyor. Logo, renk, yazı tipi ve fotoğraf dili doğru kurulursa aynı altyapı bambaşka bir markaya dönüşür.
Kurumsal kimliğin web'deki karşılığı
Basılı kimlik kılavuzları genelde kartvizit, antetli kâğıt ve tabela için hazırlanır. Web'de ise başka sorular çıkar: Logo koyu zeminde nasıl görünecek? Buton rengi ne olacak? Telefonda başlıklar kaç punto?
Elinizde bir kimlik kılavuzu varsa harika. Yoksa da sorun değil; aşağıdaki öğeleri netleştirmek siteyi başlatmak için yeterli. Kodyva'da yap-sat sitelerin uyarlamasında da bu sırayla ilerliyoruz, hazır sitenin nasıl markalaştığını yap-sat yazımızda ayrıca anlattık.
Logo dosya formatları
En sık yaşadığımız gecikme logo dosyasından kaynaklanıyor. Müşteri WhatsApp'tan 300 piksellik bir JPEG gönderiyor ve bu dosya ne retina ekranda net görünüyor ne de koyu zemine oturuyor.
Web için ideal olan SVG formatı. Vektördür, her boyutta keskin görünür ve dosya boyutu küçüktür. Logonuzu tasarlatan kişiden ya da ajanstan AI, EPS, PDF veya SVG kaynak dosyasını isteyin. Bunlardan biri varsa SVG çıkarmak kolay.
Gerekecek varyasyonlar:
- Yatay logo (site üst alanı için)
- Sadece simge (favicon ve mobil menü için)
- Açık zemin ve koyu zemin versiyonları
Favicon için de birkaç boyut hazırlanır: tarayıcı sekmesi için 32 piksel, telefon ana ekranı için 180 piksel, bazı platformlar için 512 piksel. Bunlar kaynak dosyadan çıkarılır; sizden istenen tek şey iyi bir kaynak.
Renk paleti ve kontrast
Kimlik kılavuzunda genelde bir ana renk, bir ya da iki yardımcı renk vardır. Web'de bunlara ek olarak metin rengi, arka plan rengi, bağlantı rengi ve hata/başarı mesajı renkleri gerekir.
Burada en sık karşılaştığımız sorun kontrast. Marka rengi açık sarı ya da açık turkuaz olan bir işletme, beyaz zemin üzerine bu renkte metin ya da buton yazısı istediğinde okunabilirlik düşüyor. Erişilebilirlik standartları (WCAG) normal metin için en az 4,5:1, büyük başlıklar için 3:1 kontrast oranı öneriyor. Ücretsiz kontrast kontrol araçlarına iki rengin kodunu girerek bunu saniyeler içinde ölçebilirsiniz.
Çözüm genelde markadan vazgeçmek değil. Açık marka rengini arka plan vurgusu, ikon ya da çizgi olarak kullanıp metni koyu tutmak, ya da butonda rengin bir ton koyusunu kullanmak yeterli oluyor. Erişilebilir site tasarımı yazımızda kontrastın yanında başka kriterleri de bulabilirsiniz.
Renk kodlarını HEX formatında (örneğin #1E3A8A) iletin. Basılı işler için verilen Pantone ya da CMYK değerleri ekranda farklı görünebilir.
Yazı tipi seçimi ve hız
Kurumsal yazı tipiniz varsa ilk kontrol edilecek şey web kullanım lisansı. Masaüstü lisansı alınmış bir fontu sitede kullanmak lisans ihlali olabilir. Google Fonts gibi kütüphanelerdeki fontlar çoğunlukla açık lisanslıdır ve web'de kullanılabilir; yine de seçtiğiniz fontun lisansına bir kez bakın.
İkinci kontrol Türkçe karakterler. Ğ, ş, ı, İ gibi harfler bazı fontlarda eksiktir ve tarayıcı bu harfleri başka bir fontla gösterir. Sonuç, başlığın ortasında farklı görünen harfler olur. Seçmeden önce font önizlemesine Işığın Ğ'si Şöyle yazıp deneyin.
Üçüncüsü hız. Her font ağırlığı (ince, normal, kalın, italik) ayrı bir dosyadır. Altı ağırlık yüklemek sayfayı yavaşlatır. Çoğu site için iki ya da üç ağırlık yeterli: normal metin, kalın başlık ve gerekirse orta kalınlık. Fontlar WOFF2 formatında ve sitenin kendi sunucusundan sunulduğunda genelde en hızlı yüklenir.
Başlık ve metin için iki farklı font kullanmak yaygın. Üçüncü bir font eklemek ise nadiren iyi sonuç veriyor.
Görsel dil ve fotoğraflar
Logo ve renk doğru olsa bile, stok fotoğraflarla dolu bir site hâlâ herkesinkine benzer. Kimliği tamamlayan şey fotoğraf dili.
Kendi ekibinizin, mekânınızın ve işinizin fotoğrafları çoğu zaman stok görselden daha güçlü. Profesyonel çekim bütçesi yoksa bile tutarlılık sağlanabilir: aynı ışık koşulu, benzer açı, benzer renk sıcaklığı. Gün ışığında, pencere kenarında telefonla çekilmiş 15 fotoğraf, birbirinden kopuk 15 stok görselden daha bütünlüklü görünür. Fotoğraflarda yüzü net görünen çalışan ya da müşteri varsa yayımlamadan önce izinlerini alın.
Stok kullanmanız gerekiyorsa lisansı ticari kullanıma uygun görseller seçin, tek bir stil belirleyin ve ona sadık kalın. İkon seti için de aynı kural geçerli: çizgi ikonlarla dolu ikonları karıştırmayın.
Uyarlamaya başlamadan önce elinizde şunların olmasını öneririz: vektör logo, HEX renk kodları, varsa yazı tipi adı ve lisansı, en az 10-15 kendi fotoğrafınız. Bunlar hazırsa uyarlama süreci çok daha hızlı ilerler.
Sıkça Sorulan Sorular
Logomun vektör dosyası yoksa ne yapmalıyım?
Logoyu tasarlayan kişiye ya da matbaanıza sorun; baskı işlerinde genelde vektör dosya kullanılır. Bulunamıyorsa logo, mevcut görsele sadık kalınarak vektöre yeniden çizdirilebilir. Bu genelde kısa bir iştir.
Kurumsal kimliğim yoksa web sitesinden önce mi hazırlatmalıyım?
Kapsamlı bir kimlik kılavuzu şart değil. Bir logo, iki üç renk ve bir yazı tipi seçimi siteyi başlatmak için yeterli. Bunları sitenin tasarım sürecinde birlikte de netleştirebilirsiniz.
Blog yazıları genel bilgilendirme amaçlıdır; hukuki, mali veya teknik danışmanlık yerine geçmez.