Web Sitesi İçin İkon Seti Nasıl Seçilir? Tutarlılık ve Okunabilirlik

Talha Aslan ve ekibi olarak sahada en sık gördüğümüz sorun şudur: sitede üç farklı kaynaktan gelen ikonlar yan yana durur ve sayfa nedenini kimsenin söyleyemediği bir dağınıklık hissi verir. Bu rehberde ikon seti seçimini adım adım ele alıyoruz. Ayrıca sonunda kendi sitenize uygulayabileceğiniz bir kontrol listesi bulacaksınız.

İkon seti neden tek kaynaktan gelmeli?

İkon, kullanıcının bir bakışta tanıdığı küçük bir işarettir; bu yüzden göz tutarsızlığı hemen yakalar. Örneğin bir menüde ince çizgili bir ev simgesinin yanında kalın dolgulu bir sepet durursa göz bu farkı bir hata gibi algılar. Kullanıcı bunu tarif edemez, ancak siteyi daha az özenli bulur.

Tek kaynaktan gelen bir ikon seti ise ortak kurallara dayanır. Çizgi kalınlığı, köşe yarıçapı, iç boşluk ve optik ağırlık aynıdır. Dolayısıyla yeni bir sayfa eklediğinizde de seçtiğiniz simge mevcut düzene uyar. Üstelik ekibinizdeki herkes aynı kütüphaneye baktığı için "bu ikonu nereden bulduk" sorusu ortadan kalkar.

Bu konu, sitenin genel görsel dengesiyle de doğrudan bağlantılıdır. Görsel ağırlığın sayfa üzerinde nasıl dağıldığını merak ediyorsanız web sitesinde görsel ağırlık dengesi yazımıza göz atabilirsiniz.

Bir de ölçek etkisini düşünün. Kullanıcı simgeleri tek tek incelemez; sayfayı bir bütün olarak tarar. Bu nedenle ikonlar arasındaki küçük farklar bile toplamda dağınık bir izlenim bırakır. Tutarlı bir set ise okurun dikkatini simgelerden alıp içeriğe yönlendirir; yani iyi bir ikon seti fark edilmeden işini yapar.

Çizgi ikon mu, dolgu ikon mu seçmelisiniz?

Çizgi (outline) ikonlar yalnız kenar hatlarından oluşur. Dolgu (filled, solid) ikonlar ise şeklin içini renkle doldurur. İkisi de doğru olabilir; önemli olan sitenin genel karakterine uyması ve tek bir yerde karışmamasıdır.

• Çizgi ikonlar: hafif, ferah ve modern bir his verir. Bol beyaz alan kullanan, sade arayüzlerde iyi durur.
• Dolgu ikonlar: küçük boyutta bile net okunur. Mobil alt menü gibi dar alanlarda güçlüdür.
• Karma kullanım: yalnız bilinçli bir kuralla olur. Örneğin seçili sekme dolgu, seçili olmayan sekme çizgi olabilir.

Bu son madde önemli bir istisnadır. Birçok tasarım sisteminde aktif durumu göstermek için tasarımcılar aynı ikonun dolgu sürümünü kullanır. Yani karışım rastgele değil, bir anlam taşıyorsa kabul edilebilir. Kısacası, iki stili de barındıran bir ikon seti seçmek size bu esnekliği verir.

Çizgi kalınlığı ve köşe yapısı neden tutarlı olmalı?

Çizgi kalınlığı, ikonun ne kadar "ağır" göründüğünü belirler. Bir ikon setinde genellikle tek bir varsayılan kalınlık vardır ve tüm simgeler bu kalınlığı izler. Siz başka bir kaynaktan simge eklediğinizde kalınlık değişirse bu fark özellikle yan yana dizilerde göze batar.

Köşe yapısı da aynı derecede önemlidir. Bazı setler keskin köşeler, bazıları yumuşak köşeler kullanır. Ayrıca çizgi uçlarının düz ya da yuvarlak bitmesi ikonun karakterini değiştirir. Bu yüzden seçim yaparken şu soruları sorun:

