Sıkıcı Simgeleri Hızlı Bir Şekilde Orijinal Başyapıtlara Dönüştürme

Simgeler, tasarımlarımızın ayrılmaz bir parçasıdır. Çeşitli eylemleri belirtmek için görsel ipuçlarıdır ve bir ürüne benzersiz bir kimlik verebilirler. Ancak çoğu zaman aynı simge setlerini indirerek ve her web sitesi için her simgenin aşağı yukarı aynı görünmesini sağlayarak bunların önemini kutlamayı seçiyoruz. Bu kadar önemli bir şeyi tedavi etmenin ne yolu.

Bu sorunu çözmek için tasarımcıların ikonlarına görsel derinlik katmalarına ve temsil ettikleri ürüne özel olmalarına yardımcı olacak bir rehber oluşturdum. Bu eğitim, büyük ölçüde etkili Google Materyal tasarımından ilham almıştır.

Google'ın Materyal Tasarım İlkeleri

Google'ın dediği gibi, "materyal bir metafordur." Fiziksel dünyadan görsel ipuçları alır ve tüm arayüzlerini standart hale getirmek için yeni bir görsel dil yaratır. Materyal Tasarımı ilkeleri erişilebilirdir ve arayüzlerin çekiciliğini ve kullanıcı deneyimini geliştirmek için hızla uygulanabilir.

1. Basit Geometrik Şekiller ve Kalın Renkler Kullanın

Düz tasarım trendi, aynı zamanda temel düz şekillere dayanan Materyal Tasarımına ilham verdi. Simgenin tasvir ettiği öğeyi en iyi temsil eden şekli dikkatlice seçin.

2. İnce Gölgelendirme ile Derinlik Katın

Alt gölge, gözü kandırmanın ve tasarımınıza derinlik hissi vermenin iyi bir yoludur, çünkü bir nesneye düşen ışığın etkisini uyarır.

Doğal ışığın genellikle sol üst köşeden geliyormuş gibi simüle edildiğini unutmayın.

3. Alt Gölgeleri Değiştirmek için Renk Tonlarını Kullanın

Her renk, görsel derinliği simüle etmek için birden çok tonda kullanılır. Örneğin, Gmail simgesinde, M'nin şekli için farklı kırmızı tonlarının kullanıldığını ve zarf kapağının altında daha koyu bir gri tonunun kullanıldığını görebilirsiniz.

Bunu Nasıl Yapabilirsiniz: Adım Adım Demolar

Materyal Tasarımı stilinin basitleştirilmiş bir versiyonunu uygulayacağız ve her ikon için aynı rengin sadece üç tonunu kullanacağız ve yaygın “uzun gölge” efekti yerine gölgeleri düz ve kısa tutacağız.

Kaynaklar

• Google'ın sunduğu ücretsiz simge setinin tamamını buradan kontrol edin.

Başlayalım.

1. Cıvata Simgesi

Orijinal simgeyi ikiye bölün ve üst kısmın kalkık görünmesini sağlayın. Bunu, iki şeklin kesişim noktasında bir gölge efekti oluşturarak başarabilirsiniz. Sarının üç tonunu kullanın - üstte daha açık, altta daha koyu ve gölge için en koyu tonu koruyun.

2. Sohbet Simgesi

Orijinal simgede, iki baloncuk arasındaki boşlukta bir gölge efekti ipucumuz var, burada bir gölge yaratacaksınız.

Alttaki şekilde boşlukta dik açı oluşturan noktayı seçin ve sol üst köşede dik açı oluşturana kadar yukarıya doğru hareket ettirin.

Üstteki balonu çoğaltın ve kopyayı aşağı ve sağa hareket ettirin. Kopyayı ve alttaki kabarcık şeklini seçin, bir bölme oluşturmak için “Yol Bulucu”yu kullanın ve yalnızca önceki kopyanızla kesişimi koruyun.

Artık mavinin üç tonunu uygulayabilir ve en açık rengi üstte, en koyuyu ortaya ve ikinci en koyuyu alta verebilirsiniz.

3. İşaretleme Simgesini Kontrol Edin

Katlanmış bir kağıt efekti oluşturacağız.

Simgeyi çoğaltın ve iki parçayı çıkarmak için en sağdaki, ardından en soldaki fazladan iki noktayı kaldırın.

Soldaki katlamayı çoğaltın ve sağdakinin üstüne taşıyın.

Gölge efekti oluşturmak için iki şekli kesiştirin. Ardından, gölge için en koyu, uzun parça için en koyu ikinci ve üst kısım için daha açık ton tutarken üç renk tonu uygulayın.

4. Bayrak Simgesi

Kenarları yuvarlayarak başlayın, ardından bayrağın tabanını çıkarın.

