usta bir tasarımcı olmanın kuralları #3 | bildirgec.org

Ç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. Bunlar bittikten sonra söz veriyorum size nasıl çizileceğini öğreteceğim!

Bill

Kaynak

yazı tarafımdan çevrilmiştir, bana ait değildir.