• Setteki tüm ikonlar aynı çizgi kalınlığını mı taşıyor?
• Köşe yarıçapı ve çizgi uçları her ikonda aynı mı?
• Yazı tipinizin karakteriyle uyumlu mu? Yuvarlak hatlı bir yazı tipiyle sert köşeli ikonlar çatışabilir.

Yazı tipi ile ikon uyumu çoğu zaman gözden kaçar. Font seçimini ayrıca düşünmek için web tipografisi rehberimiz yazımız iyi bir başlangıç olur.

Boyut ızgarası (grid) ikon seti seçiminde ne işe yarar?

Profesyonel tasarımcılar ikon setlerini sabit bir çizim alanında, yani bir boyut ızgarasında hazırlar. Örneğin 24x24 birimlik bir alan ve kenarlarda bırakılan sabit bir iç boşluk yaygın bir yaklaşımdır. Böylece daire, kare ve dikey dikdörtgen biçimli simgeler optik olarak eşit büyüklükte durur.

Izgarası olmayan karışık simgelerde ise bazı ikonlar kutusunu tamamen doldurur, bazıları küçük kalır. Sonuç olarak aynı boyuta ayarladığınız iki ikonu göz farklı büyüklükte algılar. Bu nedenle ikon seti seçerken tasarım dosyalarında ya da belgelerinde ızgara ölçüsünün belirtilip belirtilmediğine bakın.

Öte yandan sitede kullanacağınız boyutları da baştan sınırlayın. Örnek senaryo: gövde metni yanında 16 piksel, butonlarda 20 piksel, özellik kartlarında 32 piksel. Üç dört sabit ölçü, her sayfada farklı boyut denemekten çok daha düzenli bir görünüm sağlar.

Hangi ikon boyutlarını kullanmalısınız?

Boyut seçimi hem görünüm hem de kullanılabilirlik meselesidir. Tıklanabilir bir ikon çok küçük olursa özellikle mobilde yanlış dokunmalar artar. W3C'nin WCAG 2.2 hedef boyutu (en az) açıklamasına göre tıklama hedefi en az 24x24 CSS piksel olmalıdır; komşu hedeflerden yeterli boşlukla ayrılan küçük hedefler ve bazı istisnalar bu kuralın dışında kalır.

Burada önemli nokta şudur: hedef alanı, çizilen simgeden büyük olabilir. Yani 20 piksellik bir ikonu daha geniş bir buton alanının içine yerleştirerek dokunma alanını büyütebilirsiniz. Böylece görsel incelik bozulmadan kullanım kolaylaşır.

Mobil düzende başparmağın rahat ulaştığı bölgeler de ikon yerleşimini etkiler. Bu konuyu thumb zone rehberimizde ayrıntılı anlattık.

İkon seti türlerini nasıl karşılaştırırsınız?

Aşağıdaki tablo, sık karşılaşılan seçenekleri genel hatlarıyla karşılaştırır. Değerlendirmeler saha tecrübemize dayanır; her proje için yeniden düşünülmelidir.

Bizim önerimiz genellikle tek bir kapsamlı ikon seti ile başlamak ve eksik kalan birkaç simgeyi aynı kurallara göre özel çizmektir. Bu yaklaşım hem tutarlılığı korur hem de bütçeyi makul tutar.

Son olarak ikon boyutunu yazı boyutuyla birlikte düşünün. Metnin yanında duran bir ikon, satır yüksekliğini bozmayacak kadar küçük, ama seçilecek kadar büyük olmalıdır. Örneğin gövde metni ile aynı yükseklikte bir simge çoğu zaman en dengeli sonucu verir. Bunu birkaç farklı ekranda deneyerek kendiniz görebilirsiniz.

Metinsiz ikonu kullanıcı neden anlamaz?

İkonlar evrensel bir dil gibi görünse de çoğu öyle değildir. Nielsen Norman Group'un ikon kullanılabilirliği makalesine göre yalnız ev, yazdırma ve arama gibi çok az simgeyi geniş kitle tanır. Kalp ve yıldız gibi tanıdık simgeler bile sitelere göre farklı anlamlar taşıyabilir.

