İkonografi için Süper Basit Kılavuz

Ortalama olarak, özel bir simge tasarlamanız ne kadar sürer?

Birkaç dakika mı? On dakika? Uzun? Peki size 10 dakikadan kısa sürede 10 harika ikonu nasıl yapacağınızı göstersek?

İkonografi, bir markanın görsel diline katkıda bulunan bir iletişim biçimidir, bu nedenle özel bir simge seti, basit, genel bir simgeden daha anlamlı ve ilgi çekicidir. Çoğu tasarımcı, özel simgelerin nasıl oluşturulacağını öğrenmekle hiç uğraşmaz, çünkü bu, öğrenme sıramıza eklenecek başka bir kurstur.

Bu yüzden ikonografinin temellerini 10 dakikadan daha kısa bir sürede öğrenmenize yardımcı olacak süper basit bir rehber oluşturmaya başladım (gerçekten öyle).

Özel simgeler oluşturabilmek, projeleriniz için sizi diğerlerinden ayıracak ve bir tasarımcı olarak size rekabet avantajı sağlayacak karmaşık şekiller oluşturmaya başlamanız için yepyeni bir dünyanın kapılarını açacak.

Başlangıçta, bu kılavuzu oluşturmak için Morgan Allan Knutson'dan birkaç saniye içinde bir konum hizmetleri simgesinin nasıl oluşturulacağını gösteren bu GIF'den ilham aldım. Canlandırıcı, akıllı ve hızlı buldum. Özel simgeler oluşturma sürecinin gizemini ortadan kaldırır ve bunun ne kadar basit olabileceğini gösterir. Bir simge aslında kareler, üçgenler veya daireler gibi temel şekillerin birleşiminden veya deformasyonundan kaynaklanabilen geometrik bir şekildir. Logo veya simge tasarımında temel kural, işleri basit tutmaktır.

Bu makalenin amacı, yalnızca basit şekiller kullanarak her biri 10 saniye içinde 10 simge oluşturmaktır.

Önemli Not: Bu gönderide Adobe Illustrator kullanacağız, ancak aynı sonuçları Sketch ve hatta Figma kullanarak da elde edebilirsiniz. Bir şekle herhangi bir nokta eklememiz veya çıkarmamız gerektiğinde, “Kalem Aracı (P)” nı kullanacağız. Noktaların seçilmesi ve etrafında hareket ettirilmesi “Doğrudan Seçim Aracı (A)” ile yapılacaktır.

göz simgesi

Dört daireyi, gösterildiği gibi renkleri değiştirerek en büyükten en küçüğe doğru ortalayın. En büyük daire üzerinde, arkaya doğru, sol ve sağ noktaları merkezden uzağa doğru çekin. Son olarak, iris üzerinde bir aydınlatma efekti oluşturmak için en küçük iç daireyi bir sonrakinin kenarına getirin.

İpucu: Beyaz bir daire kullanmak yerine, her birinin altındaki daireden iki daireyi (Yol Bulucu panelini kullanarak) çıkarmanız yeterlidir. Arka planda daha temiz bir sonuç oluşturur.

ok simgesi

Her şey, bu fazladan noktaları ilk karenin kenarlarına nereye eklediğinizle ilgili. İpucu: Alternatif olarak, ok şeklinde ince bir çizgi çizebilirsiniz.

pil simgesi

Bir kareyi vuruşlu ve iki kareyi dolgu ile kullanma. Bir dolgulu kareyi vuruş şekline eklerken ve ikincisini pil ucunu oluşturmak için dışarıda tutarken orantılarla oynayın.

İpucu: İyi bir görsel denge sağlamak için kontur kalınlığı ve dolgu ile oynayın.

Madde İşareti Listesi Simgesi

Basit bir kare ile başlayın; bir kez sağına kopyalayın; ve uzun bir dikdörtgen olarak yeniden şekillendirin. Her şeyi seçin ve arada bir kare boyutunda boşluk bırakarak iki kez çoğaltın.

İpucu: Daha yumuşak bir görünüm oluşturmak için kareyi dairelerle değiştirin.

Bulut Simgesi

Üç farklı boyutta daire çizin. Bir tabana sahip olmak için en küçük iki daireyi alttan hizalayın ve en büyük daireyi daha yüksek bir konuma yerleştirin. Küçük dairelerden birini deforme ederek bulutun tabanını oluşturun.

İpucu: Daha organik görünen bir bulut elde etmek için farklı daire boyutları kullanın.

İleri Oynat Simgesi

Uzun bir dikdörtgen çizin. Sol kenarın ortasına bir nokta ekleyin ve üst ve alt noktayı kaldırın. Artık bir üçgeniniz olduğuna göre, simgeyi tamamlamak için bu şekli bir kez sağa kopyalamanız yeterlidir.

