NİŞANTAŞI ÜNİVERSİTESİ TİPOGRAFİ II YGRF202 NİŞANTAŞI ÜNİVERSİTESİ © Sanat Tasarım Fakültesi stf.nisantasi.edu.tr

MOBİL ARAYÜZ TASARIMLARI İÇİN TİPOGRAFİ KURALLARI 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. NİŞANTAŞI ÜNİVERSİTESİ ©

MOBİL ARAYÜZ TASARIMLARI İÇİN TİPOGRAFİ KURALLARI 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. NİŞANTAŞI ÜNİVERSİTESİ ©

MOBİL ARAYÜZ TASARIMLARI İÇİN TİPOGRAFİ KURALLARI Ö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. NİŞANTAŞI ÜNİVERSİTESİ ©

MOBİL ARAYÜZ TASARIMLARI İÇİN TİPOGRAFİ KURALLARI İdeal satır arası boşluğunu bulun. 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. NİŞANTAŞI ÜNİVERSİTESİ ©

MOBİL ARAYÜZ TASARIMLARI İÇİN TİPOGRAFİ KURALLARI NİŞANTAŞI ÜNİVERSİTESİ ©

MOBİL ARAYÜZ TASARIMLARI İÇİN TİPOGRAFİ KURALLARI 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 NİŞANTAŞI ÜNİVERSİTESİ ©

MOBİL ARAYÜZ TASARIMLARI İÇİN TİPOGRAFİ KURALLARI Düzensizliği kaybetmeden düzen sağlayın 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. NİŞANTAŞI ÜNİVERSİTESİ ©

MOBİL ARAYÜZ TASARIMLARI İÇİN TİPOGRAFİ KURALLARI NİŞANTAŞI ÜNİVERSİTESİ ©

MOBİL ARAYÜZ TASARIMLARI İÇİN TİPOGRAFİ KURALLARI 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. NİŞANTAŞI ÜNİVERSİTESİ ©

MOBİL ARAYÜZ TASARIMLARI İÇİN TİPOGRAFİ KURALLARI NİŞANTAŞI ÜNİVERSİTESİ ©

MOBİL ARAYÜZ TASARIMLARI İÇİN TİPOGRAFİ KURALLARI 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 olarakyeni 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 NİŞANTAŞI ÜNİVERSİTESİ ©

NİŞANTAŞI ÜNİVERSİTESİ © kaynaklar CRAIG, J. (2006). Designing with Type: The Essential Guide to Typography, Watson-Guptill. CRAIG; J. (1990). Basic typography: a design manual, New York: Watson-Guptill Publications. SAMARA, T. (2006). Typography Workbook: A Real-World Guide to Using Type in Graphic Design, Rockport Publishers. CARTER, R., Day, B., Meggs, P. Typographic Design: Form and Communication BECER, E. (2007), Modern Sanat ve Yeni Tipografi, Ankara: Dost Kitabevi Yayınları  JUBERT, R., LUPTON, E. and LEMOİNE, S., Typography and Graphic Design: From Antiquity to the Present, Flammarion AMBROS, G. and HARRİS, P., Typo: The Fundamentals of Typography, AVA Publishing Typography: The Arrangement, Style and Appearance of Type and Typefaces SARIKAVAK, N. K., Tipografinin Temelleri, Doruk SARIKAVAK, N. K., Sayısal Tipografi: Batı da ve Ülkemizde Sayısal Harf/Font Tasarımcıları, Başkent Üniversitesi Yayınları http://www.dijitalajanslar.com/mobil-arayuz-tasarimlari-tipografi-kurallari/ NİŞANTAŞI ÜNİVERSİTESİ ©