Aynı makale ikonların yanına okunur bir metin etiketi koymanızı önerir. Üstelik etiketin yalnız fareyle üzerine gelince açılması dokunmatik ekranlarda işe yaramaz. Bu nedenle menü, filtre ve işlem butonlarında ikonun yanına kısa bir kelime eklemek çoğu zaman en güvenli yoldur.

Makalede ayrıca pratik bir test yer alır: bir kavram için beş saniye içinde uygun bir ikon düşünemiyorsanız o ikon büyük ihtimalle anlamı net aktarmayacaktır. Etiket metinlerini yazarken UX writing rehberimizden yararlanabilirsiniz.

Bu bölümdeki bilgiyi pratiğe dökmek için sitenizdeki tüm etiketsiz ikonları bir listeye yazın. Ardından her biri için şu soruyu sorun: bu simgeyi ilk kez gören biri ne yapacağını bilir mi? Cevap belirsizse kısa bir etiket ekleyin. Bu küçük düzenleme, çoğu zaman tasarımı bozmadan kullanımı belirgin şekilde kolaylaştırır.

Hangi durumlarda ikon tek başına kullanılabilir?

Etiket kuralının bazı makul istisnaları vardır. Ancak bunlar kullanıcının simgeyi gerçekten tanıdığı durumlarla sınırlıdır.

• Arama kutusunun içindeki büyüteç simgesi; çünkü bağlam zaten aramayı anlatır.
• Kapatma (X) simgesi; özellikle pencere ve kayan panel köşelerinde.
• Sosyal medya platform logoları; markanın kendi işareti olduğu için kullanıcı hemen tanır.
• Video oynatıcıdaki oynat ve duraklat simgeleri.

Bu istisnalarda bile ekran okuyucu kullanıcıları için erişilebilir bir ad vermeniz gerekir. Dolayısıyla ekranda etiket olmasa da kodda simgenin işlevini yazmalısınız. Bir sonraki bölümde bu konuyu açıyoruz.

İkonları erişilebilir hale nasıl getirirsiniz?

Erişilebilirlik açısından ikonları iki gruba ayırmak gerekir: dekoratif ikonlar ve işlevsel ikonlar. Dekoratif ikon, yanındaki metnin anlamını tekrar eder; örneğin "Telefon" yazısının yanındaki telefon simgesi. İşlevsel ikon ise tek başına bir işi yapar; örneğin metinsiz bir kapatma butonu.

• Dekoratif ikonlar: ekran okuyucudan gizlenmelidir. Aksi halde kullanıcı aynı bilgiyi iki kez duyar.
• İşlevsel ikonlar: erişilebilir bir ad almalıdır. Örneğin butonun erişilebilir adı "Menüyü kapat" olur.
• Durum ikonları: uyarı, başarı ve hata simgeleri yalnız renge dayanmamalı; yanında metin bulunmalıdır.

Bu ayrım W3C WCAG ilkelerindeki metin dışı içerik yaklaşımıyla uyumludur. Erişilebilirliğin genel çerçevesini web erişilebilirliği ve WCAG standartları yazımızda anlattık. Bu yazıda yalnız ikon tarafına odaklanıyoruz.

Erişilebilir ikon kullanımı aslında herkes için daha iyi bir deneyim sunar. Örneğin güneşli bir ortamda telefonuna bakan bir kullanıcı da yüksek kontrastlı, etiketli ikonları daha rahat okur. Kısacası bu kurallar yalnız belirli bir kullanıcı grubu için değil, sitenizi kullanan herkes için bir kalite ölçüsüdür.

İkon rengini ve kontrastını nasıl belirlersiniz?

Anlam taşıyan ikonlar da tıpkı metin gibi net seçilmelidir. W3C'nin metin dışı kontrast açıklaması, kullanıcı arayüzü bileşenleri ve anlamı anlamak için gereken grafik nesneler için bitişik renklere karşı en az 3:1 kontrast oranı ister. Etkin olmayan (pasif) bileşenler bu şartın dışında kalır.

