Dijital kimlik ile web sitesini uyumlu kurgulamanın yolu, ikisini baştan tek proje olarak planlamaktır: renk paleti ekran kontrastıyla test edilir, yazı tipinin web lisansı ve dosya boyutu kontrol edilir, logo favicon boyutunda denenir ve kılavuza dijital bir ek yazılır. Bunlar yapılmadığında site kimlik kılavuzuna uygun ama kimliğe yabancı görünür.
Kopukluk nasıl ortaya çıkar?
Çoğu markada kimlik bir ekip tarafından teslim edilir, birkaç ay sonra başka bir ekip siteyi kurar. İki ekip arasında köprü yoksa üç şey olur.
Birincisi renk. Basılı kartvizitte zengin görünen koyu kırmızı, sitede tam ekran arka plan olduğunda göz yorar ve üzerindeki yazı okunmaz. İkincisi yazı tipi. Kimlikte seçilen özel font web için lisanslı değilse siteye en yakın başka bir font konur. Fark küçüktür ama bütün kimliği “neredeyse doğru” hissettirir. Üçüncüsü logo. Matbaa için çizilmiş ince detaylı bir amblem 32 piksellik favicon’da bir lekeye dönüşür.
Bu üç sorunun hiçbiri tek başına büyük görünür. Birlikte, ziyaretçide “bu firma dağınık” izlenimini bırakır.
Kimlik sürecine web’i erken dahil edin
En ucuz çözüm, kimlik tasarımının ilk toplantısına web ihtiyaçlarını da koymaktır. Palet seçerken kontrast test edilir. Yazı tipi seçerken lisans türü ve dosya boyutu sorulur; Google Fonts gibi açık lisanslı kaynaklar işi kolaylaştırır. Logo ise baştan farklı yerleşimlerde denenir: mobil menüde, altbilgide, tarayıcı sekmesinde.
Bu çalışma tek bir ekipte yürürse sürtünme azalır. Kimliği ve siteyi biz birlikte kurduğumuz projelerde bu kontroller doğal olarak sırada ilerliyor; web tasarım sayfamızda çalışma biçimimiz anlatılıyor. Fiyat aralıkları için fiyatlar sayfasına bakabilirsiniz.
Kılavuzun dijital eki
Klasik marka kılavuzu kartvizit, tabela ve ambalaj gibi basılı yüzeyler için yazılır. Siteyi kuran kişi için ise başka sorular var: buton nasıl görünür, üzerine gelince ne olur, form hatası hangi renkte? Koyu temada hangi palet kullanılır? Mobilde logo hangi sürümle gösterilir?
Bu soruların cevabını bir sayfalık dijital ekte toplayın. İçinde şunlar bulunsun:
- Buton stilleri (normal, üzerine gelinmiş, devre dışı)
- Form alanı ve hata mesajı renkleri
- Metin, zemin, vurgu, uyarı renkleri ve kontrast oranları
- Başlık ve gövde yazı tipi ölçekleri
- Mobil ve favicon logo sürümleri
Ek olmadığında web tasarımcısı boşlukları kendi yorumuyla doldurur ve bu yorum çoğu zaman marka niyetinden sapar.
Bileşen mantığıyla düşünün
Palette “ana renk” ve “ikincil renk” yazmak yetmez. Web için rollere bölünmüş renk gerekir: sayfa zemini, kart zemini, ana metin, ikincil metin, bağlantı, buton, hata, başarı. Tipografide de aynı yaklaşım: H1, H2, gövde, küçük yazı, buton metni için ayrı ayrı boyut ve ağırlık.
Rollerle çalışmak geleceği de kolaylaştırır. Marka yeni bir uygulama, müşteri paneli ya da e-posta şablonu ürettiğinde aynı roller yeniden kullanılır. Rol tanımı olmayan bir palet, her yeni üründe yeniden yorumlanır. Renk seçiminin altyapısı için renk paleti yazımıza, yazı tipi kararları için tipografi yazımıza göz atabilirsiniz.
Canlıya geçtikten sonra da kontrol
Site yayına girdi diye iş bitmez. Yeni bir kampanya sayfası eklendiğinde, bir banner tasarlandığında, üçüncü parti bir eklenti kurulduğunda kimlik yeniden sapabilir. Altı ayda bir siteyi kimlik kılavuzuyla yan yana açıp kısa bir denetim yapın. Bu denetimi tutarlılık kontrol listemizle birleştirmek en pratik yol.
Bir de teknik kontrol ekleyin: favicon, sosyal medya paylaşım görseli (Open Graph), e-posta imzası logosu. Kimliğin en az görünen parçaları genellikle en son güncellenenlerdir. WhatsApp’ta bir bağlantı paylaşıldığında çıkan önizleme kartı eski logoyu gösteriyorsa kimlik güncellemesi eksiktir.
Kimlik güncellenirken site nasıl takip edilir?
Kimlikte küçük bir ton değişikliği olduğunda siteyi baştan yapmak gerekmez. Tek yerde (CSS değişkenlerinde) renk kodu değişir ve bütün sayfalara yansır. Bu yüzden siteyi baştan rol tabanlı değişkenlerle kurmak uzun vadede ciddi zaman kazandırır. Daha büyük bir kimlik değişikliği gündemdeyse revizyon mu sıfırdan tasarım mı yazımız karar vermenize yardım eder.
Örnek: iki sürümlü logo ile mobil menü
Bir yerel işletmenin yatay logosu masaüstünde güzel duruyor. Mobil ekranda ise menü çubuğuna sığdırılınca yazı küçülüyor ve okunmuyor. Çözüm baştan iki sürüm hazırlamak: yatay tam logo ve yalnızca simgeden oluşan kompakt sürüm. Site hangi genişlikte hangisini göstereceğini bilir; kılavuzda bu eşik (örneğin 600 piksel) yazılıdır.
Aynı mantık altbilgi, e-posta imzası ve yazdırma çıktısı için de geçerlidir. Her yüzey için bir sürüm kararı verilmişse hiçbir ekip üyesi logoyu elle sıkıştırmak zorunda kalmaz. Bu karar listesi tek sayfaya sığar ve bir kez yapıldığında yıllarca işe yarar. Yeni bir yüzey çıktığında (bir etkinlik standı, bir mobil uygulama) listeye bir satır eklemek yeterlidir.
Başlamak için küçük bir liste
Elinizdeki kimlik ile siteyi şu beş soruyla karşılaştırın: sitedeki renkler kılavuzla birebir aynı mı, yazı tipleri doğru mu, logo mobilde okunuyor mu, düğmelerin kontrastı yeterli mi, paylaşım önizlemesi güncel mi? Beşinde de evet diyemiyorsanız kopukluk var demektir.
Kimlik ile sitenizi birlikte gözden geçirmek için iletişim sayfamızdan yazabilirsiniz; WhatsApp için numaramız 0540 022 64 22.