Bir katlama efekti oluşturmak için çapraz olarak kesişen iki çizgi çizin. "Yol Bulucu"yu kullanarak bayrak şeklini çizgilerle bölün ve tabanı gri tutarken bayrağa yeşilin üç tonunu uygulayın.

5. Kalp Simgesi

Kalp simgesini çoğaltın.

Şeklin sol yarısını ayırın.

Sağ üst noktadan aşağı doğru çapraz bir çizgi çizin.

Ortaya çıkan şekli kalple üst üste getirin, ardından gölge şeklini çıkarmak için sağa hareket ettirin. Pembenin üç tonunu uygulayın.

6. Dağlar Simgesi

Orijinal simgenin içindeki boş boşluk, gölgeyi nereye yerleştirebileceğimizi gösterir.

Her seçimden iki üçgen şekli oluşturun.

Küçük olanın bir kopyasını sağa taşıyın ve ortaya çıkan kesişimi gölge şekli olarak çıkarın.

Kahverenginin üç tonunu en açık olanı sola, en açık ikinciyi büyük üçgene ve en koyusunu ortadaki gölgeye gelecek şekilde uygulayın. Sonucu yumuşatmak için biraz köşe yarıçapı uygulayın.

7. Kişi Simgesi

Soldaki kişinin alt kısmını seçin ve çoğaltın. Bu kopyayı sağdaki kişiyle hizalayın. Şimdi, örtüşen üç şekli seçin ve “Yol Bulucu” panelinden “Böl” aracını uygulayın. Şimdi, bitirmek için renkleri uygulayın.

8. Yüzen Kare Simgesi

Alt şekli seçin ve orta-üst noktasını elmas gibi görünene kadar yukarı doğru hareket ettirin.

Üstteki baklava şeklini çoğaltın ve kopyayı 10 veya 20 piksel aşağı taşıyın.

Alttaki iki şekli seçin ve “Yol Bulucu” panelinden “Böl” aracını uygulayın.

Ortaya çıkan kesişen şekillerden sadece iki alt parçayı tutun ve fazla olan noktaları silin.

Ortadaki en koyuyu atayarak kırmızının üç tonunu uygulayarak sarın.

9. Harf Simgesi

“Doğrudan Seçim Aracı (A)” ile zarf şeklinin ikinci yüksek noktasını seçin.

“Kalem Aracı”nı kullanarak parçanın sağına bir nokta ekleyin.

Artık fazladan bir noktanız olduğuna göre, üstteki iki noktayı kaldırarak ve gösterildiği gibi sağa ve sola hareket ettirerek bu negatif alanı bir kağıt gibi görünecek şekilde yeniden şekillendirebilirsiniz.

Her şeyi seçin ve “Yol Bulucu” panelinden bir bölme uygulayın. Üst kağıt şeklini zarftan ayırın, ardından mavinin üç tonunu uygulamadan önce gölge şeklini kesmek için zarf kısmını kağıdın üstüne kopyalayın.

10. Pasta Simgesi

Pastanın alt kısmının çoğaltılmış bir versiyonunu ayırın.

Sol ve sağ kenarları içe doğru hareket ettirerek genişliğini daraltın.

Ortaya çıkan şekli orijinal simgenin üstüne taşıyın ve buzlanma şekliyle örtüşmek için daha yüksek noktaları uzatın.

“Yol Bulucu” ile tüm örtüşen şekillerden bir bölüm oluşturun ve daha önce oluşturduğunuz dar kek tabanının yanındaki fazla noktaları kaldırın.

Buzlanma ve muma açık turuncu, tabana daha koyu bir gölge ve alev şekli ve gölge kenarı için daha da koyu bir turuncu uygulayarak pastanızı tamamlayın.

Simge Setinizin Görünümünü ve Hissini İyileştirin

Material stili ile ikonlar oluşturmak basitlikle elde edilebilir. Yalnızca iyi düşünülmüş geometrik şekiller, koyu renk tonları ve alt gölge efektinin iyi bir kombinasyonuna ihtiyacınız var.

İyi haber şu ki, bu eğitimde yaptığımız gibi tüm simgeleri sıfırdan oluşturmanıza bile gerek yok. Mevcut ücretsiz, düz simgelerden başlayabilir ve az önce öğrendiğiniz basit teknikleri uygulayabilirsiniz.

Haydi ne düşündüğünü söyle! Lütfen düşüncelerinizi, yorumlarınızı ve geri bildirimlerinizi aşağıya bırakın.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Tasarım İlkeleri ve Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Tasarımın Gestalt İlkelerini Keşfetmek
• Adobe XD ve Sketch - Hangi UX Aracı Size Uygun?
• En İyi Tasarımcıların Kullandığı 10 UX Çıktısı