Pratikte açık gri ikonlar beyaz zemin üzerinde bu eşiğin altında kalabilir. Bu yüzden ikon renginizi belirledikten sonra zemine karşı ölçün. Bunun için renk kontrast kontrolü aracımızı kullanabilirsiniz. Ayrıca marka renginizin kod karşılıklarını HTML renk kodları sayfasından kontrol edebilirsiniz.

Bir başka öneri de ikonlara rastgele renk vermemektir. Örneğin tüm gezinme ikonları tek nötr renkte, yalnız durum bildiren ikonlar (hata, uyarı, başarı) ayrı renkte olabilir. Böylece renk de bir anlam katmanı haline gelir.

SVG ikon setini neden tercih etmelisiniz?

SVG, vektör tabanlı bir görsel formatıdır. Bu sayede ikon her ekran yoğunluğunda keskin kalır ve tek dosyayı her boyutta kullanabilirsiniz. Ayrıca rengi CSS ile değiştirilebildiği için aynı simgenin farklı renkli kopyalarını üretmeniz gerekmez.

Geçmişte yaygın olan ikon fontları ise bazı sorunlar taşır. Font yüklenemezse ikon yerine boş kutu ya da anlamsız bir karakter görünebilir. Üstelik ekran okuyucular bu karakterleri beklenmedik biçimde okuyabilir. Bu nedenle yeni projelerde ekibimiz çoğunlukla SVG tabanlı bir ikon seti öneriyor.

SVG kullanırken iki yöntem öne çıkar: simgeyi doğrudan sayfa içine gömmek ya da bir sprite dosyasından çağırmak. Gömme yöntemi renk ve erişilebilirlik kontrolünü kolaylaştırır; sprite yöntemi ise çok tekrarlanan simgelerde kodu sadeleştirir.

SVG dosyası hazırlarken çizimi tasarım programında sadeleştirmeyi de unutmayın. Gereksiz grup katmanları, gizli şekiller ve fazla nokta içeren yollar dosyayı büyütür. Ayrıca ikonun boyutunu sabit yazmak yerine kapsayıcıya göre ölçeklenmesini sağlamak, aynı dosyayı farklı yerlerde rahatça kullanmanıza imkan verir.

İkon dosya ağırlığı sayfa hızını etkiler mi?

Tek bir SVG ikon genellikle çok küçüktür. Ancak sorun, binlerce simgeyi içeren tüm kütüphanenin siteye yüklenmesiyle başlar. Örnek senaryo: site yalnız 30 ikon kullanıyor, fakat tema tüm seti ve ona bağlı stil dosyasını her sayfada yüklüyor. Bu durumda tarayıcı kullanılmayan yüzlerce simgeyi boşuna indirir.

Çözüm, yalnız kullandığınız ikonları projeye almaktır. Ayrıca SVG dosyalarını tasarım programından çıkan gereksiz meta veriden temizlemek dosyayı küçültür. Böylece ikonlar sayfa yükleme sürecine yük bindirmez.

Sayfa hızının ölçülmesi ve iyileştirilmesi daha geniş bir konudur. Bunu Core Web Vitals nedir yazımızda ayrıca ele aldık. Görsellerin genel optimizasyonu için de görsel optimizasyonu rehberimize bakabilirsiniz.

Açık kaynak ikon setlerinin lisansını nasıl kontrol edersiniz?

Ücretsiz bir ikon seti, sınırsız kullanılabilir anlamına gelmez. Açık kaynak ikon setleri farklı lisanslarla gelir ve her birinin şartları farklıdır. Bu nedenle sitenize bir kütüphane eklemeden önce lisans dosyasını mutlaka okuyun.

• Serbest (izin veren) lisanslar: genellikle ticari kullanıma izin verir, ancak lisans metninin ya da telif bildiriminin korunmasını isteyebilir.
• Atıf isteyen lisanslar: ikonu kullanırken sitede kaynağın belirtilmesini şart koşar.
• Paylaşım koşullu lisanslar: değiştirdiğiniz eserin aynı lisansla paylaşılmasını isteyebilir.
• Yalnız kişisel kullanım lisansları: ticari sitede kullanılamaz.

