Simgeler: Onları gördünüz, tıkladınız, dokundunuz. Muhtemelen bu sayfaya tek başına ulaşmak için birkaç kişiyle etkileşimde bulundunuz.
Temel düzeyde, simgeler sadece küçük resimlerdir. Ama gerçekte, dijital arayüzleri anlamamıza ve kullanmamıza yardımcı olarak kullanıcı deneyiminde çok büyük bir rol oynuyorlar. Simgeler, ekranları daha verimli, daha temiz, kullanıcı dostu ve marka uyumlu hale getirir. Bir simgeye, herhangi bir görüntüyü alıp küçültmekten çok daha fazla düşünce girer.
Bu kılavuzda size kendi simge setinizi tasarlamaya nasıl başlayacağınızı öğreteceğiz. Şunları ele alacağız:
simgeler neden bu kadar önemli
simgeler tasarlamak için yedi en iyi uygulama
Simge setinizi oluşturmanıza yardımcı olacak kaynaklar.
Hadi dalalım.
Simgeler neden önemlidir?
Simgeler nispeten yeni bir kavram gibi görünebilir, ancak simgeler aslında ilk kez eski Yunanlılar tarafından elle çizilmiş resimlerde dini tanrıları ve kutsal figürleri tasvir etmek için kullanıldı. O zamanlar okuryazarlık yaygın değildi, bu nedenle dini öğretileri yaymanın en kolay yolu yazılı metinlerden ziyade resimlerdi. Bu, dini takipçiler için bir aşinalık ve tanınırlık duygusu yarattı.
Önerilen makale: programatik reklamcılık nedir hakkında bilgi almak ve güncel sosyal medya haberlerine ulaşmak için ilgili sayfayı ziyaret edebilirsiniz.
Günümüzün teknolojik yenilikleri, simgeleri yazılım ve web sitesi kullanıcı arayüzlerinde kullanıldıkları dijital dünyaya getirdi. Simgeler anlamı iletir ve metinden daha az ekran alanı kullanırken kullanıcıları harekete geçmeye teşvik eder. Ayrıca, metin ağırlıklı sayfaları tanınabilir simgelerle değiştirmek, kullanıcının anlamasını ve gezinmesini çok daha kolaylaştırır.
Ancak, simgeler en iyi şekilde tasarlandığında çalışır. Küçük boyutlarına rağmen, insanların web sitenizi veya ürününüzü kullanmasını engelleyen veya onları kullanmaktan vazgeçiren simgeler yapmak zor değil. Ardından, ikonik simgeler oluşturmanıza yardımcı olacak bazı en iyi uygulamaları paylaşacağız.
Simge Tasarımı En İyi Uygulamaları
Farklı ortamlara taşınmış olsalar da, 21. yüzyıl ikonları eski Yunan ikonik ilkelerine uygun olarak tasarlanmıştır: basitlik, okunabilirlik ve netlik. Bunlar, günümüzün simge tasarımı en iyi uygulamalarının temelini oluşturur.
Tasarımdaki çoğu şey gibi, bu uygulamalar da katı kurallar değildir. Bunları daha çok, çoğu zaman uymanız gereken genel yönergeler olarak düşünün, ancak ara sıra onları kırmanız gerekebilir. Simge setiniz için neyin en iyi olduğuna karar verme konusunda içgüdülerinize güvenin.
1. Simgelerinizin hangi amaca hizmet edeceğini belirleyin.
Bir dizi simge tasarlarken yapılacak ilk şey, web sitenizdeki veya ürününüzdeki görevler hakkında kapsamlı bir anlayış oluşturmaktır. Simgelerinizin neyi temsil edeceğini bilmek veya siz onları oluşturmadan önce kullanıcılarınızdan ne yapmalarını isteyeceksiniz, bu nedenle bir simge gerektirecek durumların bir listesini oluşturun.
Örneğin, bir yemek teslimatı web sitesi için bir dizi simge yapıyorsanız, kullanıcıları çevrimiçi sipariş vermeye, çantalarına ürün eklemeye, bir ödeme seçeneği belirlemeye, herhangi bir eklenti seçmeye vb. teşvik eden simgeler isteyebilirsiniz. Açık. Simgelerinizin açıkça amaçlarına göre tasarlanması gerekir.
2. Bir ızgara kullanın.
Gerçekten çizmeye başlama zamanı geldiğinde, bir ızgara ile başlayın. Izgara, simgelerinizle şekil, boyut ve nesne yerleştirme tutarlılığı sağlar. Her şey doğru boyutlandırılırsa tasarım süreciniz çok daha basit olacaktır.
Simgenizin çizgilerinin kılavuz çizgileriyle hizalandığından emin olun. Bunu yapmak, simgelerinizin görünümünü tutarlı tutar ve yanlış hizalamadan kaynaklanan istenmeyen etkileri önler. Çizgi genişlikleri her zaman tam sayı olacağından, ızgaraya yapıştırmak simgeler oluşturulurken bulanıklığı da önler.
Belirtildiği gibi, bir simgenin en iyi şekilde görünmesi için ızgarayı kırmanız gereken zamanlar olabilir. Çok sık yapmadığınız sürece bu iyi.
3. Simgelerinizi basit tutun.
Simgeler her şeyden önce işlevseldir. Kullanıcıların bir hedefi tamamlamasına yardımcı olmak için varlar ve sanatsal kararlar ikinci sırada geliyor. Bu nedenle, setinizdeki her bir simgeyi, anlamını ifade etmeye yetecek kadar ayrıntıyla olabildiğince basit hale getirmeyi hedeflemelisiniz.
Çok fazla ayrıntı kafa karıştırıcı olabilir. Tasarım çok karmaşıksa, hedef kitleniz onun ne olduğunu hemen anlayamaz. Materyal Tasarımı’ndan yoğun, aşırı ayrıntılı bir simge örneği:
Elbette, ekranınızda patladığında iyi görünüyor. Ancak 24 x 24 piksele veya daha azına küçültüldüğünde, bu ayrıntılar kaybolacak ve kullanıcıların onu bir tekne olarak tanımlaması daha zor olacaktır. Sonunda oraya varacaklar, ancak bu daha fazla zihinsel çaba gerektiriyor ve bu tek başına deneyimlerinde büyük bir fark yaratıyor.
Bunu net, anlaşılır bir simgeyle karşılaştırın:
Daha az ayrıntı, görsel olarak daha az ilginç bir simge oluşturabilir, ancak tanımaya yardımcı olur. Yukarıdaki simge, çoğumuzun bunun bir tekne olduğunu anlamasına yetecek kadar ayrıntı içeriyor. Küçültüldüğünde bile anlam açıktır çünkü çizgiler kalın, minimaldir ve bol miktarda beyaz boşlukla desteklenmiştir. Bu simge, önemli bir erişilebilirlik ilkesi olan az görenler de dahil olmak üzere tüm kullanıcılar tarafından anlaşılır.
Tanınabilir bir simge oluşturmanın en iyi yolu, daireler, kareler ve üçgenler gibi basit şekillerle başlamaktır. Ayrıntıları eklemeden önce, temel olarak ana şekillerle simgenizin kaba bir versiyonunu oluşturun.
Sadeliği teşvik etmenin yanı sıra, büyük şekillerle başlamak simgelerinizi stil açısından daha tutarlı ve daha kolay ölçeklenebilir hale getirir.
4. Simgelerinizi tanınabilir yapın.
Simge tasarlamak dengeleyici bir eylemdir. Bir yandan, son adımda değinildiği gibi, simgelerinizin daha küçük boyutlara çevrilebilecek kadar basit olması gerekir. Öte yandan, kullanıcıların işlevlerini tanıyabilmesi için yeterli ayrıntıyı eklemeniz gerekir.
Simgelerinizi temel şekillerden ayırıp daha fazla ayrıntı ekledikçe, ilk kez kullanan birinin anlamını sezgisel olarak anlayıp anlayamayacağını düşünün. Örneğin, bir çörek tasarlıyorsanız, çörek gibi görünmesi ve çörek olarak tanınması gerekir. Simge, içinde başka bir daire bulunan bir daire olmamalıdır. Bunun yerine, çörek için standart bir tanımlayıcı işaret olan sprinkles eklemeyi düşünün.
Simgelerinizle ilgili araştırma yapmanıza da yardımcı olur. Yemek dağıtım uygulaması örneğimize devam ederek, tasarlayacağınız setle genellikle hangi görsellerin ilişkilendirildiğini görmek için arama yapabilirsiniz. Belki benzer web sitelerinde derinlemesine bir arama yaparsınız ve tarifleri temsil etmek için genellikle bir set üstü ocak simgesinin kullanıldığını görürsünüz. Bu, kullanıcılar benzer ilişkilendirmeler yapacaklarından, simgenizi bu sonuçlarla eşleşecek şekilde tasarlamak isteyeceğiniz anlamına gelir.
Bu aşamada, simgelerinizin sembolik mi yoksa gerçek mi olacağına karar vermeniz de önemlidir. Örneğin, ya çatal olan bir simge ya da çatalla mecazi olarak ilişkili bir simge yaratıyorsunuz.
Örneğin, belirli bir içeriği sevdiğinizi veya sevdiğinizi belirtmek için genellikle bir kalp simgesi kullanılır. Bu sembolün anlamı anlaşılır ve anlaşılması kolaydır.
Bununla birlikte, bir bulut simgesinin arkasındaki anlam daha mecazidir. Hemen bir bulut resmi görmez ve simgeye tıklamanın sizi çevrimiçi dijital veritabanlarından dosya indirmeye sevk edeceğini düşünmezsiniz.
Zaman içinde kullanıcı arayüzlerinde esasen evrensel bir anlam benimsemiş bazı simgeler olduğunu unutmayın. Örneğin, bir büyüteç simgesi neredeyse her zaman bir arama işlevini temsil eder, bir alışveriş sepeti simgesi genellikle bir çevrimiçi mağazadaki bir kullanıcının sepetini temsil eder ve bir “X” simgesi genellikle tıklandığında ekranı kapatır. Simgeleri seçerken bunu aklınızda bulundurun — uygun olduğunda ortak simgeler kullanın ve kullanıcıların kafasını karıştırabileceği için normal kişilerin dışında bunlardan kaçının.
İyi simgeler, demografik özelliklerinden bağımsız olarak tüm insan grupları tarafından da tanınabilir. Küresel bir izleyici kitleniz varsa ancak Batı merkezli görseller kullanıyorsanız, Batı sembollerine aşina olmayan kullanıcılarınıza ulaşamazsınız.
5. Görsel tutarlılığı hedefleyin.
Simge tasarım ipuçları arıyorsanız, muhtemelen yalnızca bir simge değil, bir dizi simge tasarlıyorsunuzdur. Setinizdeki tüm simgeler birbiriyle ilişkili görünmelidir. Kontur ağırlığı, dolgu, köşe şekli, stil (ör. düz ve üç boyutlu) ve renk düzeni gibi görsel nitelikleri paylaşmalıdırlar. Simgeleriniz için setiniz boyunca takip ettiğiniz kurallar belirleyin — set üzerinde çalışan birden fazla tasarımcı varsa bu özellikle önemlidir.
Kem Bardly’nin Zarf simge setinden bir örneğe bakalım. Renk şemasının altı simgenin tümü için nasıl tutarlı olduğuna ve zarfın içinde ne olursa olsun aynı şekil ve boyuta sahip olduklarına dikkat edin. Bu simgeler düz kenarlı ve dolguludur.
Öte yandan, Phosphor Icons tarafından ayarlanan bu simge ana hatları çizilmiş, yuvarlak ve dolgusuzdur. Bu simgelerin amacı, sohbet işlevlerini belirtmektir ve tasarım tutarlılığını fark edeceksiniz: Hepsi aynı boyut, çizgi kalınlığı, kenar şekli ve renktedir.
Temiz, tutarlı bir estetik için simge setinize uygulamayı düşünebileceğiniz bazı kurallar şunlardır:
Oluşturma sorunlarından kaçınmak için mümkün olduğunca tam sayılara bağlı kalmaya çalışın. Bu, açılar, köşe yuvarlama ve çizgi kalınlığı için geçerlidir.
Hassas araçları (örneğin, Adobe Illustrator’daki eğri aracı) tercih ederek şekilleri ve eğrileri elle çizmekten kaçının. Göz, bir simgenin şeklinin biraz bozuk olup olmadığını algılayabilir.
Açılar için 45 derece (veya 90 derece veya 22,5 derece gibi 45 derecenin katları) kullanın.
Görüntü ölçeklendiğinde bulanıklığı önlemek için simgenizin vuruşlarını piksel ızgarasıyla hizalayın.
Çizgi ağırlıklarının sayısını mümkünse iki, maksimum üç ile sınırlayın. Daha fazlası kafa karıştırıcı ve aşırı derecede ayrıntılı olabilir.
6. Kişilik ekleyin.
Simge tasarımı için teknik kuralları tartışmak için çok zaman harcadığımın farkındayım. Ancak bu, yaratıcı kaslarınızı benzersiz kılmak için esnetemeyeceğiniz anlamına gelmez!
Simgeleriniz web sitenizin tanınabilir markasının bir parçasıysa, yalnızca simgeleriniz gibi görünmelidirler. Navigasyon uygulaması Waze için bazı simgelere göz atalım.
Bu simgeler renkli, etkileyici, neredeyse karikatürize bir tarz benimsiyor. Bu, Waze arayüzü ve markasıyla uyumlu eğlenceli bir estetik sunar.
Buna karşılık Google’ın simgeleri daha basittir. Sade tasarım sonuçta işlevsel ve basittir, ancak renk, farklı yer kategorilerini ayırt etmeye yardımcı olur.
Waze ve Google Haritalar yapı olarak benzerdir – her ikisi de kullanıcılara yol tarifi sağlar. Hizmetleri örtüşse de simgeleri markalarına özgüdür ve bu nedenle tanınabilir.
7. Simgelerinizi test edin.
Simge setinizin gerçekten etkili olup olmadığını öğrenmenin tek yolu, onu gerçek insanlarla test etmektir. Bunun çok resmi olmasına gerek yok — simgelerinizi bir arkadaşınıza veya takım arkadaşınıza göstermeyi deneyin ve onlara her bir simgenin ne olduğunu düşündüklerini sorun veya onu gördüklerinde akıllarına gelen ilk şeyi söyleyin.
Tasarımla ilgili her şeyde olduğu gibi, ilk denemede simge setinizi çivilemeyi beklemeyin. Başlatmak için rahat hissettiğiniz bir setle sonuçlanmadan önce büyük olasılıkla tasarımlarınızı tekrarlamanız gerekecek. Sürecin bu aşamasına ilişkin daha fazla ipucu için Kullanıcı Testine Yönelik Nihai Kılavuzumuza bakın.
Simge Tasarım Kaynakları
Web siteniz için bir simge seti tasarlama sürecinde yardımcı olacak çeşitli kaynaklar vardır. İlham almak için diğer simgelere başvurmak üzere bu kaynakları kullanabilir veya web sitenize ve marka ihtiyaçlarınıza uyacak şekilde özelleştirebileceğiniz hazır simge setlerini indirebilirsiniz.
1. Materyal Tasarımı
Materyal Tasarımı, Google’ın tipografi, web erişilebilirliği ve diğer dijital kılavuzlar hakkında bilgi sağlayan açık kaynaklı platformudur. Simgeleri indirebilir ve markanızın ihtiyaçlarına göre özelleştirebilirsiniz.
2. Düzene Simgeleri
Streamline Icons, indirmeye hazır 30.000’den fazla önceden tasarlanmış simgeye sahiptir. Ücretsiz “Temel Simgeler” paketi, e-posta ve müzik işlevleri için yaygın olarak kullanılan sembolleri içerir ve ücretli “Ultimate Paketi”, seyahat ve ekoloji sembolleri gibi niş simgeleri içerir.
3. Çekirdek
Nucleo, uygulamaları içindeki simgeleri seçmenize, özelleştirmenize ve indirmenize olanak tanır. Fiyatlandırma, bir hesaptaki kullanıcı sayısına bağlı olarak değişir.
4. Animasyonlar
Animaticons, sitenize benzersiz bir kullanıcı deneyimi sağlayabilen animasyonlu simgelerin indirilmesini sağlar. Ücretsiz – 5 ABD doları arasında değişen beş farklı simge seti arasından seçim yapabilirsiniz.
5. Ücretsiz Tasarım Kaynakları
Free Design Resources, web sitenizde indirmek ve kullanmak için iOS sekme çubuğu simgeleri gibi çeşitli simge paketleri sunar. Bazı setler ücretsizdir, bazıları ücretlidir ve simgeleri Illustrator, Figma veya Sketch gibi en sevdiğiniz tasarım yazılımıyla uyumluluklarına göre filtreleyebilirsiniz.
Simgeler, sitenizin gerekli öğeleridir.
Sonuç olarak, kusursuz bir kullanıcı deneyimi oluşturmak için iyi tasarlanmış simgeler çok önemlidir.
Web sitesi ziyaretçilerinizin sitenizde keyifli vakit geçirmesini ve ister bir ürün satın almak ister bir haber bültenine kaydolmak olsun, istediğiniz eylemi tamamlamasını istiyorsunuz.
Simgeler, büyük miktarlarda açıklayıcı metin ihtiyacını ortadan kaldırarak kullanıcıları farklı işlemlerde yönlendirmenize yardımcı olabilir. Tanınabilir görseller ayrıca dünyanın her yerinden kullanıcıların içeriğinizle etkileşim kurmasını kolaylaştırır.
Sitenizdeki simgelerin hangi amaca hizmet edeceğini anlamak için zaman ayırırsanız ve bunları stil tutarlılığını koruyarak tasarlarsanız, kullanıcılarınız sitenizden memnun kalacak, sitenizde işlem yaparken eğlenecek ve sitenize tekrar gelmek isteyecektir.
İlk simge setinizi tasarlayın.
Sonuç olarak, kusursuz bir kullanıcı deneyimi oluşturmak için iyi tasarlanmış simgeler çok önemlidir. İster bir ürün satın alıyor ister bir haber bültenine kaydoluyor olsun, kullanıcılarınızın eğlenmesini ve istenen eylemi tamamlamasını istiyorsunuz.
Hangi web sitesini veya uygulamayı oluşturuyor olursanız olun, simgeler muhtemelen arayüzünüzün çoğunu oluşturacaktır, bu nedenle en iyi simgeleri neyin başarılı kıldığını anlamak önemlidir. Bir UX tasarımcısı olarak birincil hedefiniz, mümkün olduğunda biraz yaratıcılık enjekte ederken, simgelerinizin anlamlarını olabildiğince açık bir şekilde iletmek olmalıdır.
Satış ve Pazaralama 