Tasarım İlkeleri: Renk, Tipografi ve Sadelik

Tasarım İlkeleri: Renk, Tipografi ve Sadelik

Bir önceki derste doğru grafik türünü seçmeyi konuştuk: karşılaştırma için çubuk, zaman için çizgi, oran için dikkatli kullanılmış pasta gibi. Grafik türü doğru olsa bile renk, yazı ve düzen kötüyse pano okunmaz. Bu derste bir panoyu anlaşılır, erişilebilir ve sade yapan üç ilkeyi ele alıyoruz. Bir sonraki derste bu ilkeleri düzen ve etkileşim (filtreler, detaya inme) ile birleştireceğiz.

1. Renk: Süs değil, anlam taşımalı

Renk, panoda en güçlü ve en kolay kötüye kullanılan araçtır. Temel kural: her rengin bir görevi olmalı.

  • Nötr zemin, tek vurgu: Grafiklerin çoğunu gri tonlarında tutun; dikkat çekmek istediğiniz seriyi tek bir canlı renkle gösterin.
  • Palet türleri: Sıralı palet (açıktan koyuya, tek renk) sayısal değerler için; ıraksak palet (iki uç renk, ortası nötr) hedeften sapma gibi ölçümler için; kategorik palet ise birbirinden bağımsız gruplar için kullanılır.
  • Kategori sınırı: Bir grafikte ayırt edilmesi beklenen renk sayısını yaklaşık beş altı ile sınırlayın. Fazlası için gruplama yapın veya filtre ekleyin.
  • Anlamsal tutarlılık: Kırmızı kötü, yeşil iyi gibi alışkanlıklar işe yarar; ancak pano boyunca aynı anlamı taşımalıdır. Bir sayfada kırmızı satışı, diğerinde gideri gösteriyorsa okuyucu yanılır.

2. Kontrast ve erişilebilirlik

Erkeklerin yaklaşık her on iki kişisinden birinde bir tür renk körlüğü görülebildiği sık söylenir; kesin oranı bilmesek de panonuzu kullananlar arasında mutlaka renkleri farklı algılayanlar olacaktır. Bu yüzden:

  • Kırmızı-yeşil karşıtlığına tek başına güvenmeyin; yanına ok, simge, işaret veya metin etiketi ekleyin.
  • Renk körlüğüne uygun hazır paletler kullanın; çoğu pano aracında bu paletler hazır gelir.
  • Açık zemin üzerinde koyu yazı, koyu zemin üzerinde açık yazı kullanın; açık gri üstüne açık gri yazı okunmaz. Aracınızın veya çevrimiçi kontrast denetleyicilerin verdiği oranı kontrol edin.
  • Panoyu gri tonlamaya çevirip veya ekranı kısıp bakın; hâlâ anlaşılıyorsa iyi bir işaret.
  • Toplantı odasındaki projeksiyonda soluk renkler kaybolur; ekran görüntüsünü bir de öyle test edin.

3. Tipografi

  • Tek yazı ailesi: Bir pano için bir, en fazla iki yazı tipi yeterli. Sade, sans-serif bir font seçin.
  • Hiyerarşi: Ana gösterge (KPI) büyük ve kalın, başlık orta, açıklama ve eksen etiketi küçük ama okunur olsun.
  • Sayı biçimi: Binlik ayırıcı için Türkçe biçime uyun (12.500), ondalık için virgül (3,5). Birimi (TL, adet, yüzde) mutlaka yazın. Büyük sayıları 1,2 milyon gibi kısaltın.
  • Yatay metin: Eğik ya da dikey yazılmış etiketlerden kaçının; gerekirse yatay çubuk grafiğe geçin.

4. Sadelik: Veri-mürekkep oranı

Sadelik, bilgiyi azaltmak değil; bilgiyi taşımayan öğeleri ayıklamaktır.

Ayıklanacak öğeYerine ne yapılır?
Yoğun ızgara çizgileriAçık gri, ince çizgi veya hiç kullanmama
3B efektler, gölge, degradeDüz, tek renkli alanlar
Gereksiz kenarlık ve çerçeveBoşlukla gruplama
Her çubuğa ayrı renkTek renk, sadece öne çıkan çubuk vurgulu
Uzun açıklama kutusu (legend)Etiketi doğrudan çizginin veya çubuğun yanına yazma
Her noktada değer etiketiSadece önemli noktalara etiket

Örnek

Aylık satış panosunda on iki ayın her çubuğu farklı renkte ve üzerinde değer yazıyor olsun. Bunu şöyle sadeleştirin: tüm çubuklar açık gri, hedefin altında kalan aylar tek bir turuncu, son ay koyu mavi ve sadece onun değeri etiketli. Başlığa da sonucu yazın: “Ağustos satışları hedefin yüzde sekiz altında kaldı.”

Sık hatalar

  • Kurumsal logo renklerini zorla tüm grafiklere yaymak.
  • Renkle anlatılan bilgiyi hiçbir ikinci işaretle desteklememek.
  • Boş alandan korkup her köşeyi doldurmak. Boşluk, okuyucunun nefes almasıdır.
  • Her grafikte farklı font boyutu ve renk kullanmak.

Küçük uygulama

  • Elinizdeki mevcut bir panoyu açın veya ekran görüntüsünü alın.
  • Kırmızı-yeşil kullanılan her yeri bulun ve yanına ikinci bir işaret ekleyin.
  • Beş öğeyi ayıklayın: ızgara, kenarlık, gölge, gereksiz etiket, fazla renk.
  • Önce ve sonrayı bir meslektaşınıza gösterin ve “Ana mesaj nedir?” diye sorun. Beş saniyede cevap veriyorsa başardınız.

Sonraki ders: Düzen ve etkileşim; göstergeleri sayfada nasıl konumlandıracağımızı, filtre ve detaya inme özelliklerini nasıl kullanacağımızı işleyeceğiz.

Bu dersi kayıt olmadan izleyebilirsin. İlerlemeni kaydetmek, sertifika almak ve puan tablosuna girmek için ücretsiz üye ol: Kayıt Ol