Bir başka dikkat noktası, marka logolarıdır. Sosyal medya ve ödeme sağlayıcı logoları genellikle o markanın kendi kullanım kurallarına tabidir. Kısacası lisans, yalnız ikon setinin değil, içindeki marka işaretlerinin de ayrı ayrı değerlendirilmesini gerektirir. Bu yazı hukuki danışmanlık değildir; emin olmadığınız durumda lisans metnini bir uzmanla birlikte okuyun.

Lisansı kontrol ettikten sonra bir kayıt tutun. Hangi ikon setini, hangi sürümünü ve hangi lisansla kullandığınızı kısa bir notla proje belgelerine ekleyin. Böylece yıllar sonra siteyi devralan bir ekip de kullanım şartlarını kolayca bulur ve gereksiz bir risk almaz.

İkon seti seçerken hangi adımları izlemelisiniz?

Seçimi kolaylaştırmak için ekibimizin projelerde izlediği sırayı paylaşıyoruz. Her adım bir öncekinin sonucuna dayanır.

1. Sitede gereken tüm simgeleri listeleyin: menü, iletişim, sepet, filtre, sosyal medya, durum bildirimleri.
2. Bu listenin tamamını karşılayan bir ikon seti arayın; eksik simge sayısı az olsun.
3. Çizgi ya da dolgu stiline, sitenin genel karakterine bakarak karar verin.
4. Çizgi kalınlığı ve köşe yapısının yazı tipinizle uyumunu deneyin.
5. Lisans dosyasını okuyun ve ticari kullanım şartını doğrulayın.
6. Kullanacağınız 3-4 sabit boyutu belirleyin ve tasarım dosyasına yazın.
7. Yalnız kullandığınız SVG ikonları projeye alın.
8. Dekoratif ve işlevsel ikonları ayırarak erişilebilir adları tanımlayın.

Bu süreci kendi başınıza yürütmek yerine sitenizin tüm görsel dilini birlikte kurmak isterseniz web tasarım hizmetimiz kapsamında ikon sistemini de baştan planlıyoruz.

Mevcut sitedeki karışık ikonları nasıl toparlarsınız?

Yeni bir site yerine mevcut bir siteyi düzeltiyorsanız önce envanter çıkarın. Her sayfadaki ikonların ekran görüntüsünü alın ve yan yana koyun. Bu basit adım, kaç farklı stil kullanıldığını hemen gösterir.

Ardından en çok kullanılan stili esas alın ve diğerlerini bu stile en yakın simgelerle değiştirin. Örneğin sitenin büyük bölümü ince çizgili ikonlardan oluşuyorsa birkaç dolgulu simgeyi aynı setin çizgi sürümüyle değiştirmek yeterli olabilir. Böylece kapsamlı bir yeniden tasarıma girmeden tutarlılığı yakalarsınız.

Bu toparlama çalışması genellikle daha geniş bir arayüz incelemesinin parçasıdır. Sitedeki diğer kullanılabilirlik sorunlarını bulmak için UX audit rehberimize göz atabilirsiniz.

Toparlama sırasında gezinme alanından başlamanızı öneririz. Menü, alt bilgi ve mobil alt çubuk her sayfada görünen bölgelerdir; dolayısıyla buradaki düzeltme sitenin tamamına yansır. Daha sonra ürün kartları, özellik blokları ve formlar gibi tekrar eden bileşenlere geçin. Tek seferlik sayfaları en sona bırakın.

İkon seti seçiminde en sık yapılan hatalar nelerdir?

Sahada en sık karşılaştığımız hataları aşağıda topladık. Her biri küçük gibi durur, ancak bir araya geldiğinde sitenin güven hissini zayıflatır.

• Her ihtiyaç için farklı bir kaynaktan simge indirmek.
• Anlamı belirsiz ikonları etiketsiz kullanmak.
• Aynı kavram için farklı sayfalarda farklı simgeler kullanmak; örneğin bir yerde zarf, başka yerde kâğıt uçak ile e-posta göstermek.
• İkonları rastgele boyutlarda yerleştirmek.
• Açık gri ikonlarla kontrast eşiğinin altında kalmak.
• Lisansı okumadan ticari sitede kullanmak.
• Tüm kütüphaneyi siteye yükleyip sayfayı ağırlaştırmak.

