Bir tane çark ikonu gördüğümüzde ayarlar yazmasa bile onun hangi sayfaya gideceğini biliriz. Büyüteç, çöp kutusu ile örnekleri çoğaltabiliriz. Altında yazan başlığı okumayız bile. Hatta çocuklar okuma bilmeden tablet kullanıp oyun oynayabilirler. Bunda renklerin ve butonların konumları da önemli tabi.
Konuyu piktogram düzeyinde (uyarı levhası, trafik tabelası) değil de arayüz tasarımlarında kullanılan ikonlar (simgeler) boyutunda ele alacağım. Tasarımcılar olarak her ikonu sıfırdan çalışmak gereksiz iş yükü oluşturabiliyor. Bu ikonları material icons, thenounproject gibi ücretli/ücretsiz sunan bir çok kaynak var. Tasarım araçları yazısında sık kullandığım kaynakları paylaşmıştım. Peki bu kadar çok seçenek arasında projemize uygun ikon kütüphanesini nasıl seçeceğiz? Öncelikle genel ikon tiplerini tanıyarak başlayalım.
İkon Tipleri
3 Ana kategoride bunları toplayabiliriz. Outline, Solid, Duotone. Tabi bunlara 3d, glassmorphism gibi bir çok stili de ekleyebiliriz ama en genel geçerlerden devam ediyoruz.
Outline: Sadece çizgi kalınlığı verilmiş ikonlardır. Regular, light, thin olarak farklı çizgi kalınlıklarıyla projemize uygun olanı seçebiliriz. Tutarlılık gereği projedeki ikonların çizgi kalınlıklarının eşit olması önemli bir nokta.
Solid: Outline ikonunun içi dolu halidir. Sadece solid bir set kullanılabilir veya outline ikonunun tıklanıp aktif olduğunu göstermek için solid versiyonunu gösterebiliriz.
Duotone: Projenin renk kimliğini daha baskın olarak kullanmak için tercih edilen yöntemlerden biridir. Daha eğlenceli görünselerde bazı renk ve ikonlarda erişilebilirlik problemlerine yol açabilir.
İkon kütüphanesi ne kadar geniş olursa olsun bir noktada iş başa düşecek ve istediğimiz ikonu istediğimiz stilde bulamayacağız. Örneğin tatil temasını işlediğimiz bir web sitesinde ikon kütüphaneleri bir noktada yetersiz kalacak. O zaman aşağıdaki kriterleri göz önünde bulundurarak Figma’yı açmamız gerekecek.
İkon Tasarımına Giriş
Kendi ikonlarımızı tasarlamak aynı zamanda projenin özgünlüğünü ve bütünselliğini daha iyi ifade edecektir. Tasarlayacağımız bu ikonlar kullanıcıyı direkt aksiyona yönlendirdiği için oldukça basit ve sade olmalıdır.
İkonlar genel olarak menülerde, navigasyon alanlarında veya buton içinde 24 px gibi küçük boyutlarda kullanılır. Bu nedenle kompleks çizgilerin boyutları küçüldükçe algılanabilirliği düştüğü için uzak durmakta fayda var.
4 Adımda İkon Tasarımı
Figma’da boş bir sayfa açıp işe başlıyoruz.
- Çerçeve (Frame):24 x 24px grid mükemmel ikon için güzel bir başlangıçtır. İkonlar farklı boyutlarda olabilir ama her biri kare olmalı. Sık kullanılan diğer ikon ölçüleri: 16×16, 20×20, 24,24, 32×32 px.
- Güvenli Alan (Safe Area): Köşelerden 2 px padding vererek ikonu güvenli alanın içinde çalışmamız gerekir. İkonlar kare veya yuvarlak olmayabilir. Bu durumda en geniş alan güvenli alanın içinde olmalı. Tamam bazen bu alanı ihlal edebiliyoruz ama diğer ikonlarla yan yana geldiklerinde uyumlu olması gerektiğini unutmuyoruz.
- Çizgi Kalınlığı (Stroke): Çizgi kalınlığını 1.5 px çalışırsak bir çok cihazda düzgün görünecektir. Farklı büyüklüklerle farklı kalınlıklar tercih edilebilir. Bunları da projeye regular, light, thin olarak 3 alternatifli ekleyebiliriz.
- Köşe Yuvarlaklığı (Radius): İkonlar arasında uyum için köşe yuvarlaklıkları tüm projede eşit olmalı. Radius değeri 0px (keskin) ya da 2 px (oval) olabilir.
Son olarak ikonları .svg formatı ile projemize ekleyebileceğimiz gibi web projelerinde bu ikonları font olarak tanımlayıp tek bir font dosyası yükleyebiliriz. Böylece SEO konusunda da avantaj sağlanmış olur. Font ikon için IcoMoon‘u deneyebilirsiniz.
Daha fazla teknik detay için Material Design Icon rehberini inceleyebilirsiniz.