İnternet teknolojileri, kullanıcılar için mükemmel hazırlanmış bir yemek olabilir. Peki yemeği hazırlayan aşçılar, yani web geliştiricileri ve tasarımcıları için aynı şeyi söyleyebilir miyiz? Çoğu zaman “hayır”. Çünkü internet ortamında önümüze mükemmel ölçülerle hazırlanmış, defalarca test edilmiş, geliştirişmiş, sürekli iyileştirilmiş bir tasarımın arkasında uykusuz geçen çok geceler var.
Web tasarımcıları, kullanıcıların beğenisini ölçmek için birçok yöntem kullanıyor. Kullanıcıların nelerden hoşlandığını öğrenerek, onlara uygun içerikler üretmeye çalışıyorlar. Bu çoğu zaman usandırıcı bir uğraş olabiliyor. Ancak doğru tekniklerle uygulandığında hem tasarımcılar hem de kullanıcılar için faydalı oluyor.
Web tasarımcılarının önemsediği tek ölçüt kullanıcıların beğeni tarzları değil. Tasarım uygulamalarında bazı püf noktaları yakalayarak mükemmeli arıyorlar. Bu yazıda, tasarım alanında sizi öne çıkaracak 6 ipucunu açıklamalarıyla birlikte bulabilirsiniz.
1. Renk ve ağırlık kullanın
UI metni tasarlamada karşılaşılan yaygın bir hata var. Tasarımcılar genellikle hiyerarşi oluştururken yazı tipi boyutunda takılıp kalıyor. Görülen yaygın bir hata, hiyerarşinizi kontrol etmek için yazı tipi boyutuna çok fazla güveniyor. Sanki bir sözcüğü büyük yazınca etki şansı da her zaman artacakmış gibi düşünüyorlar. Bu durum, belki bazı bağlamlarda geçerli olabilir. Ancak genel – geçer bir kural olarak algılamak pek de doğru değil.
“Bu metin çok mu önemli? O zaman çok büyük yazalım. ”. Aynı şekilde, “bu metin çok da önemli değil mi? İkincil öneme sahipse küçültelim.” Tasarımcılar, ikincil öneme sahip olduğunu düşündükleri metinleri küçültünce kurmak istedikleri hiyerarşinin kendiliğinden oluştuğunu düşünüyor. Ancak bu, problemli bir yaklaşım. Çünkü her şartta geçerli değil. Dahası, bazen tasarımın kalitesini olumsuz da etkileyebilir.
Peki ne yapmak gerek? Metinler arası hiyerarşi oluşturmaya çalışıyorsanız, gerçekten de yukarıda anlatılan yöntemi kullanmak gerektiğini düşünüyorsanız tamam, kullanın. Yine de bunu alışkanlık haline getirmeyin! Onun yerine, aynı hedefinizi yazı tipi ve renk ağırlığı üzerinde oynayarak bir şeyler yapın. Hedefinizi bu şekilde de gerçekleştirmeniz mümkün. Metinleri üç ya da dört ayrı renkle belirtebilirsiniz. Örneğin,
- Birincil metin siyah olmayan koyu bir renkle, makale başlığına benzer şekilde,
- İkincil metin gri renkle,
- Yardımcı metinler ise daha gri bir tonla kullanılabilir.
2. Renkli arka plan üzerine gri renkte metin kullanmayın
Metninizi daha açık bir gri tonda yazmak, bazı durumlarda beyaz bir arka planda vurgu yapmak için iyi yoldur. Fakat bu durum, renkli arka plan için pek geçerli değil. Çünkü burada beklenen etki oluşmuyor, tersine, kullanıcı olumsuz etkileniyor. Metninizi kullandığınız arka planın rengine yakın belirlemek, evet, hiyerarşi oluşturmada yardımcı olur, ancak açık gri hariç.
Renkli arka planda tasarım yaparken kontrastı azaltmak için iki yol bulunuyor:
Beyaz metnin opaklık oranını azaltın
Beyaz renkte yazı kullanın, ayrıca opaklık oranını düşürün. Bu, arka plan rengini bir miktar kanatabilir ve metninizi kullandığınız arka planla çok çakışmayacak şekilde vurgular.
Arka plan renginizi temel alan bir renk tonunu manuel olarak seçin
Böylece, arka planınız görüntü ya da desen olduğunda, veya opaklığın azaltılması metninizi fazla mat / soluk yaptığında işe yarar. Arka planınız ile aynı tonda olan bir renk tercih edin. Size en uygun görünene kadar açıklığı ve doygunlukta ayarlama yapın.
3. Gölgeleri kaydırın
Kullandığınız kutu gölgeleri daha belirgin hale getirmek için bulanıklaştırma ya da yayma değerleri kullanmak yerine dikey yönde bir kayma tercih edin. Bu, tasarımınızın daha doğal görünmesine yardım edecektir. Çünkü gerçek dünyada olduğu gibi aşağı yönde parlayan bir ışık kaynağına benzer. Bu öneri, form girişleri gibi iç içe kullanılan gölge seçeneklerinde de uygulanabilir. Gölge tasarımı hakkında internet üzerinde çok sayıda kaynak mevcut. Bunları inceledikten sonra en doğru gölge tasarım tercihlerinizi oluşturabilirsiniz.
4. Daha az sayıda kenarlık kullanın
İki tercih arasında kaldığınızda, kenarlık kullanımını eleyin. Kenarlıklar, çok sayıda öğenin yer aldığı tasarımlarda sınırları belirleyerek sadelik sağlamak için iyi bir yol olabilir. Ancak elbette ki tek yol değil. Üstelik kenarlıklar, fazla kullanıldıklarında tasarımızı kalabalık ve daha da kötüsü karmaşık gösterebilir. Bu durum, bir tasarımcının asla istemeyeceği bir senaryo olsa gerek.
İmlecinizi kenarlık butonuna götürmeden önce şu önerilerden birini deneyebilirsiniz:
- Bir kutu gölgesi kullanın
- İki farklı tonda arka plan rengi deneyin
- İlave boşluk ekleyin
5. Küçük simgeleri kullanmaktan çekinmeyin
Büyük simgelerin yer alacağı bir tasarım hazırlıyorsanız, Zondicons ya da Awesome gibi ücretsiz simgeler alabilir, ihtiyacınıza göre uygun miktarda boyutu artırabilirsiniz. Bunlar vektör görültüsü olduğu için. Elinizde küçük boyutta simgeler varsa, bunları başka bir şeklin içinde değerlendirmeyi ve bu sırada şekli bir arka plan rengiyle desteklemeyi deneyin. Bu şekilde hem daha geniş bir alan doldurursunuz hem de asıl simgeyi istediğiniz boyuta yakın tutarsınız. Yeterli bütçeniz bulunuyorsa, Icionic veya Heroicons gibi premium simge setleri de tercih edebilirsiniz.
6. Her butonda bir arka plan rengi kullanmayın
“Olumlu bir eylem için buton tasarlıyorum. Hemen rengini yeşil yapayım.” – “Bu olumsuz bir seçeneğe yönlendiriyor, rengi kırmızı olsun.” Anlambilim, tasarımda etkili olabilecek bir alan. Gerçekten de renklerin bir fonksiyonu olabilir. Ama hiyerarşiyi atlamamak gerekir. Çeşitli eylemleri tasarlarken, hiyerarşi yapısındaki iletişimi sağlamak çok daha önemlidir.
- Birincil eylemleri açık yapın. Yüksek kontrasta sahip arka plan renkleri kullanın.
- İkincil eylemleri açık ve belirgin yapmayın. Ana hat stilleri ya da daha düşük kontrast arka plan renkleri tercih edin.
- Üçüncül eylemleri keşfedilebilir fakat göze çarpmayacak bir şekilde geliştirin.