Bu listedeki aynı kavram için farklı simge hatası özellikle önemlidir. Kullanıcı bir simgenin anlamını bir kez öğrendiğinde sitenin geri kalanında da aynı anlamı bekler. Dolayısıyla her kavram için tek bir ikon belirleyip bunu bir tablo halinde not etmek iyi bir alışkanlıktır.

İkon kullanım kılavuzunu nasıl hazırlarsınız?

Site büyüdükçe farklı kişiler içerik ve sayfa ekler. Bu noktada kısa bir ikon kullanım kılavuzu tutarlılığı korur. Kılavuzun uzun olması gerekmez; bir sayfa bile yeterlidir.

Kılavuzda şu bilgilere yer verin: kullanılan ikon setinin adı ve lisansı, varsayılan çizgi kalınlığı, izin verilen boyutlar, renk kuralları ve kavram-ikon eşleşme tablosu. Ayrıca dekoratif ve işlevsel ikonların nasıl işaretleneceğini de kısa bir notla açıklayın.

Örnek senaryo: bir e-ticaret sitesinde "Kargo" kavramı için ekip kamyon simgesini seçti. Kılavuzda bu eşleşme yazılı olduğunda, yeni bir kampanya sayfası hazırlayan kişi farklı bir kutu simgesi seçmez. Böylece site yıllar içinde de aynı dili konuşur.

İkon seti marka kimliğiyle nasıl uyumlu hale gelir?

İkonlar logonun, renk paletinin ve yazı tipinin yanında markanın görsel sesinin bir parçasıdır. Örneğin yumuşak hatlı bir logo ve yuvarlak bir yazı tipi kullanan bir çocuk giyim mağazası, sert köşeli ve teknik çizimli ikonlarla çelişkili bir his verir. Buna karşılık bir mühendislik firması için ince, keskin ve ölçülü ikonlar güven duygusunu destekler.

Bu uyumu test etmenin basit bir yolu var. Logonuzu, ana başlık yazı tipinizi ve aday ikon setinden beş altı simgeyi aynı ekranda yan yana koyun. Ardından birkaç gün sonra bu ekrana yeniden bakın. İlk bakışta "aynı aileden" görünmüyorlarsa başka bir set deneyin.

Marka renginizi ikonlara uygularken ölçülü davranın. Tüm ikonları marka rengine boyamak dikkat çeken öğelerin sayısını artırır ve asıl çağrı butonunu zayıflatır. Bu nedenle marka rengini yalnız önemli eylem ikonlarında kullanmak daha dengeli bir sonuç verir. Renk seçiminin duygusal etkisini web tasarımında renk psikolojisi yazımızda inceledik.

Mobil ve masaüstünde ikon kullanımı nasıl farklılaşır?

Mobil ekranda alan dardır ve kullanıcı fare yerine parmağını kullanır. Bu yüzden mobilde ikonlar daha büyük dokunma alanına ihtiyaç duyar. Ayrıca fareyle üzerine gelince açılan ipuçları mobilde hiç çalışmaz; etiketin her zaman ekranda kalması gerekir.

Masaüstünde ise daha fazla alan vardır. Dolayısıyla ikonun yanına tam bir etiket koymak kolaydır. Örneğin masaüstü menüde "Sepetim" yazısı ve sepet simgesi birlikte durabilir. Mobil alt menüde ise kısa bir kelime ve ikon yeterli olur.

• Mobil alt menüde beş taneden fazla ikonlu sekme kullanmayın; aksi halde etiketler sığmaz.
• Hamburger menü simgesinin yanına "Menü" kelimesini eklemeyi düşünün.
• Masaüstünde ikon ile etiket arasındaki boşluğu tüm menüde eşit tutun.
• Her iki ekranda da aynı kavram için aynı simgeyi kullanın.

