Bir markayı düşündüğünüzde aklınıza önce logosu gelir. Oysa insanlar bir markayla logosundan çok daha fazla yerde karşılaşır: tarayıcı sekmesindeki 16 piksellik ikonda, bir kartvizitin arkasında, kaydırırken geçip giden bir sosyal medya gönderisinde, bir faturanın üst köşesinde, bir web sitesinin butonunda.
Kurumsal kimlik, bu karşılaşmaların hepsinde aynı markayı tanımanızı sağlayan sistemdir. Logo bu sistemin yalnızca bir parçası. Bu yazıda bir kimliğin hangi parçalardan oluştuğunu anlatıyor, ortasında da tek bir kararın bütün temas noktalarına nasıl yayıldığını görebileceğiniz bir oyun alanı kuruyoruz.
Bir kimliğin parçaları
- İşaret: Logo ve küçük boyutlar için sadeleştirilmiş hâlleri: yatay, dikey ve yalnızca simge.
- Renk sistemi: Ana renk, ona eşlik eden tonlar ve her rengin hangi işte kullanılacağı.
- Tipografi: Başlık ve gövde için yazı karakterleri, ağırlıkları ve boyut ölçeği.
- Biçim dili: Köşeler keskin mi yuvarlak mı, çizgiler ince mi kalın mı, boşluklar cömert mi sıkı mı.
- Görsel dil ve ses tonu: Fotoğraf, illüstrasyon ve ikon üslubu; markanın nasıl konuştuğu.
Bu parçaların her biri tek başına güzel olabilir. Bir kimliği güçlü yapan, birbirleriyle kurdukları düzendir.
Aynı işaretin yaşadığı boyutlar
- Tarayıcı sekmesi
- 16 px
- Favicon. Çoğu zaman markanın ekranda göründüğü en küçük hâl.
- iPhone ana ekranı
- 180 px
- Siteyi ana ekrana ekleyenlerin gördüğü ikon.
- App Store
- 1.024 px
- Uygulama mağazasının istediği ikon boyutu: favicon’un 64 katı.
Duyarlı logo
Bir logonun 1024 pikselde çalışması, 16 pikselde de çalışacağı anlamına gelmez. İnce çizgiler kaybolur, iç boşluklar dolar, uzun bir yazı okunmaz hâle gelir. Bu yüzden iyi kurulmuş kimliklerde işaretin birden fazla hâli olur: geniş alanlar için tam logo, dar alanlar için kısaltılmış bir versiyon, en küçük boyutlar için tek başına çalışan bir simge.
Bu sitenin logosu da tek parça değil. Miova logosunun iki hâli var: kapalıyken yalnızca M baloncuğu, açıkken harflerin yana doğru açıldığı tam MIOVA yazısı. İkisi de aynı markayı söylüyor; hangisinin görüneceğine alan karar veriyor.
Aşağıdaki cetvelde bu kuralı kendiniz deneyin: logoyu küçültün, harflerin nerede okunmaz hâle geldiğine bakın, sonra duyarlı kuralı kapatıp açarak farkı görün.
İnteraktif
Duyarlı logo cetveli
Cetveli sola doğru sürükleyin. Kural açıkken logo 32 pikselin altında yalnızca işarete kapanır; kural kapalıyken harflerin 9 pikselin altına inip seçilemez hâle geldiğini görürsünüz.
Cetveli sürükleyin ya da ok tuşlarını kullanın.
Tek karar, bütün yüzeyler
İşaret sistemin yalnızca bir parçası. Renk, köşe dili ve yazı karakteri gibi kararlar da her temas noktasına aynı anda yansır. Aşağıdaki oyun alanında bir marka adı yazıp renk, köşe ve yazı karakteri seçin; kartvizitten favicon’a kadar bütün yüzeyler aynı kararla değişir.
İnteraktif
Marka sistemi oyun alanı
Marka adını değiştirin, bir renk ve karakter seçin. Kartvizit, sosyal gönderi, uygulama ikonu ve web arayüzü aynı kararlarla güncellenir. En alttaki ton skalası, tek renkten türetilen on tonu ve her birinin üzerindeki metnin kontrastını gösterir.
Kimlik kararları
Kartvizit
Sosyal gönderi
Sonbahar menüsü masada.
Menüyü görUygulama ikonu ve favicon
Web arayüzü
Akşam yemeği için yerinizi ayırtın
Salı–Pazar, 18.00–23.00 arası açığız.
Antetli kâğıt
Sayın Ece Kara,
merhaba@kozde.comModa Cad. No 12, Kadıköy / İstanbulTipografi ölçeği
- Başlık 1 · 32Mevsim menüsü
- Başlık 2 · 24Günün çorbası
- Gövde · 16Közlenmiş biber, taze kekik ve odun ateşinde pişen ekmek.
- Küçük · 12Tüm fiyatlara KDV dahildir.
Ton skalası
- 50Aa12,55
- 100Aa11,09
- 200Aa8,86
- 300Aa6,44
- 400Aa3,75
- 500Aa4,43
- 600Aa6,14
- 700Aa8,61
- 800Aa11,98
- 900Aa15,74
Her tonun bir işi var
- Zeminüzerindeki metin
- Vurguüzerindeki yazı
- Bağlantıbeyaz zeminde
- Başlıkbeyaz zeminde
Ana renk gövde metninde AA'dan kalıyor; bağlantılar için koyu tonu kullanıldı: #795EED
Token'ları göster
Renk sistemi: tek renk yetmez
Ana renk bir markanın imzasıdır ama bir arayüzü tek başına taşıyamaz. Zemin için açık tonlar, metin için koyu tonlar, vurgular için ara tonlar gerekir. Demodaki ton skalası bunu yapıyor: seçtiğiniz renk, OKLCH renk uzayında tonunu koruyup yalnızca açıklığı değişen on basamağa açılıyor. Böylece “mor” tek bir renk olmaktan çıkıp birlikte çalışan bir aileye dönüşüyor.
Her ailenin bir de iş bölümü olmalı. Hangi rengin metinde, hangisinin yalnızca zeminde kullanılabileceğini ise zevk değil, kontrast belirliyor. Miova’nın kendi renklerini beyaz zemin üzerinde ölçtük:
Veri
Her rengin bir işi var
Miova renklerinin beyaz zemin üzerindeki kontrast oranı.
| Kategori | Beyaz zeminde kontrast |
|---|---|
| Kömür #2C2E2A | 13,71:1 |
| Koyu mor #6F55F2 | 4,93:1 |
| Miova moru #876FFF | 3,65:1 |
| Bej #F5F1E4 | 1,12:1 |
Grafik net bir iş bölümü çıkarıyor: kömür her boyutta metin için, Miova moru büyük başlıklar, butonlar ve vurgular için (3:1 eşiğini geçiyor, 4,5:1’i geçmiyor), koyu mor gövde metnindeki bağlantılar için, bej ise yalnızca zemin için. Bu kararı kimlik kılavuzuna yazmak, “bu renk bu metinde okunuyor mu?” sorusunu her projede yeniden sormaktan kurtarır. Kontrastın nasıl hesaplandığını okunabilirlik yazımızda anlattık.
Tipografi ve biçim dili
Demoda yazı karakterini ya da köşe karakterini değiştirdiğinizde, renk aynı kalsa bile marka başka bir şey söylemeye başlıyor. Geometrik bir yazı karakteri ve yuvarlak köşeler samimi ve güncel; teknik bir karakter ve keskin köşeler kesin ve mühendislik odaklı; klasik bir serif ise köklü ve güvenilir bir izlenim bırakıyor.
Bu yüzden biçim dili de sistemin parçası olarak yazıya dökülmeli: butonların köşe yarıçapı, ikonların çizgi kalınlığı, fotoğrafların kırpılma biçimi. Kimlik kılavuzunda yer almayan her karar, bir sonraki tasarımcı tarafından farklı verilir.
Tutarlılık bir disiplindir
Bir kimlik teslim edildiği gün değil, yüzüncü uygulamasında sınanır: bir fuar standında, bir sunum şablonunda, bir kargo kutusunun yan yüzünde. Sistem iyi kurulduysa her yeni temas noktası sıfırdan tasarlanmaz; mevcut kararların doğru birleşimiyle çözülür.
Kısa bir kontrol listesi:
- İşaretin en az üç hâli var mı: tam logo, kısaltılmış logo, tek başına simge?
- Ana renk bir ton ailesine açılmış mı, her tonun işi belli mi?
- Metin renkleri kontrast testinden geçti mi?
- Yazı karakterleri, ağırlıklar ve boyut ölçeği yazılı mı?
- Köşe, çizgi ve boşluk kuralları tanımlı mı?
- Kararlar tasarım dosyasında ve kodda aynı adlarla mı tutuluyor?
Bu yazı nasıldı?
