Marka İkon ve İllüstrasyon Dili

Bir web sitesinin menüsünde, bir ambalajın arka yüzünde, bir sunumun süreç şemasında ya da bir yönlendirme tabelasında karşınıza çıkan küçük semboller, çoğu zaman logodan daha sık görülür. Bu semboller farklı kaynaklardan toplanmışsa, biri ince çizgili, diğeri dolgulu, bir başkası yuvarlak köşeli olur ve kimliğin geri kalanı ne kadar düzenli olursa olsun bütünlük bozulur. İllüstrasyonlar için de durum benzerdir: her kampanyada farklı bir çizerle çalışılırsa marka her seferinde başka bir sesle konuşur.

Bu yazıda bir ikon ve illüstrasyon dilinin hangi kurallardan oluştuğunu, herkese açık tasarım sistemlerini tarafsız örnek olarak kullanarak anlatıyoruz.

İkon dili ile illüstrasyon dili neden ayrı tanımlanır?

İkonlar ve illüstrasyonlar aynı ailedendir ama farklı işler yapar. İkon, küçük boyutta hızlı tanınması gereken işlevsel bir semboldür: bir eylemi, bir kategoriyi ya da bir bilgiyi işaret eder. İllüstrasyon ise daha büyük ölçekte bir kavramı anlatır, bir duygu ya da bağlam kurar.

Bu fark, kuralların nasıl yazılacağını da belirler. İkon kuralları ölçüye dayanır: kaç birimlik bir ızgara, kaç birimlik bir çizgi, kaç birimlik bir köşe. İllüstrasyon kuralları ise üsluba dayanır: hangi renkler, ne kadar detay, figürler nasıl çizilir, gölge kullanılır mı. Kılavuzda iki bölümün ayrı yazılması, her birini kullanacak kişinin aradığı kuralı hızla bulmasını sağlar.

İkon ızgarası: tuval, canlı alan ve anahtar şekiller

Tutarlı bir ikon setinin temeli ızgaradır. Herkese açık tasarım sistemlerinden Material Design 3, bu yapıyı ayrıntılı biçimde belgeliyor ve kendi setinizi kurarken iyi bir referans oluşturuyor:

Anahtar şekiller önemli bir sorunu çözer: kare bir ikon ile daire bir ikon aynı genişlikte çizildiğinde kare olan genellikle daha ağır görünür. Material'da kare 18 dp, daire 20 dp olarak tanımlanmış ve bu şekillerin amacı, sistem ikonları arasında tutarlı görsel oranlar sağlamak olarak açıklanmış 1. Kendi setinizde de bu tür şablonlar tanımlamak, her ikonun tek tek gözle ayarlanması ihtiyacını azaltır.

Material Design ayrıca ikon içeriğinin canlı alanda kalmasını, ek görsel ağırlık gerekiyorsa boşluk alanına taşabileceğini ama hiçbir parçanın tuvalin dışına çıkmaması gerektiğini belirtiyor 1. İkonların ızgarada tam piksel koordinatlarına yerleştirilmesi de önerilen kurallar arasında 1.

Çizgi, köşe ve uçlar: karakteri belirleyen ayrıntılar

İkon setinin karakteri büyük ölçüde üç ayrıntıdan gelir. Birincisi çizgi kalınlığıdır. Material Design, eğriler, açılar, iç ve dış çizgiler dahil olmak üzere 2 dp kalınlığı öneriyor ve tutarsız çizgi kalınlıklarını açıkça yapılmaması gerekenler arasında sayıyor 1. Karmaşık ikonlarda okunurluk için küçük optik düzeltmeler yapılabileceğini, örneğin ataç ikonunda 1,5 dp çizgi kullanıldığını da gösteriyor 1. Bu, kuralın körü körüne değil, istisnası tanımlanarak uygulanması gerektiğini gösterir.

İkincisi köşe yarıçapıdır. Material, aşırı yuvarlak köşelerin okunurluğu azaltabileceği konusunda uyarıyor ve tutarsız köşe yarıçaplarından kaçınılmasını istiyor 1. Markanızın yazı tipi geometrik ve keskinse ikonların köşeleri de buna yakın olmalı; yumuşak ve yuvarlak bir yazı tipiyle ise daha geniş yarıçaplar uyum sağlar.

Üçüncüsü çizgi uçlarıdır. Material, tutarlı çizgi kalınlığı ile birlikte kare çizgi uçlarını öneriyor 1. Sizin setinizde yuvarlak uçlar tercih edilebilir; önemli olan seçimin tüm sete aynı biçimde uygulanmasıdır. Material ayrıca ikonların öne bakmasını, eğik, döndürülmüş ya da üç boyutlu görünmemesini istiyor 1.

Hazır set mi, özel set mi?

Sıfırdan bir ikon seti çizmek uzun bir iştir. Birçok marka için daha mantıklı yol, açık lisanslı ve geniş bir seti temel alıp eksik kalan ikonları aynı kurallarla çizmektir. Google'ın Material Symbols seti bu yaklaşıma örnek: tek bir yazı tipi dosyasında 2.500'den fazla glif içeriyor; dış hatlı, yuvarlak ve keskin olmak üzere üç stil sunuyor ve Apache 2.0 lisansıyla dağıtılıyor 2.

