Arayüz tasarımında tipografi ipuçları

Teknoloji, insan hayatında artık çok büyük bir yer kaplamakta ve bu insanların teknoloji aygıtlarıyla olan iletişimde, kolaylaştırıcı tasarımların yapılmasına ve/veya ihtiyaç duyulmasına neden olmaktadır.

Kullanıcıların, zamanın çoğunu bu teknoloji aygıtlarıyla geçirdiğini düşünürsek bunun büyük bir zaman kaybına neden olduğunu anlarız. Peki, ne zaman? Yanlış tasarım problemleri ortaya çıktığında… İletişim tasarımı başlığının altını çizmek istedim. Çünkü; Arayüz tasarımında tipografi, okuyucu için oluşturduğunuz içeriği, anlamlı yazı tasarımına dönüştürür.

Okudukça ufkumu açan Olivier Reichenstein’in makalesinde de belirttiği gibi:

En iyi şekilde kullanılmış ve anlamlı bir tipografi; okunabilirlik, erişilebilirlik ve kullanılabilirliğe göre bir uçtan bir uca genel grafik dengeyi oluşturur.

Arayüz tasarımında, tipografi nasıl en iyi şekilde kullanılır? Hangi fontlar birbiriyle grafik dengeyi oluşturur? Bugün kullandığımız uygulamaların tasarımlarını referans alarak, kendi geliştirdiğimiz arayüz tasarımlarını nasıl geliştirebiliriz?

Tipograf ve yazar Robert Bringhurst ünlü başyapıtı The Elements of Typographic Style kitabında der ki;

Tipografi, içeriği onurlandırmak için vardır.

Peki bu ipuçları neler?

1.Çeşitli boyutlarda iyi çalışan bir font seçin

Arayüz tasarımı, zaman zaman farklı çeşitlikte fontlara ihtiyaç duyar. Okunabilirliği ve kullanılabilirliği her boyutta anlamlı hale getirebilmek için farklı font kullanırız. Şu anda bulunduğunuz SHERPA Blog’da başlıklar(H1) Source Sans Pro Black ve içerik(Paragraf) Noto Serif Regular şeklinde 2 farklı webfont ile arayüzü tasarlanmıştır. Okunabilirliği ve kullanılabilirliği göz önünde bulundurarak, siz okuyucularımıza bu 2 farklı yazı yüzünü deneyimleyin istedik.

Avenir, Univers ve Lato web fontlarının nasıl kullanıldığına bir bakalım;

Örnek: Avenir

2. Kolayca ayırt edilebilen bir yazı yüzü ile harf formu seçin

Bir çok yazı yüzü birbirine benzerdir. Fontları ayırt edebilmek için belli başlı harflere bakabilir ve harflerin benzerliklerini eşleştirebilirsiniz. Genellikle eşleştirilebilen harfler şöyle; büyük I ve küçük L’ye bakabilirsiniz. Bir küçük R ve N harfi birlikte kullanıldığında kolaylıkla küçük bir M harfi olarak görünebilir. Yani bu formlar arasında net bir ayrım yapabilir, kullanıcılar için bir yazı yüzünü daha okunabilir hale getirebilirsiniz.

Örnek: Lato ve Clear Sans (büyük I ve küçük L‘ye bakın)

3.Arayüz tasarımında metni iyileştirin

Cameron Moll’un iyi ve büyük tasarımcıların 9 becerisi başlıklı yazsında; İyi tasarımcılar içerik olarak metni iyileştirirken, muşteşem tasarımcılar arayüz tasarımında metni iyileştirir.

4.Yapılacak işi iyi düşünün

Kullanıcının çözmesine yardımcı olduğunuz sorunları kendinize sorun. Bu sorunun cevabı: Arayüz tasarımı kararları alınırken prensip edilmeli, tipografi dahil.

Tim Brown’un dediği gibi:

Farklı yazı ile farklı işler yapmak.

Instapaper tasarımcıları yapılacak iş üzerinde, yazıyla eşleşen mükemmel bir iş yapmış.

Instapaper 2 işlevli web ve mobil uygulama yerine:

İnsanlar daha sonrası için web içeriğini kaydetmiş ve bozmuşlar
Okumak için onlara bir alan/yer verilmiş

Instapaper: Okunabilir ve kullanılabilir olması için 2 farklı web font kullanmış.

Profesyonellerden öğrenin;

Aşağıdaki profesyonel uygulamaların kullanıcı ve okuyucu kitle yoğunluğunu da sayarsak, Chris Bowler’a katılıyorum. Yaklaşık 5 aydır Medium ve Slack kullanıyoruz ve bir de kişisel hesabım var.

Medium