Tipografi, web tasarımı için sıklıkla başvurulan bir yöntem. Bu yazımızda tipografik web siteleri için 20 örnek paylaştık.
Peki, Tipografi neden bu kadar popüler?
Tipografi, uzun zamandır kullanılan bir konsept ve uzun süre daha kullanılacağa benziyor.
İlk olarak, sahip olduğu sanatsal bileşenler sayfanın estetiğini artırıyor. Ayrıca okuma ve anlamayı kolaylaştıran grafik tasarım ögeleri içeriyor.
Tipografi, okumayı kolaylaştırmak için mi yoksa dekorasyon için mi kullanıldığına bağlı olarak değişiklik gösteriyor. Tasarımcılar için web sitesi tasarımlarında tipografiden yararlanmak, tipografik web siteleri tasarlamak, web teknolojilerinde olan gelişimlerden dolayı giderek daha kolay hale geliyor.
İşte birbirinden güzel 20 tipografik web sitesi örneği:
1) A List Apart
A List Apart, imaj kullanmak için çok fazla yer harcamıyor. Toplumu aydınlatmak için uğraşıyorlar ve neyse ki metinlerin bunaltıcı olmaması konusunda hassaslar…
2) Basheer Tome
Basheer Tome, web sitesinde duruluğu ve sadeliği önemsiyor. Bu ince ve yuvarlak font’lar siteyi gösterişli ve modern olarak yansıtıyor. Myriad Pro kullanılarak standart hale getirilmiş.
3) Bleed Design
Büyük başlıkların popüler olmasının sebebi hızlı bir şekilde okunabilmesi… Tabi ki bunu hoş ve sade bir font ile desteklemek gerekir. Birçoğumuzun aşina olduğu Helvetica Neue kullanılmış.
4) VGrafiks
Bu tipografik web sitesinin her sayfasında üç ve beş arasında değişen farklı yazı karakteri ve büyük başlıkları için de Intro kullanılmış. Çok fazla yazılı içerikleri yok fakat tipografik arayüzleri okumayı kolay ve hızlı kılıyor.
5) Co Op
Dijital Ajanslar, web tasarımlarının büyük bir bölümünde metin ve içerikten daha çok imaj ve çalışmalara odaklanırlar. Bu genellikle işe yarayan bir yöntemdir. Co Op, farklı bir yaklaşım sergilemiş ve tasarımlarını her ikisine eşit olarak dağılacak şekilde yapmışlar. Aslında Open Sans kullanımı ile, tipografinin göze daha çok hitap ettiği bile söylenebilir.
6) Elysium Burns
Blog arayüzü ile birçok metin kullanıldığını biliyorsunuz. Fakat her şeyin sıkıcılıktan uzak ve okunabilir olması önemli. Elysium, tipografi kullanımı ile heyecan uyandıran sıradan bir blog arayüzü kullanarak bunu çözmüş. Farklı yazı karakterleri farklı şeyleri ayırt edebilmek için yardımcı oluyor ve Georgia bu sitenin gövde metni konusunda iyi iş çıkarıyor.
7) Integral Jean Beaudoin
Bu da ilginç bir arayüz... Arka planda yoğun metin ve resimler bulunuyor. Daktilo yazısını andıran bir font yaratıcı olarak kullanılmış. Başlıklar için de Benton Sans’tan yararlanmışlar.
8) Kurppa Hosk
Bazı kurallara uymamanın yanı sıra arayüz de tipografinin hoş görünmesini sağlıyor. Kruppa Hosk, içeriklerini sunmak için ağırlıklı olarak Graphik Web fontunu kullanıyor.
9) Life & Thyme
Diğer tipografik web sitelerinin aksine, Life and Thyme görsel olarak imajlara ve videolara dayanıyor.
10) MailChimp 2012 Annual Report
İnfografikler artık bilgileri gösterebilmek için sıklıkla tercih edilen bir yöntem oldu. MailChimp 2012 yıllık raporlarını görselleştirmek için çeşitli infografikler yapmış. Etkili tipografi şemaları ve Proxima Nova başlıkları ile bu yıllık rapor başarılı bir tasarım olarak görülebilir.
11) Minimalissimo
Bu web sitesi gövde metni için Skolar fontunu kullanarak eski kitap tarzı ile minimalizmin izlerini taşıyor.
12) Monobrow
Monobrow’un ana sayfasına göz gezdirirken, metnin nasıl organize edildiği ve görselleştirildiği konusunda pek bilgi sahibi olmak mümkün değil. İyi tasarlanmış arayüzleri görmek için biraz daha detaylı incelemeniz gerekiyor. Bilgileri sunmak için Brawler ve Open Sans kullanılmış.
13) Negative Labs
Futura, sıklıkla kullanılan fontlardan birisi… Bu sitedeki en önemli şey sadece yazı karakteri değil, metnin kolonlara ve yanındaki imajlara uygun olarak oturtulma şekli… Aşağıya doğru indikçe daha çok tipografi arayüzü ile karşılaşıyorsunuz.
14) Premium Draught
Premium Draught, tüketiciler için özenle seçilmiş içkiler sunuyor. Arayüzlerin arasındaki menü fikrini es geçmemek lazım. Sadelik unsuru iyi kullanılmış.
15) Patrick Algrim
Tipografik web sitesi tasarımı konusunda en güzel kullanımlardan birisi güzel bir karışım oluşturmak. Sadece yazı karakterlerinden değil, stillerden de bahsediyoruz. Patrick, serif ve sans serif’leri karıştırarak güzel bir iş çıkarmış. Camingo Dos fontu da bu sitede geniş olarak kullanılıyor.
16) Purple Orange
Bazen ne kadar iyi olduğunuza ya da hizmetlerinizin ne kadar iyi olduğuna dair izlenimlerin dışında bir şeyler gerekebilir. Bazen müşterilerinizin anlayabileceği ve ikna edici şeyler yapmalısınız. Puople Orange, bunun farkında ve bilgilerini bunu hesaplayarak sunuyor. Open Sans yardımı ile insanlara “neden?” sorusunun cevabını veriyorlar.
17) Ros
Eğer metin ağırlıklı bir web sitesi tasarlamak istiyorsanız Helvetica kullanmanız iyi bir seçenek olabilir. Ros “advertainment” diye bir kelime üretmiş ve bu fikrin üzerine oynamaya karar vermiş. “Grid”, farklı font boyutları ve renkleri ile bu web sitesi tipografik web siteleri arasında dikkat çekmeyi başarıyor.
18) Tapmates
Tapmates, tipografiyi yoğun olarak kullanan bir web sitesi tasarlamış. Sitedeki büyük fontlar okumayı daha kolay ve hızlı hale getiriyor. Tapmates, Freight Text Book kullanmış.
19) The Real Awards
Bu web sitesi ise bolca renk ve imaj kullanmış. Fakat önceden belirttiğimiz gibi sadece imajlarla ilgili bir durum değil bunu diğer unsurlarla uyumlu hale getirmek önemli. Diğer sayfalara girdiğiniz zaman tipografi olarak samimi bir stil kullanılmış. Proxima Nova gibi bold fontlar metnin okunmasını kolaylaştırmış.
20) Moresoda
Bu web sitesinde beğendiğimiz şey, ilgiyi yakalayabilen yaratıcı tipografinin yarattığı güven. Site, metinler ve gerçekçi fotoğrafların dışında başka elementler içeriyor. Lubalin gibi harika fontlar ile eğlenceli ve güçlü bir web tasarımı yapılabileceğini gösteriyor.
Tipografik web siteleri, son zamanda tasarımcıların tercihi olmaya başladı. Web Tasarımda Tipografinin Önemi başlıklı yazımızda tipografinin neden önemli olduğuna dair açıklamaları bulabilirsiniz.
Tasarladığınız web sitesi tasarımının, milyonlarca site arasından sıyrılması ve dikkat çekmesi için tipografiye dikkat etmenizi tavsiye ederiz.