İpucu: Bunu daha da hızlı yapmak için kare yerine üçgenle başlamanız yeterlidir.

huni simgesi

Uzun bir dikdörtgenle başlayın. Sol ve sağ kenarların ortasına bir nokta ekleyin. Şimdi, üst kenarı yatay olarak uzatın ve işiniz bitti.

İpucu: İki kareyi uçtan uca yerleştirin ve en üstteki kenarı yatay olarak gerdirin.

Oynat/Duraklat Simgesi

Paralel olarak üç uzun dikdörtgenle başlayın. En geniş dikdörtgeni bir üçgene yeniden şekillendirin.

İpucu: Alternatif olarak, sadece bir üçgen ve ardından iki paralel dikdörtgen çizin.

Konum Ok Simgesi

Bu, Morgan'ın konum hizmeti simgesinin bir remiksidir. Basitçe bir kare çizin, ardından sol alt noktayı çapraz yönde çekin ve karşı noktayı geçene kadar yukarı doğru hareket edin.

İpucu: Illustrator'da noktayı sürüklerken Shift tuşuna basmak, köşegen açıyı doğru tutarken simetriyi korumaya yardımcı olur.

Konum Pimi Simgesi

Daha büyük bir dairenin içinde bir daire çizin (Yol Bulucu panelini kullanarak). En alt noktayı dümdüz aşağı sürükleyin ve oluşan açıyı keskinleştirin - “Kalem Aracı (P)” na geçin, ardından “Shift” tuşunu basılı tutarken noktayı tıklayın.

İpucu: Görünümü yumuşatmak için o devrilme noktasında yuvarlatılmış köşeyi kullanın - nokta seçiliyken "Dönüştür" seçenek panelindeki "köşe yarıçapı" değerini ayarlayın.

Ses Simgesi

Tıpkı huni simgesi gibi, ancak 90 derecelik bir dönüşle.

İpucu: Huni simgesini kopyalayıp yapıştırmanız ve saat yönünde döndürmeniz yeterlidir.

dalga simgesi

Düz bir çizgi çizin ve uzunluğu boyunca eşit uzaklıkta noktalar ekleyin. Değişen noktaları aşağı sürükleyin ve her köşeyi tamamen pürüzsüz olana kadar yuvarlayın.

İpucu: Daha da pürüzsüz bir görünüm için çizgi ipuçlarını yuvarlayın.

Topal Simgesi

Bu bonus simgesidir.

Yeterince kalın bir vuruşla bir kare çizin. Makas aracını kullanarak sağ üst ve sol alt noktaları kesin. Bu şekli ikiye bölecektir. Alt yarıyı yukarı hareket ettirin ve her şeyi saat yönünün tersine 45 derece döndürün.

İpucu: Çizgilerin kalınlığına ve logonun içinde oluşan beyaz boşluğa dikkat edin.

Bir Simge 1.000 Kelimeye Değerdir.

Bir görüntünün bin kelimeye bedel olduğunu sık sık duyarız. Bu, görsel alanı, kullanılabilirliği ve estetiği optimize etmek için uzun cümlelerin ve kelimelerin yerini alan simgeler için çok geçerlidir. Bir dizi basit ve etkili simgenin nasıl oluşturulacağını bilmek uzun bir yol kat edebilir. Ve basit bir şekil setini gözlemleyerek ve kullanarak ne kadar hızlı ve kolay olabileceğini gördük.

Özetle, ikonografinin 10 ana kuralı:

• Sembolik ve anlamlı hale getirin.
• Bunu duydunuz: Basit tutun. Stil, okunaklılıktan ödün vermemelidir.
• Niyetli ve düşünceli olun. Oluşturmadan önce düşünün.
• Farklı boyutlarda çalıştığından emin olun.
• Tekdüzeliği aklınızda tutun.
• Yalnızca vektörler, lütfen!
• Renkleri yalnızca gerektiğinde kullanın ve bunu dikkatli yapın.
• Temel geometriyi bilmeye yardımcı olur.
• Tasarlanan simgenin genel tasarıma yardımcı olacağından emin olmak için "karşılık" düşünün.
• İkonografi evrensel olması gereken bir dildir.
• Bonus: Alfabe sadece 26 simgeden oluşan bir settir.

Birlikte oynayın ve 10 saniyeden kısa sürede neler bulabileceğinizi görün.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• eCommerce UX – En İyi Uygulamalara Genel Bir Bakış (Infografik ile)
• Ürün Tasarımında İnsan Merkezli Tasarımın Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Mobil Arayüzler için Sezgisel İlkeler
• Öngörülü Tasarım: Büyülü Kullanıcı Deneyimleri Nasıl Yaratılır