Mobil Arayüz Tasarımları İçin Tipografi Kuralları
Markalar Google	Coca-Cola	Apple	Garanti Bankası	Türk Hava Yolları	Turkcell	McDonald's	Samsung	Vodafone	Volkswagen	Mercedes-Benz	Pepsi	Microsoft	Nike	Hürriyet	Yapı Kredi	Ford	LG	TEB	Akbank	Ülker	Procter & Gamble	Unilever	Burger King	IBM	Fiat	Teknosa	Pegasus	IKEA	KIA	BMW	Türk Telekom	Turkcell Superonline	ETİ	Toyota	Domino's Pizza	Türkiye İş Bankası	Vestel	Amazon	Starbucks	Bosch	Dove	Mavi	Yemeksepeti	Audi	Nestle	Heineken	Intel	Profilo	Arçelik	TTNET	Finansbank	Nescafé	NIVEA	ING Bank	Hyundai	Tick Tock Boom	Nissan	Lexus	Volvo	Renault	Avea	Beşiktaş	MasterCard	Nokia	MINI	Durex	Magnum	Boyner	Adobe	PayPal	Oreo	Eczacıbaşı	ING Emeklilik	Kütahya Porselen	Allianz	Koton	WWF	Avon	Honda	Colgate	Red Bull	Adidas	KFC	Acer	Filli Boya	Lipton	Panda	Pronet	Hepsiburada	Media Markt	BKM Express	Popeyes	Migros	Koroplast	L’Oréal	Superfresh	Deloitte	Evian	Ray-Ban	Carte d'Or	Sodexo	Hillside City Club	Vakıfbank	Sony	Rixos Hotels	ASUS	Tadelle	Bridgestone	DeFacto	Tefal	Dardanel	Markafoni	OPET	Levi's	Fenerbahçe	Beko	Artema	Anadolu Efes	Saka Su	AtlasGlobal	Jolly Tur	Philips	Okey	Calve	Algida	HP	Kiğılı	Shazam	Stratejist Creative Communications Agency	1V1Y	Boticca	Victoria's Secret	Snickers	Kanyon	Absolut Vodka	Yörsan	Lassa	Radikal	Doğadan	Generali Sigorta	Duracell	Rowenta	Bocchi	DemirDöküm	Nestea	Çanakkale Seramik	Logitech	Nef	Şölen	NTV	Koska	Altınbaş	Denizbank	Arzum	Anadolu Sigorta	NN Hayat ve Emeklilik	SEK	Aygaz	AnadoluJet	Albaraka Türk	SunExpress	Kentpark AVM	Balparmak	Greenpeace	Prima	Sbarro	AXA Sigorta	Contentus	H&M	Swatch	Jack Daniels	Cafe Crown	Illy	KLM	Wrangler	Puma	Smirnoff	Brandium	Tropicana	Mazda	Marshall	Namet	Motorola	Doğanay	Penguen	Hilton	Kiehl's	Milliyet	Lumberjack	SsangYong	Pizza Hut	Tadım	Citroen	Casper	Yedigün	Neutrogena	Mudo	Paşabahçe	Fanta	Biskrem	Isuzu	Gratis	Morhipo.com	Little Caesars	LEGO	GAP	Şekerbank	Odeabank	Tchibo	Nurus	MetLife	Shell	Fakir	Fibabanka	Anadolu Hayat Emeklilik	Vitra	Polisan	Tesla	Hisseli Harikalar	Ege Yapı	Brands&Clicks	Pınar	Dacia	Bigbang Dijital	11digital	Piktus Creative	N11.com	DONE	Trendyol	First	Fol	Bigbang Digital	Netflix	Deep Dijital	Porsche	Dijital Ajans Rehberi	Dijital Reklam Ajansları
Ayın Ajansı	Sponsor Ajans	Güncel Yazılar	Getir & BiTaksi Tasarım Yarışması
Konular, Mobil Pazarlama	23 Mar 2015	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.
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.
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.
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.
← Instagram Yarışması Yapmak İçin 4 Önemli Kural
Twitter Listeleri Nedir Ve Nasıl Fayda Sağlar? →
1 Yorum 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.
Güncel Yazılar	Getir & BiTaksi Tasarım Yarışması