Mobil Arayüz Tasarımları İçin Tipografi Kuralları

Konular, Mobil Pazarlama 23 Mar 2015
Mobil Arayüz Tasarımları İçin Tipografi Kuralları

Mobil arayüz tasarımları için tipografi kullanımı teknolojiyle birlikte değişime devam eden ve güncellenmesi gereken bir konudur.

Muhtemelen iyi tipografinin görünmez olduğunu daha önce duymuşsunuzdur. En doğru ifadeyle iyi tipografi zahmetsiz okunandır diyebiliriz. Göz bir satır boyunca gezinir, sekme denen atlayışlar yapar. Aslında harfleri ve hatta kelimeleri okumazsınız, kelime bölümlerini okursunuz ve beyniniz bulmayı umduğu anlam için boşlukları doldurur. Beyin şaşırırsa, gözü tekrar göreve gönderir ve çıkarılan anlamın doğruluğunu kontrol eder.

İyi tipografi, düzgün bir akış oluşturarak gözlerin satır boyunca yaptığı işi kolaylaştırır. Mobil cihazlar, tipografi yapan bir tararımcı için doğal zorluklara sahiptir; alan sınırlı ve ortam ışığı genellikle zayıftır. Fakat basit ayarlamalar yaparak, mobil cihazlarda okunabilirliği artırabilirsiniz.


1. Kendinize alan verin.

Sanılanın aksine, tipografi ekranda küçük karmaşık satırların düzenlenmesi ile değil, büyük ölçüde içindeki ve çevresindeki boşlukla ilgilidir. Bunu anlamak için fontları daha iyi anlamanıza yardımcı olur. ‘O’nun ortasında boşluk ‘b’, ‘c’, ‘s’ gibi harflerde de olduğu gibi kendine has bir özelliğe sahiptir. Tipografi çalışırken tüm bu detayların göz önünde bulundurulması gerekir.

Tipografide hiyerarşiden bahsederken <h1> ile <p> arasındaki kısımdan söz ediyoruz. Fakat satırın ya da paragrafın akışını etkileyen farklı bir hiyerarşi daha var. Buna alan hiyerşisi diyebiliriz. Harfler, kelimeler ve satırlar arasındaki boşluk bu hiyerarşinin konusudur. Mobilde en iyi okunabilirlik için bu hiyerarşiyle özellikle ilgilenmek gerekiyor.


2. Ölçüye dikkat edin.

Burada bahsettiğimiz ölçü, metni oluşturan satırların uzunluğudur. Satırların tamamı aynı uzunlukta olmayacağı için ideal ölçüyü tutturmak büyük önem taşıyor. Rahat okuma için ideal ölçü genellikle 65 karakter olarak kabul ediliyor. Ölçünün uzunluğunu belirlerken bu standardın yanı sıra font tasarımına dikkat etmek gerekiyor.

65 karakter bilgisayar ekranını doldurmak için çok az olabilir ama çoğu mobil cihazda, okunabilecek kadar büyük yazı boyutundaki 65 karakterin ekrana sığması için boşlukları küçültmek gerekebilir. Mobil ekranlarda bu ölçü için belirlenmiş bir standart yok. Yine de en çok 39 karakterlik dar sütunları çok sık görüyoruz.


3. İdeal satır arası boşluğunu bulun.

mobil arayüz tasarımları tipografi

Satır arası boşluğunun çok dar olması metnin takibini zorlaştırır. Çok geniş boşluklar ise satırlar arası geçiş yaparken akışkanlığı azaltır. Bu boşluk için kabul edilen standart 1.4em’dir. Ancak bu bazen çok dar olabilir. Mobil arayüz tasarımları için ideal boşluğa karar verirken kullandığınız fontun özelliklerini, satır uzunluğunu ve karakterler arası boşluğu göz önünde bulundurmalısınız.

Satır uzunluğu azaldıkça daha kısa satır arası boşluk kullanın. Masaüstü tasarımlarla kıyaslayınca mobilde daha kısa boşluk kullanmanız gerektiğini de unutmayın.


4. En etkili noktayı bulun