Mobil öncelikli düşünmenin genel ilkelerini mobil öncelikli tasarım yazımızda anlattık. Burada yalnız ikon tarafındaki farklara odaklandık.

İkon seti seçimini kullanıcıyla nasıl test edersiniz?

Tasarım ekibi olarak bir simgeyi çok kez gördüğünüzde anlamı size apaçık gelir. Ancak siteye ilk kez gelen kişi aynı simgeyi farklı yorumlayabilir. Bu yüzden ikon setinin kritik simgelerini gerçek kullanıcılarla kısa bir testten geçirmek iyi bir fikirdir.

Basit bir yöntem şöyle işler: ekip dışından birkaç kişiye etiketsiz ikonları tek tek gösterin ve her birinin ne işe yaradığını tahmin etmelerini isteyin. Ardından aynı ikonları etiketleriyle gösterin ve hangi eylemi seçeceklerini sorun. Tahminler dağınık çıkarsa o simgeyi değiştirin ya da etiketini güçlendirin.

Örnek senaryo: bir hizmet sitesinde "Teklif al" butonu için bir hesap makinesi simgesi seçtiniz. Test katılımcılarının çoğu bu simgeyi "fiyat hesaplama aracı" diye yorumluyor. Bu durumda simgeyi kaldırıp yalnız net bir buton metni kullanmak daha doğru olur. Kısacası bazen en iyi ikon, hiç ikon kullanmamaktır.

Özel ikon çizdirmek ne zaman mantıklıdır?

Hazır ikon setleri çoğu sitenin ihtiyacını karşılar. Bununla birlikte bazı durumlarda markaya özel ikonlar fark yaratır. Örneğin sektörünüze özgü bir ürün ya da süreç hazır setlerde yer almıyorsa, ya da marka kimliğiniz çok belirgin bir çizim dili istiyorsa özel çizim mantıklı hale gelir.

• Hazır sette karşılığı olmayan, sektöre özgü kavramlarınız varsa.
• Marka kimliğiniz belirgin bir çizim üslubuna dayanıyorsa.
• Ürün sayfalarında ikonlar satış mesajının merkezinde duruyorsa.
• Rakip sitelerle aynı hazır simgeleri paylaşmak istemiyorsanız.

Özel çizimde de aynı kurallar geçerlidir: sabit ızgara, tek çizgi kalınlığı, tutarlı köşe yapısı ve SVG çıktısı. Üstelik hazır bir seti temel alıp yalnız eksik simgeleri aynı kurallarla çizmek, sıfırdan bir set üretmekten çok daha ekonomiktir. Ekibimiz projelerde çoğunlukla bu karma yolu öneriyor.

Kontrol listesi: ikon setiniz hazır mı?

Yayına almadan önce aşağıdaki listeyi tek tek işaretleyin. Tüm maddeler tamamsa ikon setiniz sağlam bir temel üzerinde demektir.

• Tüm ikonlar tek bir setten ya da aynı kuralları izleyen kaynaklardan geliyor.
• Stil (çizgi/dolgu) tutarlı; karışım yalnız aktif durum gibi bilinçli bir kurala dayanıyor.
• Çizgi kalınlığı ve köşe yapısı her ikonda aynı.
• Boyutlar önceden seçtiğiniz birkaç ölçüyle sınırlı.
• Tıklanabilir ikonların hedef alanı yeterince büyük.
• Belirsiz ikonların yanında okunur bir metin etiketi var.
• Dekoratif ikonlar ekran okuyucudan gizli, işlevsel ikonların erişilebilir adı var.
• Anlam taşıyan ikonların zemin kontrastını ölçtünüz.
• İkonlar SVG formatında ve sayfa yalnız gerekenleri yüklüyor.
• Lisans ticari kullanıma uygun ve gerekiyorsa atfı eklediniz.

Bu listeyi geçmekte zorlanıyorsanız ya da sitenizin tüm arayüzünü baştan tutarlı hale getirmek istiyorsanız, bu bölümü sitenize biz kuralım. Web tasarım hizmeti sayfamızdan projenizi anlatıp teklif alabilirsiniz.