Usta bir Tasarımcı olmanın bazı kuralları

1-) Kullandığın Yazı Tiplerini Sınırla

Tamam, “usta tasarımcı” lafı biraz zorlama olabilir. Ama en azından bu yedi kuralı takip ederek “uzman tasarımcı” olabilirsiniz. Bu, nasıl daha iyi bir tasarımcı olabileceğiniz hakkında okuduğunuz blog yazılarının en kısası ve en bilgilendiricisi olacaktır. Lütfen aklınızda bulundurun: bu kurallar KIRILABİLİR… çünkü yasa değiller, sadece benim bir tasarımı bir araya getirirken uyguladığım genel kurallardır.

Aşağıdaki kuralları izlediğinizde sanatsal mükemmelliğe giden yoldasınız demektir:
Kural Bir: Yazı tiplerini sınırlayın. İyi bir tasarımı bir araya getirmenin büyük bir kısmı, gördüğünüz gibi, görünüşün birbiriyle tutarlı olmasıdır. Tutarlı bir görünümü elde etmenin en iyi yolu tasarımını kullandığınız bir kaç motifle (temalar) sınırlamanızdır. Seçtiğiniz yazı tipleri sınırlamak isteyeceğiniz ilk değişkendir. Ben genellikle tasarım başına 2 yazı tipi seçerim.

İlk yazı tipi süslü veya sanatsal olabilir. Bu yazı tipi tasarımınıza biraz karakter, kişilik ve kabiliyet kazandırmak için kullanılır. Tasarımın ruh halini belirleyen bu yazı tipidir. Bir kızın partisi için fırıl fırıl dönen eğlencelik bir yazı tipi mi, yoksa bir rock grubu için kötülük dolu karanlık bir yazı tipi mi? Bu süslü yazı tipini üst kısım için kullanırdım –büyük olan herhangi bir yere, bu yazı tipini kullanırım. Süslü yazı tipi, tasarımın odak noktası olacaktır. Genellikle bu yazı tipini az yerde kullanırsınız ama daha büyük olacağından insanların odaklanacağı ve ilk göreceği şey bu olacaktır.

İkinci yazı tipi çok basit olmalıdır. Bu ikincil yazı tipini izleyici fark etmemelidir bile. Bu ikinci yazı tipi, çok kolayca okunabilir olmalıdır. Tasarımda yaygın olan metinlerde kullanılacak genel yazı tipi bu olacaktır. Açıkça, yaygın metinlerde artsitik yazı tiplerini okumak çok zor olacağından bu ikinci yazı tipinin amacı, sadece işlevsellikten ibaret olmalıdır.

İşte bir tasarımda kullanılan uygun yazı tiplerine örnek. Gördüğünüz gibi, burada sadece iki yazı tipi kullanıldı. Süslü yazı tipi, üst kısım için ve basit yazı tipi de genel metin için. Temiz ve tutarlı görünüyor.

İyi - Font Kullanımı
solda: “basit yazı tipi” / sağda: “süslü yazı tipi”
Burada da yazı tiplerinin kötü kullanımı söz konusu. Bu durumda, bir çok süslü yazı tipip kullandım. Sadece tasarımı tutarsız gösteriyor. Alt kısım, ana başlıkla uyuşmuyor bile.
Kötü - Font Kullanımı

solda: "basit yazı tipi" / sağda: "çok fazla süslü yazı tipi"

Bir tasarımda çok fazla yazı tipi kullanmak en büyük hatadır. Broşüründe 8 farklı yazı tipi kullanan birinden daha kötü görünen bir şey yoktur. Daha da kötüsü genel metinleriniz için çok süslü bir yazı tipi kullanmanızdır. İşte yazı tiplerinin en kötü nasıl kullanılabileceğine dair bir örnek:

Berbat - Font Kullanımı

solda: "yazı tipleri genel metin için fazla süslü" / sağda: "çok fazla süslü yazı tipi"

Sizi göndermeden önce son bir düşünce. Eğer süslü yazı tipiniz modern veya çağdaş görünüyorsa, o halde basit yazı tipiniz bir sans-serif yazı tipi olmalıdır. Eğer süslü yazı tipiniz eski moda görünüyorsa, o zaman ikincil yazı tipi olarak serif kullanın.

2-) Renklerini Sınırla

Tasarımda Renk Sınırlama

Tasarımda Renk Sınırlama

Yazı tiplerininizi sınırlamanın son kuralıymış gibi geliyor kulağa değil mi? Aynen! Renklerimizi, yazı tiplerimizle aynı nedenden sınırlamak istiyoruz. Tasarımda kullandığımız renkleri sınırlamak, tasarımımızın daha tutarlı olmasını sağlayacaktır. Yani, her şey uyumlu görünecektir. Aynı bir spor takımının üniforması veya bir şirketin markalaması gibi.

