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;

Screen Shot 2015-04-20 at 16.38.20

Ö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.

Lato-v-Clear-Sans

Ö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.

Screen Shot 2015-04-20 at 15.30.07

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:

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

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

Screen-Shot-2015-04-06-at-2.29.01-PM

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

Screen Shot 2015-04-20 at 16.49.00

Slack

Screen-Shot-2015-04-06-at-2.38.05-PM

Rdio

Screen-Shot-2015-04-06-at-2.40.26-PM

Bir çoğunu okuduğum ve okumaya doyamadığım, diğer müthiş tipografi kaynaklarını da tavsiye ederim.

Adobe Creative Cloud aboneliklerinde öğrencilere ve öğretmenlere özel %60 indirim fırsatlarını kaçırmayın.

Makalenin derlenmesinde blog.invisionapp’e katkıda bulunan by Chris bowler’ın yazısından yararlanılmıştır.


1372242240504016021214

Bugün 0 makale daha okuyabilirsin. Sınırsız okumaya devam etmek için
Ücretsiz Kaydol

Bu içerik SHERPA Blog okurlarına özel.

Devamı ve daha fazlası için sadece okur girişi yapman yeterli.

Kullanıcı deneyimi (UX), tasarım ve teknoloji alanında bilgini pekiştir.

Kullanım koşullarını okudum ve kabul ediyorum.
Neden kaydolmalıyım?