Material Symbols değişken yazı tipi olarak dört eksen sunuyor: dolgu (0 ya da 1), kalınlık (100 ile 700 arası), derece ve optik boyut (20 ile 48 dp arası) 2. Bu eksenler, markanın yazı tipi kalınlığına uygun bir ikon kalınlığı seçmeyi kolaylaştırır. Ancak hazır seti kullanırken kılavuza hangi stilin, hangi kalınlığın ve hangi dolgu ayarının kullanılacağını açıkça yazmak gerekir; aksi hâlde aynı set içinden farklı ayarlar karışır.

Özel set tercih edilecekse, ilk adım yukarıdaki tablodaki kararları yazıya geçirmek ve en sık kullanılacak yirmi otuz ikonu bu kurallarla çizmektir. Set büyüdükçe yeni ikonlar aynı ızgara şablonu üzerinde üretilir.

İllüstrasyon dili için kurallar

İllüstrasyon dili ölçüyle değil üslupla tanımlanır, ama bu kuralların belirsiz olması gerekmez. GOV.UK Design System, illüstrasyonlar için sade ve tutarlı bir yaklaşım öneriyor: görsel öğeleri en aza indirmek, kurumsal paletten düz renkler kullanmak, gerekmedikçe gölge ve degrade kullanmamak ve birden fazla illüstrasyon arasında tutarlılığı korumak 6. İnsan figürleri için de figür kullanılmamasını, gerekiyorsa farklı insanları temsil eden ve kalıp yargılardan kaçınan bir yaklaşımı öneriyor 6.

Kendi illüstrasyon dilinizi yazarken şu başlıkları tanımlayın:

1. Üslup: düz renk, çizgisel, dokulu ya da yarı gerçekçi.
2. Renk: kurumsal paletten hangi renklerin, hangi oranda kullanılacağı.
3. Detay düzeyi: küçük kullanımda okunur kalacak en az detay.
4. Figürler: insan çizilecekse oranlar, yüz ifadeleri ve çeşitlilik ilkesi.
5. Çizgi ve köşe: ikon setiyle ortak çizgi karakteri.
6. Kompozisyon: boşluk kullanımı, arka plan ve kırpma kuralları.
7. Yasaklar: kullanılmayacak efektler, üsluplar ve görsel klişeler.

İllüstrasyonların ikon setiyle aynı çizgi karakterini paylaşması, iki katmanın aynı markaya ait olduğunu hissettirir. Renk tarafında ise paletin nasıl kurulduğunu marka renk paleti nasıl oluşturulur yazısında anlattık.

Erişilebilirlik: dekoratif, bilgilendirici ve işlevsel görseller

Bir ikon ya da illüstrasyonun ekran okuyucuya nasıl aktarılacağı, görselin sayfadaki işlevine bağlıdır. W3C'nin görsel rehberi bu ayrımı üç türle açıklıyor:

• Dekoratif görseller sayfaya bilgi eklemez; örneğin bağlantı metninin yanında yalnızca görünümü güzelleştiren bir ikon. Bunlar boş alternatif metinle yardımcı teknolojilerden gizlenir 4.
• Bilgilendirici görseller bir anlam taşır; örneğin iletişim bilgisinin yanındaki telefon ikonu ya da dosya türünü gösteren bir ikon. Alternatif metin, görselin görünüşünü değil anlamını aktarmalıdır 3.
• İşlevsel görseller bir eylem başlatır; örneğin tek başına bir yazdırma düğmesi olan ikon. Alternatif metin, görselin neye benzediğini değil, hangi eylemi başlattığını anlatmalıdır 5.

GOV.UK de ikonların tek başına birden fazla anlama gelebileceği için kafa karıştırabileceğini, kullanıldıklarında görünür metin etiketiyle birlikte verilmelerini öneriyor 6. Bu, kılavuzda ikonların her zaman etiketle mi, yoksa yalnız belirli yerlerde tek başına mı kullanılacağının yazılması gerektiği anlamına gelir.

Renk tarafında ise WCAG 2.2'nin 1.4.11 ölçütü, içeriği anlamak için gerekli grafik parçaların bitişik renklere karşı en az 3:1 kontrast oranına sahip olmasını istiyor; anlam taşıyan tek başına ikonlar bu kapsamda yer alıyor 7. Açık gri ince çizgili bir ikon seti, beyaz zeminde bu eşiğin altında kalabilir. İkon renklerini paletin kontrast kurallarıyla birlikte düşünmek için erişilebilir marka renkleri yazısına bakabilirsiniz.

Kılavuzda ikon ve illüstrasyon bölümü

İkon ve illüstrasyon kuralları, marka kılavuzunda ölçülü çizimlerle ve doğru ile yanlış örneklerin yan yana gösterildiği sayfalarla anlatılmalıdır. İkon seti ise kaynak dosyalarıyla birlikte, ekran için SVG ve gerekiyorsa yazı tipi olarak teslim edilmelidir. Kuralların kılavuzda nasıl düzenleneceğini marka kılavuzu hizmetimizde, ikon ve illüstrasyon dilini de içeren kimlik sistemini ise kurumsal kimlik tasarımı hizmetimizde ele alıyoruz.