Tüm fontların en az bir tane etkili noktası vardır. Ekranda bu noktanın öne çıkacağı bir tasarımla kullandığınız fonttan en yüksek verimi alabilirsiniz. Etkili noktayı öne çıkarmak için font boyutunu kullabilirsiniz.

Doğru tasarımla etkili noktayı kullanarak şahane zıtlıklar oluşturabilirsiniz. Zıtlık, mobil arayüz tasarımları için tasarım yaparken büyük önem taşıyor. Çünkü dış etkenlere daha fazla maruz kalan kullanıcının dikkatini çekmenizi sağlıyor.


5. Düzensizliği kaybetmeden düzen sağlayın.

mobil arayüz tasarımları

Okuduğunuz metinlerin çoğu sola yaslanmıştır. Gözümüz bir satırdan diğerine geçerken gideceği yeri bilirse beynimiz daha kolay algılar. Bu nedenle metnin sol kısmının düzenli olması okumayı kolaylaştırır. Tüm satırların aynı noktadan başlaması gerekir. Diğer yandan elbette bir amaca hizmet ediyorsa birkaç satırı ortaya hizalı yazmanızda sakınca yok.

Bunu yaparken düzenliliğe odaklanıp, düzensizliği gözden kaçırmayın. Düzensizlik, mobil cihaz kullanıcısının dikkati başka bir yere kaydıktan sonra metne geri döndüğünde kaldığı yeri kolayca bulmasını sağlar.


6. Zıtlığı dikkatli kullanın.

Metin ve arkaplan arasındaki zıtlık okunabilirliği kolaylaştırsa da zıtlık kullanırken çok dikkatli olmanız gerektiğini unutmayın. Çünkü beynimiz içeriğe bağlı olarak yargıda bulunur.

Başlık, kullanıcı aynı anda çok fazla yazıyı görebildiği için masaüstü tasarımınızda gövdeden iki, hatta üç kat daha büyük olabilir. Mobildeyse, daha az metin gözükür ve abartılı zıtlık olumsuz etki bırakabilir. Mobil arayüz tasarımları, aşırı tipografik zıtlıklar içi pek uygun değil.

mobil arayüz tasarımları tipografi kuralları


7. Yazı boyutunu uyarlarken dikkat edin.

Yazı boyutunu mobil tasarımınıza uyarlarken gerekli değişiklikleri yaptığınızdan emin olun. Tüm karakterleri otomatik olarak belli oranda küçültmek yerine, her bir kısıma özel olarak yeni bir yazı boyutu belirleyin.

Başlığı ve dipnotu aynı oranda küçültürseniz dipnot okunmaz hale gelebilir. Diğer yandan masaüstü tasarımınızda çok farklı olan başlık ve metin boyutu, mobilde birbirine daha yakın olabilir. Çeşitli gruplar oluşturarak, her bir grup için en uygun yazı boyutunu belirleyin.


Tipografi her yeni teknolojiyle birlikte değiştiği için tasarımcıların kendini sürekli yenilemesi gerekiyor. Yine de okunabilir, başarılı bir tipografi için satırlar arası akışkan geçiş, temiz alan hiyerarşisi ve yeterli zıtlık konularına dikkat etmek gerekiyor. Bu özellikler mobil tasarımlar için büyük önem taşıyor.

Mutluluk paylaştıkça artar :)
← Instagram Yarışması Yapmak İçin 4 Önemli Kural Twitter Listeleri Nedir Ve Nasıl Fayda Sağlar? →

Yazar Hakkında

Gizem Taş
Gizem Taş
Boğaziçi Üniversitesi Fen ve Edebiyat Fakültesi, Batı Dilleri ve Edebiyatları bölümünden mezun oldu. Gizem, kariyerine metin yazarı olarak devam ediyor ve aynı zamanda Dijitalajanslar.com'da yazar olarak yer alıyor.

1 Yorum

  1. Berat Bozkurt
    23/03/2015 22:22

    Belki tasarımların olmazsa olmazlarından. Güzel bir noktaya değinmişsiniz, teşekkürler. Normal tasarımlarda tipografi önemli, hele ki mobil arayüz tasarımlarında bu nokta daha da önemli olduğunu düşünüyorum.


Yorum yapın