Yazı tipi seçiminde olduğu gibi, renkleri sınırlamak sadece bir rehberdir, kural değildir. Tasarımınızda bir hayli gökkuşağı gibi bir sürü renk kullanabilirsiniz, ve harika görünebilir. Ama bir renklendirme stratejisiyle başlamalı ve buna sonuna kadar uymalısınız. Renklerinizi tasarımınızla uyumlu bir şekilde kullanın.
Yeni başlayanlar için, önce renk değerlerinden bahsedelim. Bir rengin değeri, rengin ne kadar aydınlık veya ne kadar karanlık olduğudur. Bir sarı örneğin, epeyce aydınlıktır. Bir mor epeyce karanlıktır. Tabii ki, bir rengin değer yelpazesi vardır. Örneğin mor, çoğumuzun karanlıkla özdeşleştirerek düşündüğü, ama aynı zamanda oldukça açık değerde bir mor elde edebileceğiniz renktir. Aşağıda renklerin ve onların ilgili değerlerini gösteren bir örnek var. Onun yanında da tek bir renk için renk yelpazesini görebilirsiniz.

Renk / Değer / Değer Yelpazesi

Renk / Değer / Değer Yelpazesi

Renk planımı seçerken uyguladığım bir kural: renk planınızda mutlaka renklerin değer yelpazesi olduğundan emin olun. Her tasarımda, kontrastı üretmek için biraz açık renge ve biraz karanlık renge ihtiyacınız olacak. Örneğin, tasarımınızın arkaplanı karanlık ise bir de açık renge ihtiyacınız olacak ki metin rahatça okunabilsin. Ya da tam tersi, açık renk bir arkaplanınız varsa metninizin okunabilmesi için açık bir renk gerekli olacak.

Ayrıca genellikle renk planımı seçerken 2 ila 5 renk seçerim. Seçenek sayısını arttırın ve tasarımda iyi sonuçlar elde edeceksiniz. Aşağıda bir araya getirdiğim bir renk planının örneği var.

Görebileceğiniz gibi bir karanlık renk, bir orta değerli renk ve bir de açık renk seçtim. Sağa doğru ise her seçtiğim renk için bir değer yelpazesi hazırladım. Projemde palet niyetine kullanacağım renkler, bu koleksiyondaki renkler olacak. Bir kere paletim hazır olduğunda, sadece bu paletteki renkleri kullanmak için elimden gelenin en iyisini yapmaya çalışacağım.

Tamam, şimdi kaç tane renk seçeceğimiz ve hangi değerlerde olmaları gerekiyor gibi teknik renk seçimi işlemlerini hallettiğimize göre, sırada ne var? Sırada ne olacağını söyleyeyim, en zor kısım; o 2 ila 5 rengin hangileri olması gerektiğine karar vermek! Şahsen bunu zaman zaman zor bir iş olarak görüyorum. Aşağıda renk planımı yaparken aldığım yardımlar ve teknikler var:

Sıcaklık yelpazesine uyun. Ya tüm sıcak renkleri ya da tüm soğuk renkleri seçin. Sıcak renkler kırmızılar, turuncular, sarılar, kahverengiler vb. Soğuk renkler ise maviler ve morlardır. Ben şahsen, yeşilleri ise nötr olarak görmekteyim. Eğer tüm renklerinizi bir sıcaklık aralığında seçerseniz, büyük ihtimalle uyumlu olacaklardır.

İlham almak için www.colorlovers.com gibi bir siteyi kullanın. Bu mükemmel sitenin tüm olayı renk planlarıyla ilgili. Sayfa sayfa renk planları bulabilirsiniz.

Bir gözünüz etrafta olsun. Her tarafınızda renk planları vardır. Markette torbanıza bakın, Starbucks’taki tablodaki renklere bakın, Doğa Ana’ya bakın! Hoşunuza giden bir renk dizisi gördüğünüz zaman, not alın ve bilgisayarınızda bunu tekrarlayıp tekrarlayamayacağınıza bir bakın.

Var olan şirket renklerine dikkat edin. Sık sık, bazı markaların renklerinden yararlanıyorum. Logolarına ve renk yelpazesine bakıyorum daha sonra bunu başlangıç noktam olarak alıyorum. Daha sonra belki bir veya iki renk ekleyebiliyorum.

Aşağıda oldukça kısıtlı renk yelpazesi kullanarak hazırladığım bitmiş bir tasarım var.

Gördüğünüz gibi, kısıtlı renk yelpazesi ve yazı tiplerimi sınırlamak her şeyi bir arada, düzenli gösteriyor.

Bu derslerin basit olduğunu biliyorum ama bunlar tasarımın esaslarıdır. Yani, bilgileri biraz tazelemek kimseyi öldürmez. Beş kural daha kaldı.

3-) Renk Konsantrasyonu

Tasarımınızdaki kontrastın iyi olması, renk seçimlerinizle doğrudan orantılıdır. Kontrast, tasarımınızdaki renklerin değerlerindeki farklılıklardır. Değer ise bir rengin ne kadar aydınlık veya ne kadar karanlık olduğudur. Hiç beyaz bir çalışma alanı üzerine birinin şöyle bir espri yaptığını duydunuz mu: “Hey, bu kar fırtınasındaki beyaz bir inek!”? Bu, sıfır kontrasta örnektir. Beyaz üzerinde beyaz sıfır kontrasttır. Hiçbir şey göremezsiniz.

Çok basit değil mi? Yani demek istediğim ne kadar aptalca bir yazı bu? Tasarladığım şeyin görünebilir olması gerektiğini açıklıyorum? Bu bir ders için çok gerizekalı bir konu değil mi?

Yanlış.

Çünkü maalesef, sürekli tasarımcıların kontrastla ilgili problemler yaşadığını görüyorum. Bir tek o da değil, kontrast, uygun bir şekilde kullanıldığında önemli bir araçtır.

Çok sık gördüğüm bir hata şu: Tasarımcılar kontrast yaratmak için değer değişikliği yerine renk değişikliği kullanıyorlar. Örneğin, orta değerde bir mavi, orta değerde bir kırmızının tam tepesinde durarak kontrast oluşturuyor. İkisi arasındaki farklılığı görebilirsiniz. Ama aynı değerden iki renk bir arada olduğu zaman (“vibrating”), mavi ve kırmızının buluştuğu çizgide, gözünüz ikisi arasında ileri geri gider, tereddütte kalır. Bu neredeyse yazının nabzı atıyormuş hissi verir.

Eğer amacınız gerçekten canlı bir şey yaratmaksa, bu tekniği kullanabilirsiniz. Ama gözlere fazla yüklenecektir ve bir çok insan bunu rahatsız edici bulacaktır. İşte aynı tasarımın daha fazla kontrast sahibi farklı renkler kullanılarak hazırlanmış hali:

Bu ikinci olan, açıkça gözlere daha az yükleniyor.

Tasarımınızın açık ve kolay okunur olup olmadığını anlamak için, her şeyi bir an için siyah beyaz yapabilirsiniz. Illustrator’da bunu tasarımı seçtikten sonra “Edit>Edit Colors>Convert to Grayscale” yönergesini izleyerek; Photoshop’ta ise tasarımınızı düzleştirdikten (flat) sonra, “Image>Adjustments>Desaturate” yönergesini izleyerek yapabilirsiniz.
Her iki şekilde de, bu testi yaptıktan sonra yaptığınız şeyi geri almanız gerekecek.
İşte aynı tasarımın, biri iyi kontrastla diğeri kötü kontrastla hazırlanmış hali. Ve her birinin altında ikisinin de siyah beyazda nasıl görüneceği var.


solda: iyi kontrast / sağda: kötü kontrast

Soldaki tasarımdaki yazıları okumanın ne kadar kolay olduğunu görebilirsiniz, özellikle siyah beyaza döndürüldüğü zaman. Sağ taraftaki tasarım ise şekilleri belirlemek için daha az kontrast ve daha çok renk farklılığı kullanmış.
Her zaman aldığım bir soru da şu: “Bir arkaplan filigranı (watermark) için hangi saydamlık (opacity) seviyesini kullanmalıyım?”. Bence iyi bir filigran arkaplanı %10-%15 saydamlıkta olmalıdır. Bir kez daha –bunların hepsinin amacı, tasarımınızdaki kontrastın sürekliliğini sağlamaktır. Eğer arkaplan açık renkse –o zaman filigran, uygun bir açıklıkta ve tam tersi olmalıdır. Aşağıda iyi ve kötü filigran için örnekler var:


arkaplandaki bu filigran %15 şeffaflığa ayarlandı. iyi kontrast!

arkaplandaki bu filigran %50 şeffaflığa ayarlandı. kötü kontrast!

Kontrastla ilgili olarak belirtmek istediğim diğer bir şey ise bir araç olarak kullanılabileceğidir. Eğer, örneğin, izleyicinizin dikkatini tasarımınzdaki önemli bir şeye çekmek istiyorsanız, bunu kontrastla başarabilirsiniz! Tüm tasarımı açık renkte tutabilir ve dikkat çekmek istediğiniz şeyi karartabilirsiniz. Aşağıda bu şekilde iyi tasarlanmış bir tanıtım sayfası var:

Bu, E-Harmony’nin web sitesindeki tur bölümünden bir sayfa. İnsanlara bir tur vermek isterlerken, gerçekten istedikleri insanların üye olmasını sağlamak. Yani, bu sayfaya baktığınızda, sayfadaki en büyük ve karanlık şey nedir? Bir kızın tıklanamayan resmi ve “Get Started Now/Hemen Başlayın” butonu. Açıkça, “Get Started Now/Hemen Başlayın” butonuna tıklamanızı istiyorlar. “Next Step/Sıradaki Adım” butonuna kıyasla, “Get Started Now/Hemen Başlayın” butonunun ne kadar büyük ve karanlık olduğuna bakın. “Next Step/Sıradaki Adım” butonu, turdaki birinin tura devam etmek için tıklaması gereken bir buton. Ama “Get Started Now/Hemen Başlayın” butonunun ne kadar çekici olduğunu fark ettiniz mi? Ve neden? Neden sayfadan üzerinize atlıyor? Basit: Kontrast!

Bu, tasarımda basit ama temelde kritik bir dersin sonu oluyor. Bunu okuduğunuz için teşekkür ederim. Dört basit kural daha var.

Bu derslerin devamını 5-6 günde bir ekleyeceğim.

Bir Cevap Yazın